[SCSS] Implement new function

xinix-technology · Mar 16, 2017 · 43a18d8 · 43a18d8
1 parent ea83be4
commit 43a18d8
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 92 deletions.
diff --git a/css/naked.css b/css/naked.css
@@ -1358,7 +1358,7 @@ select option,
   height: auto;
   width: 100%;
   border: 1px solid #e6e6e6;
-  border-bottom: 1px solid #d1d1d1;
+  border-bottom: 1px solid #fafafa;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
@@ -1622,7 +1622,7 @@ button,
   background: transparent;
   border: 1px solid #416B9B;
   border-top-color: #6c94c1;
-  border-bottom-color: #35577e;
+  border-bottom-color: #4f7fb5;
   background-color: white;
   color: #416B9B;
   display: inline-block;
@@ -1650,7 +1650,7 @@ button.error,
   background: transparent;
   border: 1px solid #CF4741;
   border-top-color: #df8682;
-  border-bottom-color: #b9342f;
+  border-bottom-color: #d76762;
   background-color: white;
   color: #CF4741;
 }
@@ -1668,7 +1668,7 @@ button.success,
   background: transparent;
   border: 1px solid #718F47;
   border-top-color: #9ab870;
-  border-bottom-color: #5b7439;
+  border-bottom-color: #87aa55;
   background-color: white;
   color: #718F47;
 }
@@ -1686,7 +1686,7 @@ button.warning,
   background: transparent;
   border: 1px solid #E1BF32;
   border-top-color: #ebd579;
-  border-bottom-color: #ccaa1e;
+  border-bottom-color: #e6ca56;
   background-color: white;
   color: #E1BF32;
 }
@@ -2206,7 +2206,7 @@ ul.pagination.centered {
   left: 0;
   right: 0;
   height: 48px;
-  border-bottom: 1px solid #c6d5e7;
+  border-bottom: 1px solid white;
 }
 .nav-menu .xn {
   font-size: 24px;

diff --git a/css/naked.css.map b/css/naked.css.map
diff --git a/css/naked.min.css b/css/naked.min.css
diff --git a/scss/include/_badge.scss b/scss/include/_badge.scss
@@ -61,7 +61,7 @@
     &.disable {
     	color: #{$disable-color}!important;
     	border-color: #{$disable-color}!important;
-    	background: #{adjust-lightness($disable-color, 18%)}!important;
+    	background: #{lighten($disable-color, 18%)}!important;
     	cursor: default;
     }
 }
diff --git a/scss/include/_button.scss b/scss/include/_button.scss
@@ -13,9 +13,9 @@ button,
     text-align: center;
     background: transparent;
     border: 1px solid #{$button-info};
-    border-top-color: #{adjust-lightness($button-info, $button-lighter-value)};
-    border-bottom-color: #{adjust-lightness($button-info, $button-darker-value)};
-    background-color: #{adjust-lightness($button-info, $button-background-value)};
+    border-top-color: #{lighten($button-info, $button-lighter-value)};
+    border-bottom-color: #{lighten($button-info, $button-darker-value)};
+    background-color: #{lighten($button-info, $button-background-value)};
     color: #{$button-info};
     display: inline-block;
     @include appearance(none);
@@ -29,9 +29,9 @@ button,
     &.error {
     	background: transparent;
 	    border: 1px solid #{$button-error};
-	    border-top-color: #{adjust-lightness($button-error, $button-lighter-value)};
-	    border-bottom-color: #{adjust-lightness($button-error, $button-darker-value)};
-	    background-color: #{adjust-lightness($button-error, $button-background-value)};
+	    border-top-color: #{lighten($button-error, $button-lighter-value)};
+	    border-bottom-color: #{lighten($button-error, $button-darker-value)};
+	    background-color: #{lighten($button-error, $button-background-value)};
 	    color: #{$button-error};
 
 	    &:hover {
@@ -43,9 +43,9 @@ button,
     &.success {
     	background: transparent;
 	    border: 1px solid #{$button-success};
-	    border-top-color: #{adjust-lightness($button-success, $button-lighter-value)};
-	    border-bottom-color: #{adjust-lightness($button-success, $button-darker-value)};
-	    background-color: #{adjust-lightness($button-success, $button-background-value)};
+	    border-top-color: #{lighten($button-success, $button-lighter-value)};
+	    border-bottom-color: #{lighten($button-success, $button-darker-value)};
+	    background-color: #{lighten($button-success, $button-background-value)};
 	    color: #{$button-success};
 
 	    &:hover {
@@ -57,9 +57,9 @@ button,
     &.warning {
     	background: transparent;
 	    border: 1px solid #{$button-warning};
-	    border-top-color: #{adjust-lightness($button-warning, $button-lighter-value)};
-	    border-bottom-color: #{adjust-lightness($button-warning, $button-darker-value)};
-	    background-color: #{adjust-lightness($button-warning, $button-background-value)};
+	    border-top-color: #{lighten($button-warning, $button-lighter-value)};
+	    border-bottom-color: #{lighten($button-warning, $button-darker-value)};
+	    background-color: #{lighten($button-warning, $button-background-value)};
 	    color: #{$button-warning};
 
 	    &:hover {
@@ -96,7 +96,7 @@ button,
     &.disable {
     	color: #{$disable-color}!important;
     	border-color: #{$disable-color}!important;
-    	background: #{adjust-lightness($disable-color, 18%)}!important;
+    	background: #{lighten($disable-color, 18%)}!important;
     	cursor: default;
     }
 }

diff --git a/scss/include/_form.scss b/scss/include/_form.scss
@@ -74,15 +74,15 @@ select option,
     height: auto;
     width: 100%;
     border: 1px solid #{$border-input-color};
-    border-bottom: 1px solid #{adjust-lightness($border-input-color, -8%)};
+    border-bottom: 1px solid #{lighten($border-input-color, 8%)};
     @include box-sizing(border-box);
     @include appearance(none);
     @include border-radius(#{$border-radius-pixels});
     @include transition(border 0.32s);
 
     &:focus,
     &.focus {
-        @include box-shadow(0 0 0 2px #{adjust-lightness($blue, 32%)});
+        @include box-shadow(0 0 0 2px #{lighten($blue, 32%)});
     }
 
     &[disabled] {

diff --git a/scss/include/_globals.scss b/scss/include/_globals.scss
@@ -6,7 +6,7 @@
     @include box-sizing(border-box);
 }
 
-@include placeholder-color(#{adjust-lightness($black, 48%)});
+@include placeholder-color(#{lighten($black, 48%)});
 
 html,
 body {
@@ -165,7 +165,7 @@ h5 {
 }
 h6 {
     font-size: 1.2em;
-    color: adjust-lightness($black, 32%);
+    color: lighten($black, 32%);
 
     &.subheader {
         font-size: 1em;

diff --git a/scss/include/_listview.scss b/scss/include/_listview.scss
@@ -134,7 +134,7 @@
 
 				&.side {
 					float: right;
-					color: adjust-lightness($color, 48%);
+					color: lighten($color, 48%);
 					max-width: 35%;
 				}
 			}

diff --git a/scss/include/_navbar-tabstrip.scss b/scss/include/_navbar-tabstrip.scss
@@ -7,7 +7,7 @@
 	left: 0;
 	right: 0;
 	height: #{$top-bar-height};
-	border-bottom: 1px solid #{adjust-lightness($header-bg, -16%)};
+	border-bottom: 1px solid #{lighten($header-bg, 4%)};
 
 	.xn {
 		font-size: #{$top-bar-height - ($grid * 6)};
@@ -242,25 +242,25 @@ tabstrip,
 	right: 0;
 	display: block;
 	border-top: 1px solid #{$border-color};
-	background: #{adjust-lightness($white-gray, 2%)};
-	border: 0; 
-	z-index: 9999; 
-	height: 50px; 
+	background: #{lighten($white-gray, 2%)};
+	border: 0;
+	z-index: 9999;
+	height: 50px;
 
-	.tabspan-2 { 
-		width: 50%; 
+	.tabspan-2 {
+		width: 50%;
 	}
 
-	.tabspan-3 { 
-		width: 33.3%; 
+	.tabspan-3 {
+		width: 33.3%;
 	}
 
-	.tabspan-4 { 
-		width: 25%; 
+	.tabspan-4 {
+		width: 25%;
 	}
 
-	.tabspan-5 { 
-		width: 20%; 
+	.tabspan-5 {
+		width: 20%;
 	}
 
 	.top {
@@ -276,67 +276,67 @@ tabstrip,
 	.tabs {
 		text-align: center;
 		padding: #{$grid} 0;
-		color: adjust-lightness($color, 32%);
-		font-size: 1.5em; 
-		padding: 6px 0; 
-		position: relative; 
-		border-top: 1px solid #{$border-color}; 
-		float: left; 
-		display: block; 
+		color: lighten($color, 32%);
+		font-size: 1.5em;
+		padding: 6px 0;
+		position: relative;
+		border-top: 1px solid #{$border-color};
+		float: left;
+		display: block;
 
 		&.active {
 			color: #{$blue};
 		}
 
-		.xn { 
-			font-size: 1.1em; 
-			margin-top: 0; 
-			margin: 0; 
-			width: auto; 
-			height: auto; 
-			line-height: 100%; 
+		.xn {
+			font-size: 1.1em;
+			margin-top: 0;
+			margin: 0;
+			width: auto;
+			height: auto;
+			line-height: 100%;
 		}
 
 		span {
 			display: block;
 			font-weight: #{$font-regular};
 			font-size: 0.8em;
 			letter-spacing: #{$letter-spacing-wider};
-			color: #7c7b83; 
-			font-size: 0.5em; 
+			color: #7c7b83;
+			font-size: 0.5em;
 			margin-top: 3px;
 
-			&.badge { 
-				position: absolute; 
-				top: -10px; 
-				right: 5px; 
-				background: #F23030; 
-				border-radius: 100%; 
-				z-index: 9999; 
-				margin: 0; 
-				font-size: 0.7em; 
-				line-height: 90%; 
+			&.badge {
+				position: absolute;
+				top: -10px;
+				right: 5px;
+				background: #F23030;
+				border-radius: 100%;
+				z-index: 9999;
+				margin: 0;
+				font-size: 0.7em;
+				line-height: 90%;
 
 				&.empty {
-					top: 2px; 
-					right: 12px; 
-					min-width: 10px; 
+					top: 2px;
+					right: 12px;
+					min-width: 10px;
 					min-height: 10px;
 				}
 
 				i {
-					color: #fff; 
-					margin: 0; 
-					line-height: 25px; 
-					font-weight: 600; 
-					font-size: 1.2em; 
+					color: #fff;
+					margin: 0;
+					line-height: 25px;
+					font-weight: 600;
+					font-size: 1.2em;
 					font-style: normal;
 				}
 			}
 		}
 
 
-		&.active span { 
+		&.active span {
 			color: #{$blue};
 		}
 	}

diff --git a/scss/include/_variables.scss b/scss/include/_variables.scss
@@ -21,7 +21,6 @@ $min-large:   "only screen and (min-width:#{$extra-large-screen})";
 $grid-total-columns: 12 !default;
 $tabstrip-columns: 10 !default;
 
-
 // Measurement
 $grid: 4px;
 $border-radius-pixels: $grid;
@@ -60,8 +59,8 @@ $transparent: transparent;
 
 // Background color
 $body-bg: $white-blue;
-$header-bg: adjust-lightness($blue, 64%);
-$navbar-bg: adjust-lightness($blue, 56%);
+$header-bg: lighten($blue, 64%);
+$navbar-bg: lighten($blue, 56%);
 $content-bg: $white;
 $footer-bg: $body-bg;
 
@@ -78,7 +77,7 @@ $button-error: $red;
 $button-success: $green;
 $button-warning: $yellow;
 $button-lighter-value: 16%;
-$button-darker-value: -8%;
+$button-darker-value: 8%;
 $button-background-value: 100%;
 $button-text-hover: $white;
 
@@ -97,40 +96,40 @@ $color: $black;
 
 // h1-6 colors
 $h-color: $black;
-$h-small-color: adjust-lightness($black, 32%);
-$h-subheader-color: adjust-lightness($black, 24%);
+$h-small-color: lighten($black, 32%);
+$h-subheader-color: lighten($black, 24%);
 
 // Link colours
 $a-color: $blue;
 $a-color-amount: 16%;
 
 // Pagination color
-$pagination-color: adjust-lightness($black, 55%);;
+$pagination-color: lighten($black, 55%);;
 $pagination-active-color: $white;
 
 $table-color: $white;
 $table-head-color: $white;
-$table-stripe-color: adjust-lightness($blue, 52%);
-$table-hover-color: adjust-lightness($green, 42%);
-$table-border-color: adjust-lightness($blue, 36%);
+$table-stripe-color: lighten($blue, 52%);
+$table-hover-color: lighten($green, 42%);
+$table-border-color: lighten($blue, 36%);
 
 // List view color
-$grouptitle-color: adjust-lightness($black, 48%);
+$grouptitle-color: lighten($black, 48%);
 
 $checkbox-white: $white;
 $checkbox-green: $green;
-$checkbox-grey: adjust-lightness($black, 60%);
+$checkbox-grey: lighten($black, 60%);
 
 $alert-error-color: $red;
 $alert-success-color: $green;
 $alert-warning-color: $yellow;
 $alert-info-color: $blue;
 
-$disable-color: adjust-lightness($black, 78%);
+$disable-color: lighten($black, 78%);
 
 // Border color
-$border-color: 				    adjust-lightness($black, 90%);
-$border-input-color: 		  adjust-lightness($black, 90%);
+$border-color: 				    lighten($black, 90%);
+$border-input-color: 		  lighten($black, 90%);
 $border-postprefix-color: $border-input-color;
 
 // Line height