[K7]: KUI variable naming, sizing and responsive breakpoints (elastic…

…#12846)

variable naming, sizing and responsive breakpoints

ui_framework/components/global_styles/mixins/_index.scss

@@ -0,0 +1,2 @@
+@import 'naming';
+@import 'responsive';

ui_framework/components/global_styles/mixins/_responsive.scss

@@ -0,0 +1,29 @@
+// Responsiveness
+
+$breakpoints: ("xSmall": 575px, "small": 768px, "medium": 992px, "large": 1200px) !default;
+
+
+@mixin screenXSmall {
+  @media only screen and (max-width: map-get($breakpoints, "small")) {
+     @content;
+  }
+}
+
+
+@mixin screenSmall {
+  @media only screen and (min-width: map-get($breakpoints, "small") + 1) and (max-width: map-get($breakpoints, "medium") - 1) {
+     @content;
+  }
+}
+
+@mixin screenMedium {
+  @media only screen and (min-width: map-get($breakpoints, "medium")) and (max-width: map-get($breakpoints, "large") - 1) {
+    @content;
+  }
+}
+
+@mixin screenLarge {
+  @media only screen and (min-width: map-get($breakpoints, "large")) {
+    @content;
+  }
+}

ui_framework/components/global_styles/variables/_size.scss

@@ -0,0 +1,9 @@
+$kuiSize:     16px;
+
+$kuiSizeS:    $kuiSize / 2;
+$kuiSizeXS:   $kuiSize / 4;
+$kuiSizeM:    $kuiSize;
+$kuiSizeL:    $kuiSize * 1.5;
+$kuiSizeXL:   $kuiSize * 2;
+$kuiSizeXXL:  $kuiSize * 2.5;
+

ui_framework/components/global_styles/variables/_z_index.scss

@@ -0,0 +1,21 @@
+// Z-Index
+
+
+$kuiZLevel0:          0;
+$kuiZLevel1:          1000;
+$kuiZLevel2:          2000;
+$kuiZLevel3:          3000;
+$kuiZLevel4:          4000;
+$kuiZLevel5:          5000;
+$kuiZLevel6:          6000;
+$kuiZLevel7:          7000;
+$kuiZLevel8:          8000;
+$kuiZLevel9:          9000;
+
+
+
+$kuiZContent:         0;
+$kuiZContentMenu:     2000;
+$kuiZNavigation:      4000;
+$kuiZMask:            6000;
+$kuiZModal:           8000;

ui_framework/dist/ui_framework.css

@@ -47,74 +47,3 @@ q:before, q:after {
 table {
   border-collapse: collapse;
   border-spacing: 0; }
-
-.kuiPopover {
-  display: inline-block;
-  position: relative; }
-  .kuiPopover.kuiPopover-isOpen .kuiPopover__body {
-    opacity: 1;
-    visibility: visible;
-    z-index: 1;
-    margin-top: 10px;
-    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
-
-.kuiPopover__body {
-  line-height: 1.5;
-  font-size: 14px;
-  position: absolute;
-  min-width: 256px;
-  top: 100%;
-  left: 50%;
-  background: #FFF;
-  border: 1px solid #D9D9D9;
-  border-radius: 4px 0 4px 4px;
-  padding: 16px;
-  -webkit-transform: translateX(-50%) translateY(8px) translateZ(0);
-          transform: translateX(-50%) translateY(8px) translateZ(0);
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-  -webkit-transform-origin: center top;
-          transform-origin: center top;
-  opacity: 0;
-  visibility: hidden;
-  margin-top: 32px; }
-  .kuiPopover__body:before {
-    position: absolute;
-    content: "";
-    top: -16px;
-    height: 0;
-    width: 0;
-    left: 50%;
-    margin-left: -16px;
-    border-left: 16px solid transparent;
-    border-right: 16px solid transparent;
-    border-bottom: 16px solid #D9D9D9; }
-  .kuiPopover__body:after {
-    position: absolute;
-    content: "";
-    top: -15px;
-    right: 0;
-    height: 0;
-    left: 50%;
-    margin-left: -16px;
-    width: 0;
-    border-left: 16px solid transparent;
-    border-right: 16px solid transparent;
-    border-bottom: 16px solid #FFF; }
-
-.kuiPopover--anchorLeft .kuiPopover__body {
-  left: 0;
-  -webkit-transform: translateX(0%) translateY(8px) translateZ(0);
-          transform: translateX(0%) translateY(8px) translateZ(0); }
-  .kuiPopover--anchorLeft .kuiPopover__body:before, .kuiPopover--anchorLeft .kuiPopover__body:after {
-    right: auto;
-    left: 8px;
-    margin: 0; }
-
-.kuiPopover--anchorRight .kuiPopover__body {
-  left: 100%;
-  -webkit-transform: translateX(-100%) translateY(8px) translateZ(0);
-          transform: translateX(-100%) translateY(8px) translateZ(0); }
-  .kuiPopover--anchorRight .kuiPopover__body:before, .kuiPopover--anchorRight .kuiPopover__body:after {
-    right: 8px;
-    left: auto; }

ui_framework/src/components/index.scss

@@ -13,4 +13,3 @@
 // instead adding them to this library and deprecating that dependency.
 
 // Components
-@import "popover/index";

ui_framework/src/global_styling/mixins/_index.scss

@@ -1 +1 @@
-@import 'global_mixins';
+ @import 'responsive';

ui_framework/src/global_styling/mixins/_responsive.scss

@@ -0,0 +1,29 @@
+// Responsiveness
+
+$breakpoints: ("xSmall": 575px, "small": 768px, "medium": 992px, "large": 1200px) !default;
+
+
+@mixin screenXSmall {
+  @media only screen and (max-width: map-get($breakpoints, "small")) {
+     @content;
+  }
+}
+
+
+@mixin screenSmall {
+  @media only screen and (min-width: map-get($breakpoints, "small") + 1) and (max-width: map-get($breakpoints, "medium") - 1) {
+     @content;
+  }
+}
+
+@mixin screenMedium {
+  @media only screen and (min-width: map-get($breakpoints, "medium")) and (max-width: map-get($breakpoints, "large") - 1) {
+    @content;
+  }
+}
+
+@mixin screenLarge {
+  @media only screen and (min-width: map-get($breakpoints, "large")) {
+    @content;
+  }
+}

ui_framework/src/global_styling/variables/_animations.scss

@@ -1,9 +1,10 @@
 // Animations
 
-$globalAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1);
-$globalAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1);
-$globalAnimSpeedVeryFast: 90ms;
-$globalAnimSpeedFast: 150ms;
-$globalAnimSpeedNormal: 250ms;
-$globalAnimSpeedSlow: 350ms;
-$globalAnimSpeedVerySlow: 500ms;
+$kuiAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1);
+$kuiAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1);
+
+$kuiAnimSpeedExtraFast: 90ms;
+$kuiAnimSpeedFast: 150ms;
+$kuiAnimSpeedNormal: 250ms;
+$kuiAnimSpeedSlow: 350ms;
+$kuiAnimSpeedExtra: 500ms;

ui_framework/src/global_styling/variables/_borders.scss

@@ -1,6 +1,6 @@
 // Borders
 
-$globalBorderColor: $globalColorLightGray;
-$globalBorderRadius: 4px;
-$globalBorderThick: 2px solid $globalBorderColor;
-$globalBorderThin: 1px solid $globalBorderColor;
+$kuiBorderColor: $kuiColorLightGray;
+$kuiBorderRadius: 4px;
+$kuiBorderThick: 2px solid $kuiBorderColor;
+$kuiBorderThin: 1px solid $kuiBorderColor;

ui_framework/src/global_styling/variables/_colors.scss

@@ -1,49 +1,13 @@
 // True colors
 
-$globalColorBlue: #0079a5;
-$globalColorTeal: #00A69B;
-$globalColorRed: #A30000;
-$globalColorLightestGray: #F5F5F5;
-$globalColorLightGray: #D9D9D9;
-$globalColorMediumGray: #999;
-$globalColorDarkGray: #666;
-$globalColorDarkestGray: #3F3F3F;
-$globalColorBlack: #000;
-$globalColorWhite: #FFF;
-
-// Normal colors
-
-$globalTextColor: #2d2d2d;
-$globalLinkColor: $globalColorBlue;
-$globalLinkColor-isHover: darken($globalLinkColor, 10%);
-$globalInputTextColor: $globalTextColor;
-$globalInputBackgroundColor: $globalColorWhite;
-$globalInputBorderColor: $globalColorLightGray;
-
-// Dark theme colors
-
-$globalTextColor--darkTheme: #cecece;
-$globalBackgroundColor--darkTheme: #777777;
-$globalLinkColor--darkTheme: #b7e2ea;
-$globalLinkColor-isHover--darkTheme: #def2f6;
-$globalInputTextColor--darkTheme: $globalTextColor--darkTheme;
-$globalInputBackgroundColor--darkTheme: #444444;
-$globalInputBorderColor--darkTheme: $globalInputBackgroundColor--darkTheme;
-
-// Colors
-
-$globalInfoColor: #3fa8c7;
-$globalInactiveColor: #c3c3c3;
-$globalSuccessColor: #417505;
-$globalWarningColor: #ec9800;
-$globalDangerColor: $globalColorRed;
-$globalFocusColor: $globalColorBlue;
-$globalFocusDangerColor: #ff523c;
-$globalFocusWarningColor: #ffa500;
-$globalFocusBackgroundColor: #ffffff;
-$globalFontColor: #191E23;
-$globalSubduedTextColor: $globalColorDarkGray;
-$globalLinkHoverColor: #006E8A;
-$globalSelectedBorderColor: $globalColorBlue;
-$globalDangerBorderColor: $globalDangerColor;
-$globalFormControlBorderColor: #DEDEDE;
+$kuiColorBlue: #0079a5;
+$kuiColorTeal: #00A69B;
+$kuiColorRed: #A30000;
+$kuiColorOrange: #E5830E;
+$kuiColorLightestGray: #F5F5F5;
+$kuiColorLightGray: #D9D9D9;
+$kuiColorMediumGray: #999;
+$kuiColorDarkGray: #666;
+$kuiColorDarkestGray: #3F3F3F;
+$kuiColorBlack: #000;
+$kuiColorWhite: #FFF;

ui_framework/src/global_styling/variables/_font.scss

@@ -1,9 +1,16 @@
 // Font
 
-$globalFontFamily: "Open Sans", Helvetica, Arial, sans-serif;
-$globalFontSize: 14px;
-$globalLineHeight: 1.5;
-$globalSubTextFontSize: 12px;
-$globalTitleFontSize: 18px;
-$globalFontWeightRegular: 400;
-$globalFontWeightBold: 700;
+$kuiFontFamily: Roboto, Helvetica, Arial, sans-serif;
+$kuiCodeFontFamily: "Roboto Mono", monospace;
+
+$kuiLineHeight: 1.5;
+
+$kuiFontSize:       $kuiSize;
+$kuiFontSizeXS:     $kuiSize;
+$kuiFontSizeS:      $kuiSize;
+$kuiFontSizeM:      $kuiSize;
+$kuiFontSizeL:      $kuiSize;
+$kuiFontSizeXL:     $kuiSize;
+$kuiFontSizeXXL:    $kuiSize;
+
+

ui_framework/src/global_styling/variables/_index.scss

@@ -2,16 +2,15 @@
 // KUI global variables
 // --------------------------------------------------------------------------------------
 // This module contains all global variables available within kui. Every variable in this
-// document should be prefixed with $global. This lets us know where the variable is
+// document should be prefixed with $kui. This lets us know where the variable is
 // coming from when looking inside the individual component files. Any component local
 // variables should be declared at the top of those documents prefixed with $componentName.
 
+// Import load is important. Size and color..etc are used in other variables.
+@import 'size';
 @import 'colors';
+@import 'animations';
 @import 'font';
-@import 'timing';
 @import 'borders';
 @import 'shadows';
 @import 'z_index';
-@import 'animations';
-@import 'form';
-@import 'tool_bar';

ui_framework/src/global_styling/variables/_shadows.scss

@@ -1,3 +1 @@
 // Shadows
-
-$globalBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);

ui_framework/src/global_styling/variables/_size.scss

@@ -0,0 +1,8 @@
+$kuiSize:     16px;
+
+$kuiSizeS:    $kuiSize / 2;
+$kuiSizeXS:   $kuiSize / 4;
+$kuiSizeM:    $kuiSize;
+$kuiSizeL:    $kuiSize * 1.5;
+$kuiSizeXL:   $kuiSize * 2;
+$kuiSizeXXL:  $kuiSize * 2.5;

ui_framework/src/global_styling/variables/_z_index.scss

@@ -0,0 +1,21 @@
+// Z-Index
+
+
+$kuiZLevel0:          0;
+$kuiZLevel1:          1000;
+$kuiZLevel2:          2000;
+$kuiZLevel3:          3000;
+$kuiZLevel4:          4000;
+$kuiZLevel5:          5000;
+$kuiZLevel6:          6000;
+$kuiZLevel7:          7000;
+$kuiZLevel8:          8000;
+$kuiZLevel9:          9000;
+
+
+
+$kuiZContent:         0;
+$kuiZContentMenu:     2000;
+$kuiZNavigation:      4000;
+$kuiZMask:            6000;
+$kuiZModal:           8000;