Browse Source

样式调整

jqh 5 years ago
parent
commit
21accd1aba

+ 7 - 4
resources/assets/dcat/sass/components/_button.scss

@@ -6,6 +6,9 @@
   box-shadow: $btn-shadow;
   cursor: pointer;
 }
+a.btn {
+  line-height: 1.3;
+}
 
 .btn-warning {
   color: white;
@@ -26,14 +29,14 @@
 }
 
 .btn-sm, .btn-group-sm > .btn {
-  padding: 0.45rem 1rem !important;
-  font-size: 0.65rem;
-  line-height: 1.4;
+  //padding: 0.45rem 1rem !important;
+  font-size: 12px;
+  line-height: 1.1;
   height: 30px;
 }
 
 //a.btn-sm, .btn-group-sm > a.btn {
-//  padding: 0.6rem 1rem !important;
+//  line-height: 1.4;
 //}
 
 // --------------------- btn-custom -----------------------

+ 4 - 0
resources/assets/dcat/sass/components/_content-header.scss

@@ -3,6 +3,10 @@
   border-left: 0;
 }
 
+.content-header {
+  padding: 0 0 2px;
+}
+
 // 页面标题
 .content-header h1 {
   font-weight: 400;

+ 22 - 6
resources/assets/dcat/sass/components/_layout.scss

@@ -1,8 +1,24 @@
-.pin, .pin-y {
-  top: 0;
-  bottom: 0;
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  line-height: 1.3
 }
-.pin {
-  right: 0;
-  left: 0;
+
+.content .content-wrapper {
+  padding: 7rem 2rem 0;
+}
+
+.navbar-fixed-top {
+  .content-wrapper {
+    padding-top: 6rem;
+  }
+}
+
+.full-page {
+  .content .content-wrapper {
+    padding: 0;
+    margin-left: 0!important;
+  }
+}
+
+ol, ul, dl {
+  margin-bottom: 0;
 }

+ 6 - 0
resources/assets/dcat/sass/components/_table.scss

@@ -3,6 +3,12 @@
   margin-bottom: 0;
 }
 
+.table-middle {
+  td {
+    vertical-align: middle;
+  }
+}
+
 table.dataTable thead tr {
   background: transparent;
 }

+ 167 - 0
resources/assets/dcat/sass/components/_utilities.scss

@@ -0,0 +1,167 @@
+// 阴影
+.shadow-0 {
+  box-shadow: none!important;
+}
+.shadow {
+  box-shadow: $shadow!important;
+}
+.shadow-100 {
+  box-shadow: $shadow-100!important;
+}
+.shadow-200 {
+  box-shadow: $shadow-200!important;
+}
+
+// 文本大小
+// small
+.font-sm-1{
+  font-size: 0.7rem !important;
+}
+.font-sm-2{
+  font-size: 0.8rem !important;
+}
+.font-sm-3{
+  font-size: 0.9rem !important;
+}
+// medium
+.font-md-1{
+  font-size: 1.1rem !important;
+}
+.font-md-2{
+  font-size: 1.2rem !important;
+}
+.font-md-3{
+  font-size: 1.3rem !important;
+}
+.font-md-4{
+  font-size: 1.4rem !important;
+}
+.font-md-5{
+  font-size: 1.5rem !important;
+}
+//large
+.font-lg-1{
+  font-size: 2rem !important;
+}
+.font-lg-2{
+  font-size: 3rem !important;
+}
+.font-lg-3{
+  font-size: 4rem !important;
+}
+.font-lg-4{
+  font-size: 5rem !important;
+}
+.font-lg-5{
+  font-size: 6rem !important;
+}
+
+// Font weights
+
+.font-w-300 {
+  font-weight: 300;
+}
+.font-w-400 {
+  font-weight: 400;
+}
+.font-w-500 {
+  font-weight: 500;
+}
+.font-w-600 {
+  font-weight: 600;
+}
+.font-w-700 {
+  font-weight: 700;
+}
+
+// Font style
+.text-italic {
+  font-style: italic;
+}
+.text-highlight {
+  padding: 4px 6px;
+}
+
+//
+.pin, .pin-y {
+  top: 0;
+  bottom: 0;
+}
+.pin {
+  right: 0;
+  left: 0;
+}
+
+// icon
+.icon-bg-circle{
+  color: $white;
+  padding: 0.5rem;
+  border-radius: 50%;
+}
+.icon-left{
+  margin-right:0.5rem;
+}
+.icon-right{
+  margin-right:0.5rem;
+}
+.icon-spin {
+  display: inline-block;
+  animation: spin 1s infinite linear;
+}
+
+// spin
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.round{@include border-radius(1.5rem);}
+.square{@include border-radius($btn-border-radius-square);}
+
+.icon-line-height{
+  line-height : 1.5rem !important;
+}
+
+// Spinner classes
+.spinner {
+  display: inline-block;
+  -webkit-animation: spin 1s linear infinite;
+  -o-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// Button focus outline
+button:focus{
+  outline: none;
+}

+ 3 - 116
resources/assets/dcat/sass/dcat-app.scss

@@ -31,121 +31,10 @@ body, .header-navbar, .navigation, .breadcrumb, h1, h2, h3, h4, h5, h6, .h1, .h2
   font-family: $font-family-sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-  line-height: 1.3
-}
-
-.content .content-wrapper {
-  padding: 7rem 2rem 0;
-}
-
-.navbar-fixed-top {
-  .content-wrapper {
-    padding-top: 6rem;
-  }
-}
-
-.content-header {
-  padding: 0 0 2px;
-}
-
-.full-page {
-  .content .content-wrapper {
-    padding: 0;
-    margin-left: 0!important;
-  }
-}
-
-ol, ul, dl {
-  margin-bottom: 0;
-}
-
-// 阴影
-.shadow-0 {
-  box-shadow: none!important;
-}
-.shadow {
-  box-shadow: $shadow!important;
-}
-.shadow-100 {
-  box-shadow: $shadow-100!important;
-}
-.shadow-200 {
-  box-shadow: $shadow-200!important;
-}
-
-//small
-.font-sm-1{
-  font-size: 0.7rem !important;
-}
-.font-sm-2{
-  font-size: 0.8rem !important;
-}
-.font-sm-3{
-  font-size: 0.9rem !important;
-}
-//medium
-.font-md-1{
-  font-size: 1.1rem !important;
-}
-.font-md-2{
-  font-size: 1.2rem !important;
-}
-.font-md-3{
-  font-size: 1.3rem !important;
-}
-.font-md-4{
-  font-size: 1.4rem !important;
-}
-.font-md-5{
-  font-size: 1.5rem !important;
-}
-//large
-.font-lg-1{
-  font-size: 2rem !important;
-}
-.font-lg-2{
-  font-size: 3rem !important;
-}
-.font-lg-3{
-  font-size: 4rem !important;
-}
-.font-lg-4{
-  font-size: 5rem !important;
-}
-.font-lg-5{
-  font-size: 6rem !important;
-}
-
-// Font weights
-
-.font-w-300 {
-  font-weight: 300;
-}
-.font-w-400 {
-  font-weight: 400;
-}
-.font-w-500 {
-  font-weight: 500;
-}
-.font-w-600 {
-  font-weight: 600;
-}
-.font-w-700 {
-  font-weight: 700;
-}
-
-// Font style
-.text-italic {
-  font-style: italic;
-}
-.text-highlight {
-  padding: 4px 6px;
-}
-
 // 颜色class定义
 @import "./colors";
-
+// 常用class定义
+@import "./components/utilities";
 // 布局
 @import "./components/layout";
 // 按钮
@@ -203,6 +92,4 @@ ol, ul, dl {
 // 菜单
 @import "./components/sidebar";
 // 模态窗
-@import "./components/modal";
-// 滚动条
-@import "./components/scroll-bar";
+@import "./components/modal";

+ 0 - 3
resources/assets/sass/bootstrap-extended.scss

@@ -23,6 +23,3 @@
 @import "bootstrap-extended/alert";
 @import "bootstrap-extended/toast";
 @import 'bootstrap-extended/pagination';
-
-// // Utility classes
-@import "bootstrap-extended/utilities";

+ 0 - 96
resources/assets/sass/bootstrap-extended/_utilities.scss

@@ -1,96 +0,0 @@
-.icon-bg-circle{
-    color: $white;
-    padding: 0.5rem;
-    border-radius: 50%;
-}
-.icon-left{
-    margin-right:0.5rem;
-}
-.icon-right{
-    margin-right:0.5rem;
-}
-.icon-spin {
-	display: inline-block;
-  	animation: spin 1s infinite linear;
-}
-
-.blockOverlay{
-  z-index: 1050 !important;
-}
-.blockElement, .blockPage{
-  z-index: 1051 !important;
-}
-
-@-moz-keyframes spin {
-  	from {
-    	-moz-transform: rotate(0deg);
-  	}
-  	to {
-    	-moz-transform: rotate(360deg);
-  	}
-}
-
-@-webkit-keyframes spin {
-  	from {
-    	-webkit-transform: rotate(0deg);
-  	}
-  	to {
-    	-webkit-transform: rotate(360deg);
-  	}
-}
-
-@keyframes spin {
-  	from {
-    	transform: rotate(0deg);
-  	}
-  	to {
-    	transform: rotate(360deg);
-  	}
-}
-
-.hidden{
-	display: none;
-	visibility: hidden;
-}
-
-//Disabled
-a{
-	&.disabled{
-		// color: $dropdown-link-disabled-color !important;
-	}
-	&:hover {
-		cursor: pointer;
-	}
-}
-
-.round{@include border-radius(1.5rem);}
-.square{@include border-radius($btn-border-radius-square);}
-
-.icon-line-height{
-    line-height : 1.5rem !important; 
-}
-
-//Tables
-//--------------------------
-.table-middle{
-    td{
-        vertical-align: middle;
-    }
-}
-
-// Spinner classes
-.spinner {
-    display: inline-block;
-    -webkit-animation: spin 1s linear infinite;
-    -o-animation: spin 1s linear infinite;
-    animation: spin 1s linear infinite;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-// Button focus outline
-button:focus{
-	outline: none;
-}