Refactor font size styles

ryandeba · Feb 8, 2018 · 8ff14fa · 8ff14fa
1 parent 8d26f90
commit 8ff14fa
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 50 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/styles/scss/_gjs_layers.scss b/src/styles/scss/_gjs_layers.scss
@@ -12,22 +12,21 @@
     text-align: left;
     position: relative;
     background-color: rgba(0, 0, 0, 0.1);
+    font-size: $fontSizeS;
 
     &-hidden {
       @include opacity(0.55);
     }
 
     &-count {
       position: absolute;
-      font-size: 10px;
       right: 27px;
       top: 9px;
     }
 
     &-vis {
       height: auto !important;
       width: auto !important;
-      font-size: 13px;
       left: 0;
       top: 0;
       padding: 7px 5px 7px 10px;
@@ -37,7 +36,7 @@
     }
 
     &-caret {
-      font-size: 7px;
+      font-size: 0.5rem;
       width: 8px;
       padding: 2px;
       cursor: pointer;
@@ -65,7 +64,6 @@
 
     &-name {
       padding: 5px;
-      font-size: 11px;
       display: inline-block;
       box-sizing: content-box;
       @extend .#{$app-prefix}no-user-select;

diff --git a/src/styles/scss/_gjs_style_manager.scss b/src/styles/scss/_gjs_style_manager.scss
@@ -1,19 +1,17 @@
 
 .#{$sm-prefix} {
   &clear {
-    font-size: 1rem;
     line-height: 0;
     cursor: pointer;
   }
 
   &header {
-    font-size: 11px;
     font-weight: lighter;
     padding: 10px;
   }
 
   &properties {
-    font-size: 11px;
+    font-size: $fontSizeS;
     padding: 10px 5px;
     display: flex;
     flex-wrap: wrap;

diff --git a/src/styles/scss/_gjs_traits.scss b/src/styles/scss/_gjs_traits.scss
@@ -0,0 +1,29 @@
+.#{$app-prefix} {
+  &traits-label {
+    border-bottom: 1px solid $mainDkColor;
+    font-weight: lighter;
+    margin-bottom: 5px;
+    padding: 10px;
+    text-align: left;
+  }
+}
+
+.#{$trt-prefix}trait {
+  display: flex;
+  justify-content: start;
+  padding: 5px 10px;
+  font-weight: lighter;
+
+  &s {
+    font-size: $fontSizeS;
+  }
+
+  .#{$app-prefix}label {
+    width: 30%;
+    text-align: left;
+  }
+
+  .#{$app-prefix}field {
+    width: 70%;
+  }
+}
diff --git a/src/styles/scss/_gjs_variables.scss b/src/styles/scss/_gjs_variables.scss
@@ -29,12 +29,6 @@ $mainColor:         #444 !default; /* Light: #573454 Dark: #3b2639 -moz-linear-g
 $fontColor:         #ddd !default; /* l: #d8d7db */
 $fontColorActive:   #f8f8f8 !default;
 
-/* Light theme
-$mainColor:         #fff;
-$fontColor:         #9299a3;
-$fontColorActive:   #4f8ef7;
-*/
-
 $mainDkColor:       rgba(0, 0, 0, 0.2) !default;/* darken($mainColor, 4%) - #383838 */
 $mainDklColor:      rgba(0, 0, 0, 0.1) !default;
 $mainLhColor:       rgba(255, 255, 255, 0.1) !default; /* #515151 */
@@ -80,4 +74,5 @@ $mainFont:          Helvetica, sans-serif !default;
 $fontPath:          '../fonts' !default;
 $fontName:          'main-fonts' !default;
 $fontSize:           0.7rem;
-$fontV:             20 !default;//random(1000)
+$fontSizeS:          0.75rem;
+$fontV:              20 !default;//random(1000)
diff --git a/src/styles/scss/main.scss b/src/styles/scss/main.scss
@@ -227,33 +227,7 @@ $prefix: $app-prefix;
   pointer-events: none;
 }
 
-/*************  TRAITS  ****************/
-.#{$app-prefix}traits-label {
-  border-bottom: 1px solid $mainDkColor;
-  font-size: 13px;
-  font-weight: lighter;
-  margin-bottom: 5px;
-  padding: 10px;
-  text-align: left;
-}
-.#{$trt-prefix}trait {
-  display: flex;
-  justify-content: start;
-  padding: 5px 10px;
-  font-weight: lighter;
-
-  .#{$app-prefix}label {
-    width: 30%;
-    text-align: left;
-  }
-
-  .#{$app-prefix}field {
-    width: 70%;
-  }
-}
-
-/*************  CANVAS  ****************/
-
+@import "gjs_traits";
 @import "gjs_canvas";
 
 /********* COMMANDS **********/
@@ -369,7 +343,6 @@ $prefix: $app-prefix;
 
   font-weight: lighter;
   background-color: $mainDklColor;
-  font-size: 13px;
   letter-spacing: 1px;
   padding: 9px 10px 9px 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
@@ -399,9 +372,8 @@ $prefix: $app-prefix;
 		@extend .#{$sm-prefix}field.#{$sm-prefix}select;
 }
 
-.#{$clm-prefix}tags{
+.#{$clm-prefix}tags {
 	@extend .#{$sm-prefix}sector;
-	font-size: 11px;
 	padding: 10px 5px;
 
 	##{$clm-prefix}label, ##{$clm-prefix}sel{
@@ -474,12 +446,7 @@ $prefix: $app-prefix;
 }
 /********* END Class manager **********/
 
-/********* Modal dialog **********/
-
 @import "gjs_modal";
-
-/********* Assets Manager **********/
-
 @import "gjs_assets";
 
 /********* File uploader **********/