@appscode/design-system 1.1.0-beta.2 → 1.1.0-beta.4

package/base/_video-player.scss

@@ -0,0 +1,65 @@
+.lightbox {
+  background-color: rgba($color: #000000, $alpha: 0.8);
+  position: fixed;
+  display: none;
+  z-index: 99;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+
+  &-container {
+    position: relative;
+    max-width: 1080px;
+    margin: 7% auto;
+    display: block;
+    padding: 0 3%;
+    height: auto;
+    z-index: 10;
+
+    // Increasing top margin for mobile
+    @media screen and (max-width: 768px) {
+      margin-top: 10%;
+    }
+
+    @media screen and (max-width: 414px) {
+      margin-top: 13%;
+    }
+  }
+
+  &-content {
+    box-shadow: 0 1px 6px fade(black, 70%);
+  }
+
+  &-close {
+    text-transform: uppercase;
+    background: transparent;
+    position: absolute;
+    font-weight: 300;
+    font-size: 32px;
+    display: block;
+    border: none;
+    color: white;
+    top: -52px;
+    right: 3%;
+    cursor: pointer;
+  }
+}
+
+.video-container {
+  padding-bottom: 56.25%;
+  position: relative;
+  padding-top: 30px;
+  overflow: hidden;
+  height: 0;
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+}

package/base/utilities/_all.scss

@@ -1,8 +1,9 @@
-@import "initial-variables";
-@import "derived-variables";
+@import "colors";
+@import "typography";
 @import "mixin";
 @import "extended";
-@import "typography";
-@import "default";
+@import "global";
 @import "grid";
+@import "spacing";
+@import "layouts";
 @import "dark-theme";

package/base/utilities/_colors.scss

@@ -0,0 +1,446 @@
+// ===================================PREVIOUS STYLE========================================
+// Base Color
+// $ac-orange: #ff8000;
+// $warning: #f7ad2a;
+// $success: #158748;
+// $info: #0aafff;
+// $purple: #791e94;
+// $ac-red: #ff3729;
+
+// Products Color
+// $voyager-primary: #2d2a78;
+// $guard-primary: #d84e27;
+// $kubeci-primary: #2c3e50;
+// $kubed-primary: #1c7bd4;
+// $kubedb-primary: #4d4dcb;
+// $kubesheild-primary: #2516c7;
+// $kubevault-primary: #326ce5;
+// $pharmer-primary: #326de6;
+// $searchlight-primary: #111738;
+// $servicebroker-primary: #29b4a2;
+// $stash-primary: #5e2dea;
+// $swift-primary: #3f51b6;
+
+// Colors Primary
+// root colors
+:root {
+  --hsl-hue: 208;
+  --hsl-saturation: 77%;
+  --hsl-lightness: 40%;
+  // --contrast-threshold: 60%;
+  // --ac-bg: #ffffff;
+  // --ac-white: #ffffff;
+  // --ac-full-white: #ffffff;
+  // --ac-gray-dark: #5f5f5f;
+  // --ac-gray-light: #8d8d8d;
+  // --ac-gray-lightest: #d1d1d1;
+  // --ac-white-light: #e7e7e7;
+  // --ac-white-lighter: #f2f5f8;
+  // --ac-white-lightest: #f8f9fb;
+
+  // --ac-black: #000000;
+  // --ac-color-text-90: #323232;
+  // --ac-link-black: #32325d;
+  // --ac-gray-darker: #494949;
+  // --ac-gray: #767676;
+  // --ac-gray-lighter: #a4a4a4;
+  // --ac-white-text: #b4c0cc;
+
+  // theme color
+  // --dark-bg: #21272e;
+  // --dark-bg-light: #2e323c;
+
+  // --ac-blue-light: #eceff4;
+  // --ac-bg-light-gray: #f4f6f9;
+  // --table-header: #e4e8ef;
+  // --ac-label-text: #a6abbd;
+
+  --font-hsl-hue: 0;
+  --font-hsl-saturation: 0%;
+  --font-hsl-lightness: 11%;
+
+  --ac-primary: hsla(
+    var(--hsl-hue),
+    var(--hsl-saturation),
+    var(--hsl-lightness),
+    1
+  );
+
+  --ac-text: hsla(
+    var(--font-hsl-hue),
+    calc(var(--font-hsl-saturation) + 10%),
+    calc(var(--font-hsl-lightness) + 10%),
+    1
+  );
+  --ac-text-heading: hsla(
+    var(--font-hsl-hue),
+    var(--font-hsl-saturation),
+    var(--font-hsl-lightness),
+    1
+  );
+  --ac-color-value: hsl(
+    var(--font-hsl-hue),
+    var(--font-hsl-saturation),
+    calc(var(--font-hsl-lightness) + 25%)
+  );
+}
+
+$ac-bg: var(--ac-bg);
+// $primary: var(--ac-primary);
+// $primary-20: var(--ac-color-value);
+
+// Colors
+$ac-black: var(--ac-black);
+$primary-10-90: var(--ac-color-text-90);
+$ac-link-black: var(--ac-link-black);
+$black-40: var(--ac-gray-darker);
+$black-30: var(--ac-gray-dark);
+$ac-gray: var(--ac-gray);
+$ac-gray-light: var(--ac-gray-light);
+$ac-gray-lighter: var(--ac-gray-lighter);
+$ac-gray-lightest: var(--ac-gray-lightest);
+$white-100-light: var(--ac-white-light);
+$white-100-lighter: var(--ac-white-lighter);
+$white-100-lightest: var(--ac-white-lightest);
+$white-100: var(--ac-white);
+$ac-full-white: var(--ac-full-white);
+
+// $info-light: var(--ac-blue-light);
+$ac-bg-light-gray: var(--ac-bg-light-gray);
+$table-header: var(--table-header);
+$ac-label-text: var(--ac-label-text);
+
+// for dark theme CSS
+$dark-bg: var(--dark-bg);
+$dark-bg-light: var(--dark-bg-light);
+// ===================================PREVIOUS STYLE========================================
+
+// white and black
+$white-100: hsl(0, 0%, 100%);
+$black-100: hsl(0, 0%, 0%);
+
+// primary color guides
+$primary-hue: 208;
+$primary-saturation: 77%;
+$primary-5: hsl($primary-hue, $primary-saturation, 5%);
+$primary-10: hsl($primary-hue, $primary-saturation, 10%);
+$primary-20: hsl($primary-hue, $primary-saturation, 20%);
+$primary-30: hsl($primary-hue, $primary-saturation, 30%);
+$primary-40: hsl($primary-hue, $primary-saturation, 40%);
+$primary: hsl($primary-hue, $primary-saturation, 40%);
+$ac-primary: hsl(var(--hsl-hue), var(--hsl-saturation), 40%);
+
+$primary-50: hsl($primary-hue, $primary-saturation, 50%);
+$primary-60: hsl($primary-hue, $primary-saturation, 60%);
+$primary-70: hsl($primary-hue, $primary-saturation, 70%);
+$primary-80: hsl($primary-hue, $primary-saturation, 80%);
+$primary-90: hsl($primary-hue, $primary-saturation, 90%);
+$primary-95: hsl($primary-hue, $primary-saturation, 95%);
+$primary-97: hsl($primary-hue, $primary-saturation, 97%);
+
+// green color guides
+$green-hue: 141;
+$green-saturation: 53%;
+$green-5: hsl($green-hue, $green-saturation, 5%);
+$green-10: hsl($green-hue, $green-saturation, 10%);
+$green-20: hsl($green-hue, $green-saturation, 20%);
+$green-30: hsl($green-hue, $green-saturation, 30%);
+$green-40: hsl($green-hue, $green-saturation, 40%);
+$success: hsl($green-hue, $green-saturation, 40%);
+$green-50: hsl($green-hue, $green-saturation, 50%);
+$green-60: hsl($green-hue, $green-saturation, 60%);
+$green-70: hsl($green-hue, $green-saturation, 70%);
+$green-80: hsl($green-hue, $green-saturation, 80%);
+$green-90: hsl($green-hue, $green-saturation, 90%);
+$green-95: hsl($green-hue, $green-saturation, 95%);
+$green-97: hsl($green-hue, $green-saturation, 97%);
+
+// blue color guides
+$blue-hue: 217;
+$blue-saturation: 71%;
+$blue-5: hsl($blue-hue, $blue-saturation, 5%);
+$blue-10: hsl($blue-hue, $blue-saturation, 10%);
+$blue-20: hsl($blue-hue, $blue-saturation, 20%);
+$blue-30: hsl($blue-hue, $blue-saturation, 30%);
+$blue-40: hsl($blue-hue, $blue-saturation, 40%);
+$blue-50: hsl($blue-hue, $blue-saturation, 50%);
+$info: hsl($blue-hue, $blue-saturation, 50%);
+$blue-60: hsl($blue-hue, $blue-saturation, 60%);
+$blue-70: hsl($blue-hue, $blue-saturation, 70%);
+$blue-80: hsl($blue-hue, $blue-saturation, 80%);
+$blue-90: hsl($blue-hue, $blue-saturation, 90%);
+$blue-95: hsl($blue-hue, $blue-saturation, 95%);
+$blue-97: hsl($blue-hue, $blue-saturation, 97%);
+
+// purple color guides
+$purple-hue: 286;
+$purple-saturation: 66%;
+$purple-5: hsl($purple-hue, $purple-saturation, 5%);
+$purple-10: hsl($purple-hue, $purple-saturation, 10%);
+$purple-20: hsl($purple-hue, $purple-saturation, 20%);
+$purple-30: hsl($purple-hue, $purple-saturation, 30%);
+$purple-40: hsl($purple-hue, $purple-saturation, 40%);
+$purple: hsl($purple-hue, $purple-saturation, 40%);
+$purple-50: hsl($purple-hue, $purple-saturation, 50%);
+$purple-60: hsl($purple-hue, $purple-saturation, 60%);
+$purple-70: hsl($purple-hue, $purple-saturation, 70%);
+$purple-80: hsl($purple-hue, $purple-saturation, 80%);
+$purple-90: hsl($purple-hue, $purple-saturation, 90%);
+$purple-95: hsl($purple-hue, $purple-saturation, 95%);
+$purple-97: hsl($purple-hue, $purple-saturation, 97%);
+
+// yellow color guides
+$yellow-hue: 38;
+$yellow-saturation: 93%;
+$yellow-5: hsl($yellow-hue, $yellow-saturation, 5%);
+$yellow-10: hsl($yellow-hue, $yellow-saturation, 10%);
+$yellow-20: hsl($yellow-hue, $yellow-saturation, 20%);
+$yellow-30: hsl($yellow-hue, $yellow-saturation, 30%);
+$yellow-40: hsl($yellow-hue, $yellow-saturation, 40%);
+$yellow-50: hsl($yellow-hue, $yellow-saturation, 50%);
+$warning: hsl($yellow-hue, $yellow-saturation, 50%);
+$yellow-60: hsl($yellow-hue, $yellow-saturation, 60%);
+$yellow-70: hsl($yellow-hue, $yellow-saturation, 70%);
+$yellow-80: hsl($yellow-hue, $yellow-saturation, 80%);
+$yellow-90: hsl($yellow-hue, $yellow-saturation, 90%);
+$yellow-95: hsl($yellow-hue, $yellow-saturation, 95%);
+$yellow-97: hsl($yellow-hue, $yellow-saturation, 97%);
+
+// red color guides
+$red-hue: 348;
+$red-saturation: 100%;
+$red-5: hsl($red-hue, $red-saturation, 5%);
+$red-10: hsl($red-hue, $red-saturation, 10%);
+$red-20: hsl($red-hue, $red-saturation, 20%);
+$red-30: hsl($red-hue, $red-saturation, 30%);
+$red-40: hsl($red-hue, $red-saturation, 40%);
+$red-50: hsl($red-hue, $red-saturation, 50%);
+$danger: hsl($red-hue, $red-saturation, 50%);
+$red-60: hsl($red-hue, $red-saturation, 60%);
+$red-70: hsl($red-hue, $red-saturation, 70%);
+$red-80: hsl($red-hue, $red-saturation, 80%);
+$red-90: hsl($red-hue, $red-saturation, 90%);
+$red-95: hsl($red-hue, $red-saturation, 95%);
+$red-97: hsl($red-hue, $red-saturation, 97%);
+
+// black color guides
+$black-hue: 0;
+$black-saturation: 0%;
+$black-5: hsl($black-hue, $black-saturation, 5%);
+$black-10: hsl($black-hue, $black-saturation, 10%);
+$black-20: hsl($black-hue, $black-saturation, 20%);
+$black-30: hsl($black-hue, $black-saturation, 30%);
+$black-40: hsl($black-hue, $black-saturation, 40%);
+$black-50: hsl($black-hue, $black-saturation, 50%);
+$gray: hsl($black-hue, $black-saturation, 50%);
+$black-60: hsl($black-hue, $black-saturation, 60%);
+$black-70: hsl($black-hue, $black-saturation, 70%);
+$black-80: hsl($black-hue, $black-saturation, 80%);
+$black-90: hsl($black-hue, $black-saturation, 90%);
+$black-95: hsl($black-hue, $black-saturation, 95%);
+$black-97: hsl($black-hue, $black-saturation, 97%);
+
+// classes
+@mixin generate-color-classes($type, $color, $h, $s, $from, $to, $step) {
+  $i: $from;
+
+  @while $i <=$to {
+    .#{$type}-#{$color}-#{$i} {
+      #{if($type == "text", "color", "background-color")}: hsl($h, $s, $i * 1%);
+    }
+
+    $i: $i + $step;
+  }
+}
+
+// for primary classes
+@include generate-color-classes(
+  "text",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "bg",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "text",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "bg",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "text",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  95,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  95,
+  97,
+  2
+);
+
+// for green classes
+@include generate-color-classes(
+  "text",
+  "green",
+  $green-hue,
+  $green-saturation,
+  10,
+  90,
+  10
+);
+@include generate-color-classes(
+  "bg",
+  "green",
+  $green-hue,
+  $green-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "text",
+  "green",
+  $green-hue,
+  $green-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "bg",
+  "green",
+  $green-hue,
+  $green-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "text",
+  "green",
+  $green-hue,
+  $green-saturation,
+  95,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "green",
+  $green-hue,
+  $green-saturation,
+  95,
+  97,
+  2
+);
+
+// for purple classes
+@include generate-color-classes(
+  "text",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  10,
+  90,
+  10
+);
+@include generate-color-classes(
+  "bg",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  10,
+  90,
+  10
+);
+
+@include generate-color-classes(
+  "text",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "bg",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  5,
+  5,
+  1
+);
+
+@include generate-color-classes(
+  "text",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  95,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  95,
+  97,
+  2
+);
+
+// Box Shadow
+$ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
+$ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
+$ac-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
+  0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+
+$shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
+$shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
+$shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18), 0 3px 3px -2px rgba(0, 0, 0, 0.16),
+  0 1px 6px 0 rgba(0, 0, 0, 0.12);

package/base/utilities/_customize-bulma.scss

@@ -1,5 +1,3 @@
-$primary : hsl(208, 77%, 42%);
-
 // Colors
 // $black:        hsl(0, 0%, 4%) !default;
 // $black-bis:    hsl(0, 0%, 7%) !default;
@@ -16,33 +14,33 @@ $primary : hsl(208, 77%, 42%);
 // $white-bis:    hsl(0, 0%, 98%) !default;
 // $white:        hsl(0, 0%, 100%) !default;
 
-$orange:        hsl(30, 100%, 50%) !default;
-$yellow:      	hsl(38, 93%, 57%) !default;
-$green:        hsl(147, 73%, 31%) !default;
+// $orange:        hsl(30, 100%, 50%) !default;
+// $yellow:      	hsl(38, 93%, 57%) !default;
+// $green:        hsl(147, 73%, 31%) !default;
 // $turquoise:    hsl(171, 100%, 41%) !default;
 // $cyan:         hsl(207, 61%,  53%) !default;
 // $blue:         hsl(229, 53%,  53%) !default;
-$purple:       hsl(286, 66%, 35%) !default;
-$red:          hsl(4, 100%, 58%) !default;
+// $purple:       hsl(286, 66%, 35%) !default;
+// $red:          hsl(4, 100%, 58%) !default;
 
 // // Typography
 // $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
 // $family-monospace: monospace !default;
 // $render-mode: optimizeLegibility !default;
 
-// $size-1: 3rem !default;
-// $size-2: 2.5rem !default;
-// $size-3: 2rem !default;
-// $size-4: 1.5rem !default;
-// $size-5: 1.25rem !default;
-// $size-6: 1rem !default;
-// $size-7: 0.75rem !default;
+$size-1: 2.462rem !default; //32px
+$size-2: 2rem !default; //26px
+$size-3: 1.692rem !default; //22px
+$size-4: 1.385rem !default; //18px
+$size-5: 1.213rem !default; //16px
+$size-6: 1rem !default; //13px
+$size-7: 0.846rem !default; //11px
 
-// $weight-light: 300 !default;
-// $weight-normal: 400 !default;
-// $weight-medium: 500 !default;
-// $weight-semibold: 600 !default;
-// $weight-bold: 700 !default;
+$weight-light: 300 !default;
+$weight-normal: 400 !default;
+$weight-medium: 500 !default;
+$weight-semibold: 600 !default;
+$weight-bold: 700 !default;
 
 // // Spacing
 // $block-spacing: 1.5rem !default;
@@ -74,16 +72,14 @@ $red:          hsl(4, 100%, 58%) !default;
 // $variable-columns: true !default;
 // $rtl: false !default;
 
-
-
-// // Derived-Variables 
+// // Derived-Variables
 
 // $primary: $turquoise !default;
-
-// $info: $cyan !default;
-// $success: $green !default;
-// $warning: $yellow !default;
-// $danger: $red !default;
+$primary: $primary !default;
+$info: $blue !default;
+$success: $success !default;
+$warning: $warning !default;
+$danger: $danger !default;
 
 // $light: $white-ter !default;
 // $dark: $grey-darker !default;

package/base/utilities/_extended.scss

@@ -1,4 +1,4 @@
-.has-hover-style{
+.has-hover-style {
   cursor: pointer;
 
   &::before {
@@ -30,9 +30,10 @@
   }
 
   &:hover {
+
     &::before,
     &::after {
       transform: scale(1);
     }
   }
-}
+}