@appscode/design-system 1.1.0 → 2.0.0

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,7 +1,9 @@
-@import "initial-variables";
-@import "derived-variables";
-@import "mixin";
+// @import "colors";
 @import "typography";
-@import "default";
+@import "mixin";
+@import "extended";
+@import "global";
 @import "grid";
-@import "dark-theme";
+@import "spacing";
+@import "layouts";
+// @import "dark-theme";

package/base/utilities/_colors.scss

@@ -0,0 +1,377 @@
+// ===================================PREVIOUS STYLE========================================
+// root colors
+// :root {
+//   --hsl-hue: 208;
+//   --hsl-saturation: 77%;
+//   --hsl-lightness: 40%;
+
+//   --ac-primary: hsla(var(--hsl-hue),
+//       var(--hsl-saturation),
+//       var(--hsl-lightness),
+//       1);
+// }
+
+// transparent: 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: var(--ac-white-light);
+// $white-100er: var(--ac-white-lighter);
+// $white-100est: var(--ac-white-lightest);
+// $white-100: var(--ac-white);
+// $ac-full-white: var(--ac-full-white);
+
+// $info-light: var(--ac-blue-light);
+// transparent-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);
+// $black-8: 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%);
+$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-93: hsl($primary-hue, $primary-saturation, 93%);
+$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-93: hsl($green-hue, $green-saturation, 93%);
+$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-93: hsl($blue-hue, $blue-saturation, 93%);
+$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-93: hsl($purple-hue, $purple-saturation, 93%);
+$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-93: hsl($yellow-hue, $yellow-saturation, 93%);
+$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%);
+$danger: hsl($red-hue, $red-saturation, 40%);
+$red-40: hsl($red-hue, $red-saturation, 40%);
+$red-50: 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-93: hsl($red-hue, $red-saturation, 93%);
+$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-93: hsl($black-hue, $black-saturation, 93%);
+$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,
+  93,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "primary",
+  $primary-hue,
+  $primary-saturation,
+  93,
+  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,
+  93,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "green",
+  $green-hue,
+  $green-saturation,
+  93,
+  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,
+  93,
+  97,
+  2
+);
+
+@include generate-color-classes(
+  "bg",
+  "purple",
+  $purple-hue,
+  $purple-saturation,
+  93,
+  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

@@ -0,0 +1,39 @@
+.has-hover-style {
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-top: solid 1px;
+    border-bottom: solid 1px;
+    transition: 0.3s;
+    transform: scaleX(0);
+    border-color: #1971bd;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-left: solid 1px;
+    border-right: solid 1px;
+    transition: 0.3s;
+    transform: scaleY(0);
+    border-color: #1971bd;
+  }
+
+  &:hover {
+
+    &::before,
+    &::after {
+      transform: scale(1);
+    }
+  }
+}