Browse Source

修改bug,新增方法

笔下光年 6 years ago
parent
commit
e1aa8f1d40
5 changed files with 91 additions and 4 deletions
  1. 2 0
      README.md
  2. 15 4
      css/style.min.css
  3. 9 0
      js/main.min.js
  4. 24 0
      lyear_ui_cards.html
  5. 41 0
      lyear_ui_icons.html

+ 2 - 0
README.md

@@ -70,6 +70,8 @@
 - perfect-scrollbar
 
 ### 更新记录
+2019.12.08 修改cssbug,新增card-footer,增加图标的一些使用类
+
 2019.08.04 修改样式bug
 
 2019.05.13 略微调整单选框和复选框的样式

+ 15 - 4
css/style.min.css

@@ -1358,7 +1358,7 @@ input[type=radio] {
 .show>.btn-default.dropdown-toggle {
 	background-color: #f9fafb!important;
 	border-color: #ebebeb!important;
-	color: #fff;
+	color: #4d5259;
 	-webkit-box-shadow: none;
 	box-shadow: none
 }
@@ -2753,7 +2753,6 @@ dd, dt {
 	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.035);
 }
 .card-header {
-	display: table;
 	width: 100%;
 	margin: 0;
 	padding: 15px 24px;
@@ -2764,12 +2763,19 @@ dd, dt {
 	display: table-cell;
 	vertical-align: middle;
 }
+.card-header:after,
+.card-footer:after {
+    display: table;
+    content: " ";
+    clear: both;
+}
 .card-body {
     padding: 24px 24px;
 }
 .card-header .h4,
 .card-header h4 {
     font-size: 16px;
+    float: left;
 }
 .card-header + .card-body {
 	padding-top: 15px;
@@ -2856,6 +2862,11 @@ dd, dt {
 .card .tab-content {
     padding: 10px 24px;
 }
+.card-footer {
+    background-color: #fcfdfe;
+    border-top: 1px solid rgba(77,82,89,0.05);
+    padding: 15px 24px;
+}
 /* page-tabs */
 .page-tabs.nav-tabs {
     padding: 0px 10px;
@@ -3231,12 +3242,12 @@ dd, dt {
         float: none!important;
     }
 }
-@media screen and (max-width: 420px) {
+@media screen and (max-width: 430px) {
     .navbar-page-title {
         display: none;
     }
     .dropdown-skin .dropdown-menu {
-        width: -131px!important; 
+        left: -80px!important; 
     }
     .nav-step .nav-step-item p {
         display: none;

+ 9 - 0
js/main.min.js

@@ -134,6 +134,15 @@ jQuery( function() {
 		$("input[type='checkbox']").prop('checked', $(this).prop("checked"));
 	});
     
+    // iframe打开tab
+    $('.js-create-tab').on('click', function(){
+        parent.$(parent.document).data('multitabs').create({
+            iframe : true,
+            title : $(this).data('title') ? $(this).data('title') : '标题',
+            url : $(this).data('url') ? $(this).data('url') : 'lyear-main.html'
+        }, true);
+    })
+    
     // 设置主题配色
 	setTheme = function(input_name, data_name) {
 	    $("input[name='"+input_name+"']").click(function(){

+ 24 - 0
lyear_ui_cards.html

@@ -431,6 +431,18 @@
               <div class="card-body">
                 <p>内容...</p>
               </div>
+              <footer class="card-footer">
+                <div class="example-left m-t-10 pull-left">
+                  <label class="lyear-checkbox">
+                    <input type="checkbox">
+                    <span>五天内自动登录</span>
+                  </label>
+                </div>
+                <div class="example-right pull-right">
+                  <button class="btn btn-primary" type="reset" id="example-five">登录</button>
+                  <button class="btn btn-danger" type="submit">注册</button>
+                </div>
+              </footer>
             </div>
           </div>
           <!-- .col-sm-6 -->
@@ -448,6 +460,18 @@
               <div class="card-body">
                 <p>内容...</p>
               </div>
+              <footer class="card-footer">
+                <div class="example-left m-t-10 pull-left">
+                  <label class="lyear-checkbox">
+                    <input type="checkbox">
+                    <span>五天内自动登录</span>
+                  </label>
+                </div>
+                <div class="example-right pull-right">
+                  <button class="btn btn-primary" type="reset" id="example-five">登录</button>
+                  <button class="btn btn-danger" type="submit">注册</button>
+                </div>
+              </footer>
             </div>
           </div>
           <!-- .col-sm-6 --> 

+ 41 - 0
lyear_ui_icons.html

@@ -329,6 +329,47 @@
                 <h5>使用</h5>
                 <code>&lt;span class=&quot;mdi mdi-<span id="name">name</span>&quot;&gt;&lt;/span&gt;</code>
                 <hr>
+                <p>尺寸</p>
+				<div>
+				  <i class="mdi mdi-18px mdi-account"></i><code>mdi-18px</code>
+				  <i class="mdi mdi-24px mdi-account"></i><code>mdi-24px</code>
+				  <i class="mdi mdi-36px mdi-account"></i><code>mdi-36px</code>
+				  <i class="mdi mdi-48px mdi-account"></i><code>mdi-48px</code>
+				</div>
+                <p>旋转</p>
+				<div>
+				  <i class="mdi mdi-36px mdi-rotate-45 mdi-account"></i><code>mdi-rotate-45</code> 
+                  <i class="mdi mdi-36px mdi-rotate-90 mdi-account"></i><code>mdi-rotate-90</code>
+                  <i class="mdi mdi-36px mdi-rotate-135 mdi-account"></i><code>mdi-rotate-135</code>
+                  <i class="mdi mdi-36px mdi-rotate-180 mdi-account"></i><code>mdi-rotate-180</code>
+                  <i class="mdi mdi-36px mdi-rotate-225 mdi-account"></i><code>mdi-rotate-225</code>
+                  <i class="mdi mdi-36px mdi-rotate-270 mdi-account"></i><code>mdi-rotate-270</code>
+                  <i class="mdi mdi-36px mdi-rotate-315 mdi-account"></i><code>mdi-rotate-315</code> 
+                </div>
+				<p>翻转</p>
+				<div>
+                  <i class="mdi mdi-36px mdi-account-alert"></i>
+                  <i class="mdi mdi-36px mdi-flip-h mdi-account-alert"></i><code>mdi-flip-h</code> 
+                  <i class="mdi mdi-36px mdi-flip-v mdi-account-alert"></i><code>mdi-flip-v</code> 
+                  <p>注意:我们不包括同时使用mdi-flip-*和mdi-rotate-*。</p>
+				</div>
+				<p>不断旋转</p>
+				<div>
+				  <i class="mdi mdi-36px mdi-spin mdi-loading"></i><code>mdi-spin</code>
+                  <i class="mdi mdi-36px mdi-spin mdi-star"></i><code>mdi-spin</code>
+				</div>
+				<p>颜色</p>
+				<div class="clearfix">
+                  <div style="background-color:#000;float:left;">
+                    <i class="mdi mdi-36px mdi-light mdi-account dark-demo"></i><code>mdi-light</code>
+                  </div>
+                  <div style="background-color:#000;">
+                    <i class="mdi mdi-36px mdi-light mdi-inactive mdi-account dark-demo"></i><code>mdi-light mdi-inactive</code>
+                  </div>
+                  <i class="mdi mdi-36px mdi-dark mdi-account"></i><code>mdi-dark</code>
+                  <i class="mdi mdi-36px mdi-dark mdi-inactive mdi-account"></i><code>mdi-dark mdi-inactive</code>
+				</div>
+                <hr>
 <div class="example-icons">
   <div><i class="mdi mdi-access-point"></i><code>f002</code><span>mdi-access-point</span></div>
   <div><i class="mdi mdi-access-point-network"></i><code>f003</code><span>mdi-access-point-network</span></div>