mekari_ui_toolkit 1.0.0

data/lib/scss/vendor-extensions/_grid.scss

@@ -0,0 +1,18 @@
+// Grid system gutter
+$grid-columns: 12;
+$grid-gutter-width: 24px;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1272px
+);
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1224px
+);

data/lib/scss/vendor-extensions/_list-group.scss

@@ -0,0 +1,25 @@
+
+// List group
+
+$list-group-color:                  null;
+$list-group-bg:                     $white;
+$list-group-border-color:           rgba($black, .125);
+$list-group-border-width:           1px;
+$list-group-border-radius:          4px;
+
+$list-group-item-padding-y:         .75rem;
+$list-group-item-padding-x:         1.25rem;
+
+$list-group-hover-bg:               $gray-100;
+$list-group-active-color:           $white;
+$list-group-active-bg:              $primary;
+$list-group-active-border-color:    $list-group-active-bg;
+
+$list-group-disabled-color:         $gray-600;
+$list-group-disabled-bg:            $list-group-bg;
+
+$list-group-action-color:           $gray-700;
+$list-group-action-hover-color:     $list-group-action-color;
+
+$list-group-action-active-color:    $body-color;
+$list-group-action-active-bg:       $gray-200;

data/lib/scss/vendor-extensions/_main.scss

@@ -0,0 +1,24 @@
+@import "./options";
+@import "./color";
+@import "./typography";
+@import "./utilities";
+
+@import "./alert";
+@import "./avatar";
+@import "./badge";
+@import "./breadcrumb";
+@import "./button";
+@import "./card";
+@import "./dropdown";
+@import "./form";
+@import "./grid";
+@import "./list-group";
+@import "./modal";
+@import "./navs";
+@import "./navbar";
+@import "./popover";
+@import "./progress";
+@import "./spacing";
+@import "./spinners";
+@import "./tooltip";
+@import "./tables";

data/lib/scss/vendor-extensions/_modal.scss

@@ -0,0 +1,41 @@
+$modal-content-border-color:  $smoke;
+$modal-title-line-height:     20px;
+$modal-header-padding:        17px 24px 15px;
+$modal-inner-padding:         24px;
+$modal-backdrop-opacity:      .75;
+
+$modal-lg:                    808px;
+$modal-md:                    600px;
+$modal-sm:                    392px;
+
+$transition-base:             all .2s ease-in-out !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+
+$modal-dialog-margin:               .5rem;
+$modal-dialog-margin-y-sm-up:       1.75rem;
+$modal-fade-transform:              translate(0, -50px);
+$modal-show-transform:              none;
+$modal-transition:                  transform .3s ease-out;
+$modal-content-color: null;
+$modal-content-bg: $white;
+$modal-content-border-width: 1px;
+$modal-content-border-radius: .3rem;
+
+$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5);
+$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5);
+
+$modal-backdrop-bg:                 $black;
+$modal-header-border-width:         $modal-content-border-width;
+$modal-header-border-color:         $smoke;
+$modal-header-padding-y:            16px;
+$modal-header-padding-x:            16px;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
+$modal-footer-border-width: 1px;
+$modal-footer-border-color: $smoke;
+$modal-xl:                          1140px;
+
+$close-font-size: $font-size-base * 1.5;
+$close-font-weight:                 $font-weight-bold;
+$close-color: $slate;
+$close-text-shadow:                 0 1px 0 $white;

data/lib/scss/vendor-extensions/_navbar.scss

@@ -0,0 +1,34 @@
+$navbar-padding-y:                  8px;
+$navbar-padding-x:                  16px;
+
+$navbar-nav-link-padding-x:         8px;
+
+$navbar-brand-font-size:            $font-size-lg;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   calc($font-size-base * $line-height-base) + $nav-link-padding-y * 2;
+$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
+$navbar-brand-padding-y:            (calc($nav-link-height - $navbar-brand-height)) / 2;
+
+$navbar-toggler-padding-y:          .25rem;
+$navbar-toggler-padding-x:          .75rem;
+$navbar-toggler-font-size:          $font-size-lg;
+$navbar-toggler-border-radius:      $btn-border-radius;
+
+$navbar-dark-color:                 rgba($white, .5);
+$navbar-dark-hover-color:           rgba($white, .75);
+$navbar-dark-active-color:          $white;
+$navbar-dark-disabled-color:        rgba($white, .25);
+$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
+$navbar-dark-toggler-border-color:  rgba($white, .1);
+
+$navbar-light-color:                rgba($black, .5);
+$navbar-light-hover-color:          rgba($black, .7);
+$navbar-light-active-color:         rgba($black, .9);
+$navbar-light-disabled-color:       rgba($black, .3);
+$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
+$navbar-light-toggler-border-color: rgba($black, .1);
+
+$navbar-light-brand-color:                $navbar-light-active-color;
+$navbar-light-brand-hover-color:          $navbar-light-active-color;
+$navbar-dark-brand-color:                 $navbar-dark-active-color;
+$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

data/lib/scss/vendor-extensions/_navs.scss

@@ -0,0 +1,19 @@
+// Tabs
+$nav-tabs-border-color:             $smoke;
+$nav-tabs-border-width:             1px;
+$nav-tabs-border-radius:            0;
+$nav-tabs-link-hover-border-color:  transparent;
+$nav-tabs-link-active-color:        $dark;
+$nav-tabs-link-active-bg:           transparent;
+$nav-tabs-link-active-border-color: transparent;
+
+$nav-link-padding-y: 8px;
+$nav-link-padding-x: 16px;
+$nav-link-height: calc($font-size-base * $line-height-base) + $nav-link-padding-y * 2;
+$navbar-brand-height:               $font-size-lg * $line-height-base;
+$navbar-brand-padding-y:            calc($nav-link-height - $navbar-brand-height) / 2;
+$nav-link-disabled-color: $text-muted;
+$nav-pills-border-radius: 4px;
+
+$nav-pills-link-active-color:       $white;
+$nav-pills-link-active-bg:          $primary;

data/lib/scss/vendor-extensions/_options.scss

@@ -0,0 +1,13 @@
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              false !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;

data/lib/scss/vendor-extensions/_popover.scss

@@ -0,0 +1,25 @@
+// Popovers
+$zindex-popover:                    1060;
+
+$popover-font-size:                 $font-size-sm;
+$popover-bg:                        $white;
+$popover-max-width:                 276px;
+$popover-border-width:              1px;
+$popover-border-color:              rgba($black, .2);
+$popover-border-radius:             4px;
+$popover-box-shadow:                0 .25rem .5rem rgba($black, .2);
+
+$popover-header-bg:                 darken($popover-bg, 3%);
+$popover-header-color:              null;
+$popover-header-padding-y:          .5rem;
+$popover-header-padding-x:          .75rem;
+
+$popover-body-color:                $body-color;
+$popover-body-padding-y:            $popover-header-padding-y;
+$popover-body-padding-x:            $popover-header-padding-x;
+
+$popover-arrow-width:               1rem;
+$popover-arrow-height:              .5rem;
+$popover-arrow-color:               $popover-bg;
+
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

data/lib/scss/vendor-extensions/_progress.scss

@@ -0,0 +1,11 @@
+// Progress bars
+
+$progress-height:                   1rem;
+$progress-font-size:                1rem * .75;
+$progress-bg:                       $gray-200;
+$progress-border-radius:            $border-radius;
+$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1);
+$progress-bar-color:                $white;
+$progress-bar-bg:                   theme-color("primary");
+$progress-bar-animation-timing:     1s linear infinite;
+$progress-bar-transition:           width .6s ease;

data/lib/scss/vendor-extensions/_spacing.scss

@@ -0,0 +1,60 @@
+// Spacing for Mekari UI
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: ($spacer * .25), // tiny
+  2: ($spacer * .5), // xmall
+  3: $spacer, // small
+  4: ($spacer * 1.5), // normal
+  5: ($spacer * 2), // medium
+  6: ($spacer * 2.5), // large
+  7: ($spacer * 5) // xlarge
+);
+
+$headings-margin-bottom: $spacer / 2;
+$paragraph-margin-bottom: $spacer;
+$label-margin-bottom: 8px;
+
+//pagination
+
+$pagination-padding-y:              8px;
+$pagination-padding-x:              12px;
+$pagination-padding-y-sm:           4px;
+$pagination-padding-x-sm:           8px;
+$pagination-padding-y-lg:           12px;
+$pagination-padding-x-lg:           24px;
+$pagination-line-height:            20px;
+
+$pagination-border-width: 1px;
+$pagination-border-color: $smoke;
+
+$pagination-hover-color: $link-hover-color;
+$pagination-hover-bg: $smoke;
+$pagination-hover-border-color: $muted;
+
+$pagination-color: $link-color;
+$pagination-bg: $white;
+$pagination-focus-outline: 0;
+$pagination-focus-box-shadow: 0 0 0 .2rem $primary;
+
+$pagination-active-color:           $white;
+$pagination-active-bg:              $primary;
+$pagination-active-border-color:    $pagination-active-bg;
+
+$pagination-disabled-color:         $slate !default;
+$pagination-disabled-bg:            $white !default;
+$pagination-disabled-border-color:  $smoke !default;
+
+$line-height-lg: 32px;
+
+//images
+
+$thumbnail-padding: 4px;
+$thumbnail-bg: $body-bg;
+
+$thumbnail-border-width: 1px;
+$thumbnail-border-color: $smoke;
+$thumbnail-border-radius: 4px;
+$thumbnail-box-shadow: 0 1px 2px rgba($black, .075);
+$figure-caption-font-size: 90%;
+$figure-caption-color: $slate;

data/lib/scss/vendor-extensions/_spinners.scss

@@ -0,0 +1,9 @@
+// Spinners
+
+$spinner-width:         2rem;
+$spinner-height:        $spinner-width;
+$spinner-border-width:  .25em;
+
+$spinner-width-sm:        1rem;
+$spinner-height-sm:       $spinner-width-sm;
+$spinner-border-width-sm: .2em;

data/lib/scss/vendor-extensions/_tables.scss

@@ -0,0 +1,30 @@
+
+$table-head-bg:               $white;
+$table-head-color:            $dark;
+
+$table-accent-bg:             rgba($black, .05);
+$table-bg: null;
+$table-bg-level: -9;
+$table-caption-color: $text-muted;
+$table-color: $dark;
+$theme-color-interval:      8%;
+$table-striped-order: odd;
+
+$table-hover-color: $table-color;
+$table-hover-bg: $cloud;
+
+$table-active-bg: $table-hover-bg;
+
+$table-border-color:          $smoke;
+$table-border-level:          -6;
+$table-border-width:          1px;
+
+$table-cell-padding:          .75rem;
+$table-cell-padding-sm:       .3rem;
+
+$table-dark-color: $white;
+$table-dark-bg:               $slate;
+$table-dark-accent-bg:        rgba($white, .05);
+$table-dark-hover-color:      $table-dark-color;
+$table-dark-hover-bg:         rgba($white, .075);
+$table-dark-border-color:     lighten($table-dark-bg, 7.5%);

data/lib/scss/vendor-extensions/_tooltip.scss

@@ -0,0 +1,19 @@
+$tooltip-bg:            $dark;
+$tooltip-color: $white;
+$tooltip-arrow-width:   0;
+$tooltip-arrow-height:  0;
+$zindex-dropdown:                   1000;
+$zindex-sticky:                     1020;
+$zindex-fixed:                      1030;
+$zindex-modal-backdrop:             1040;
+$zindex-modal:                      1050;
+$zindex-popover:                    1060;
+$zindex-tooltip:                    1070;
+$tooltip-font-size: $font-size-sm;
+$tooltip-opacity: .9;
+$tooltip-arrow-color: $tooltip-bg;
+$tooltip-max-width: 200px;
+$tooltip-padding-y:                 .25rem;
+$tooltip-padding-x:                 .5rem;
+$tooltip-margin:        .5rem;
+$tooltip-border-radius: 4px;

data/lib/scss/vendor-extensions/_typography.scss

@@ -0,0 +1,33 @@
+$font-family-roboto:                  "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$font-family-base:                    $font-family-roboto;
+$font-family-monospace: monospace;
+
+// 1 rem = 16px
+$font-size-base:                      .875rem; // 14px
+$font-size-lg:                        1.25rem; // 20px
+$font-size-sm:                        .75rem; // 12px
+
+$line-height-base:                    1.4285; // The closest value to Mekari design
+$line-height-lg:                      1.4285;
+$line-height-sm:                      1.4285;
+$letter-spacing:                      .2px;
+
+$font-weight-lighter:                 400;
+$font-weight-light:                   400;
+$font-weight-normal:                  400;
+$font-weight-base:                    400;
+$font-weight-bold:                    500;
+$font-weight-bolder:                  500;
+
+$dt-font-weight: $font-weight-bold;
+
+// Text color
+$body-color:                          $dark;
+$link-color:                          $blue;
+$link-hover-color:                    darken($link-color, 15%) !default;
+$link-decoration:                     none;
+$link-hover-decoration:               underline;
+
+$input-placeholder-color:             $text-muted;
+$custom-select-disabled-color:        $text-muted;
+$custom-control-label-disabled-color: $text-muted;

data/lib/scss/vendor-extensions/_utilities.scss

@@ -0,0 +1,43 @@
+$border-width:                1px;
+$border-color:                $smoke;
+
+$border-radius:               4px;
+$border-radius-lg:            5.4px;
+$border-radius-sm:            3.2px;
+
+$rounded-pill:                50rem !default;
+
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;
+
+$embed-responsive-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (4 3),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto
+  ),
+  $sizes
+);
+
+$emphasized-link-hover-darken-percentage: 15% !default;

data/lib/scss/vendors/_alert.scss

@@ -0,0 +1,51 @@
+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.#{$prefix}alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.#{$prefix}alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.#{$prefix}alert-dismissible {
+  padding-right: $close-font-size + $alert-padding-x * 2;
+
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .#{$prefix}alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}