@steroidsjs/bootstrap 3.0.0-beta.11 → 3.0.0-beta.13

package/scss/mixins/button.scss

@@ -1,33 +1,59 @@
-@mixin button-theme($color) {
-    background-color: map-get($color, color);
-    color: map-get($color, text-color);
+@mixin button-theme($colorMap, $colorName, $root) {
+    background-color: map-get($colorMap, color);
+    color: map-get($colorMap, text-color);
 
     &:hover {
-      background-color: map-get($color, color-dark);
+        background-color: map-get($colorMap, color-dark);
     }
-    &:focus, &:focus-visible {
-      border: 3px solid map-get($color, color-light);
+    &:focus,
+    &:focus-visible {
+        border: 4px solid map-get($colorMap, color-light);
     }
     &:active {
-      background-color: map-get($color, color-light);
+        background-color: map-get($colorMap, color-light);
+    }
+
+    #{$root}__loader { 
+        svg {
+            path { 
+                stroke: map-get($colorMap, color-light);
+
+                @if ($colorName == 'basic' ) {
+                    stroke: map-get($colorMap, color-dark);
+                }
+            }
+        }
     }
 }
 
-@mixin button-outline-theme($color) {
-  background-color: #fff;
-  color: map-get($color, color);
-  border: 1px solid map-get($color, color);
+@mixin button-outline-theme($colorMap, $colorName, $root) {
+    background-color: transparent;
+    color: map-get($colorMap, color);
+    border: 1px solid map-get($colorMap, color);
+
+    &:hover {
+        color: map-get($colorMap, color-dark);
+        border-color: map-get($colorMap, color-dark);
+    }
+    &:focus {
+        box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
+        border: none;
+    }
+    &:active {
+        color: map-get($colorMap, color-light);
+        border-color: map-get($colorMap, color-light);
+        box-shadow: none;
+    }
+
+    @if ($colorName == "basic") {
+        color: $text-color;
+    }
 
-  &:hover{
-    color:  map-get($color, color-dark);
-    border-color:  map-get($color, color-dark);
-  }
-  &:focus {
-    box-shadow: 0 0 0 3px map-get($color, color-light), 0 0 0 3px map-get($color, color-light);
-  }
-  &:active {
-    color: map-get($color, color-light);
-    border-color: map-get($color, color-light);
-    box-shadow: none;
-  }
+    #{$root}__loader { 
+        svg {
+            path { 
+                stroke: map-get($colorMap, color);
+            }
+        }
+    }
 }

package/scss/variables/common/colors.scss

@@ -23,6 +23,8 @@
     --light-gray: #f8f8f8;
     --dark: #6f6b76;
     --light: #9088a1;
+    --text-color: #312C3A;
+    --is-dark: 'false';
 
     html[data-theme="dark"] {
         --primary: #8b57ff;
@@ -49,57 +51,65 @@
         --light-gray: #928b9d;
         --dark: #6b6477;
         --light: #b7afc7;
+        --text-color: #FFFFFF;
+        --is-dark: 'true';
     }
 }
 
 /*
  *  SCSS variables implementation
  */
-$primary: var(--primary) !default;
-$primary-dark: var(--primary-dark) !default;
-$primary-light: var(--primary-light) !default;
-$secondary: var(--secondary) !default;
-$secondary-dark: var(--secondary-dark) !default;
-$secondary-light: var(--secondary-light) !default;
-$success: var(--success) !default;
-$success-dark: var(--success-dark) !default;
-$success-light: var(--success-light) !default;
-$danger: var(--danger) !default;
-$danger-dark: var(--danger-dark) !default;
-$danger-light: var(--danger-light) !default;
-$info: var(--info) !default;
-$info-dark: var(--info-dark) !default;
-$info-light: var(--info-light) !default;
-$warning: var(--warning) !default;
-$warning-dark: var(--warning-dark) !default;
-$warning-light: var(--warning-light) !default;
-$graphite: var(--graphite) !default;
-$gray-dark: var(--gray-dark) !default;
-$gray: var(--gray) !default;
-$light-gray: var(--light-gray) !default;
-$dark: var(--dark) !default;
-$light: var(--light) !default;
+$primary: var(--primary);
+$primary-dark: var(--primary-dark);
+$primary-light: var(--primary-light);
+$secondary: var(--secondary);
+$secondary-dark: var(--secondary-dark);
+$secondary-light: var(--secondary-light);
+$success: var(--success);
+$success-dark: var(--success-dark);
+$success-light: var(--success-light);
+$danger: var(--danger);
+$danger-dark: var(--danger-dark);
+$danger-light: var(--danger-light);
+$info: var(--info);
+$info-dark: var(--info-dark);
+$info-light: var(--info-light);
+$warning: var(--warning);
+$warning-dark: var(--warning-dark);
+$warning-light: var(--warning-light);
+$graphite: var(--graphite);
+$gray-dark: var(--gray-dark);
+$gray: var(--gray);
+$light-gray: var(--light-gray);
+$dark: var(--dark);
+$light: var(--light);
+$text-color: var(--text-color);
+$is-dark: var(--is-dark);
 
 /*
  * Common colors   
  */
 
-$black: rgba(#000, 1) !default;
-$black-60: rgba(#000, 0.6) !default;
-$black-30: rgba(#000, 0.3) !default;
-$black-10: rgba(#000, 0.1) !default;
-$black-4: rgba(#000, 0.04) !default;
-$white: #fff !default;
+$black: rgba(#000, 1);
+$black-60: rgba(#000, 0.6);
+$black-30: rgba(#000, 0.3);
+$black-10: rgba(#000, 0.1);
+$black-4: rgba(#000, 0.04);
+$white: #fff;
 
-$text-color: #312c3a !default;
-$link-color: #2ba3fb !default;
+$link-color: #2ba3fb;
 
-$gradient-purple: linear-gradient(180deg, #7433FF, #FFA3FD);
-$gradient-red: linear-gradient(180deg, #EB0155, #FFFA80);
+$gradient-blue: linear-gradient(180deg, #651FFF, #BA9BFF);
 
-$color-themes: () !default;
+$color-themes: ();
 $color-themes: map-merge(
     (
+        "basic": (
+            "color": $gray,
+            "color-dark": $gray-dark,
+            "color-light": $light-gray,
+            "text-color": $text-color,
+        ),
         "primary": (
             "color": $primary,
             "color-dark": $primary-dark,
@@ -128,25 +138,13 @@ $color-themes: map-merge(
             "color": $warning,
             "color-dark": $warning-dark,
             "color-light": $warning-light,
-            "text-color": $dark,
+            "text-color": $text-color,
         ),
         "info": (
             "color": $info,
             "color-dark": $info-dark,
             "color-light": $info-light,
-            "text-color": $white,
-        ),
-        "light": (
-            "color": $light,
-            "color-dark": $dark,
-            "color-light": $light,
-            "text-color": $dark,
-        ),
-        "dark": (
-            "color": $dark,
-            "color-dark": $dark,
-            "color-light": $light,
-            "text-color": $white,
+            "text-color": $text-color,
         ),
     ),
     $color-themes

package/scss/variables/common/typography.scss

@@ -21,19 +21,3 @@ $line-height-2xl: 45px;
 $font-weight-sm: 400;
 $font-weight-md: 500;
 $font-weight-lg: 700;
-
-
-/* 
-*   Button font variables
-*/
-
-$btn-font-weight-sm: 400;
-$btn-font-weight-lg: 800;
-
-$btn-font-xs: 12px;
-$btn-font-sm: 14px;
-$btn-font-base: 16px;
-
-$btn-line-height: 24px;
-
-$btn-letter-spacing: 0.1em;

package/content/Collapse/CollapseItemView.d.ts

@@ -1,2 +0,0 @@
-import { ICollapseItemViewProps } from '@steroidsjs/core/ui/content/Collapse/CollapseItem';
-export default function CollapseItemView(props: ICollapseItemViewProps): JSX.Element;

package/content/Collapse/CollapseItemView.js

@@ -1,65 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
-var hooks_1 = require("@steroidsjs/core/hooks");
-function CollapseItemView(props) {
-    var bem = (0, hooks_1.useBem)('CollapseItemView');
-    React.useEffect(function () {
-        if (props.isAccordion) {
-            props.toggleAccordion(props.activeKey - 1);
-        }
-        else {
-            props.toggleCollapse(props.activeKey - 1);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.activeKey]);
-    return (React.createElement("div", { className: bem(bem.block({
-            disable: props.disabled,
-            borderless: props.borderless
-        }), props.className), style: props.style },
-        React.createElement("div", { className: bem.element('header-container', { revert: props.iconPosition === 'left' }), onClick: !props.disabled
-                ? function () {
-                    // eslint-disable-next-line no-unused-expressions
-                    props.isAccordion
-                        ? props.toggleAccordion(props.childIndex)
-                        : props.toggleCollapse(props.childIndex);
-                }
-                : null },
-            React.createElement("div", { className: bem.element('title-container') },
-                React.createElement("p", null, props.title)),
-            React.createElement("div", { className: bem.element('icon-wrapper', { not_visible: !props.showIcon }) }, props.icon
-                ? (typeof props.icon === 'string' ? React.createElement(Icon_1["default"], { name: props.icon }) : props.icon)
-                : (React.createElement(Icon_1["default"], { className: bem.element('icon', {
-                        active: !props.disabled && props.isShowMore,
-                        disable_cursor: !props.showIcon
-                    }), name: "chevron-down" })))),
-        React.createElement("div", { className: bem.element('content', { visible: !props.disabled && props.isShowMore }) }, props.children)));
-}
-exports["default"] = CollapseItemView;

package/content/Collapse/CollapseItemView.scss

@@ -1,88 +0,0 @@
-.CollapseItemView {
-  display: grid;
-  align-items: center;
-
-  background-color: #fff;
-  border-bottom: 1px solid rgba(#000, .1);
-  box-shadow: 0 0 3px 0 rgba(34, 60, 80, 0.2);
-  min-height: 48px;
-  width: 100%;
-  height: fit-content;
-
-  &_disable {
-    opacity: .4;
-    background-color: #d7d7d7;
-    color: rgba(#212529, .7);
-
-    .IconView {
-      svg {
-        fill-opacity: .6;
-      }
-    }
-  }
-
-  &_borderless {
-    border-bottom: unset;
-    box-shadow: unset;
-  }
-
-  &_active {
-    margin-bottom: 16px;
-  }
-
-  p {
-    margin: 0;
-  };
-
-  &__icon {
-    transform: rotate(0deg);
-    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
-    &_active {
-    transform: rotate(180deg);
-    }
-
-    &_disable_cursor {
-      cursor: auto;
-    }
-  }
-
-  &__header-container {
-    display: flex;
-    &_revert {
-      flex-direction: row-reverse;
-    }
-  }
-
-  &__title-container {
-    width: 100%;
-    padding: 0 16px;
-    align-self: center;
-  }
-
-  &__icon-wrapper {
-    width: 48px;
-    height: 48px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &_not_visible {
-      width: 0;
-      opacity: 0;
-    }
-  }
-
-  &__content {
-    transition: all 200ms ease;
-    overflow: hidden;
-    max-height: 0;
-    padding: 0 16px;
-
-    &_visible {
-      max-height: 1024px;
-      padding: 0 16px 8px 16px
-    }
-  }
-}

package/content/Collapse/CollapseView.d.ts

@@ -1,2 +0,0 @@
-import { ICollapseViewProps } from '@steroidsjs/core/ui/content/Collapse/Collapse';
-export default function CollapseView(props: ICollapseViewProps): JSX.Element;

package/content/Collapse/CollapseView.scss

@@ -1,15 +0,0 @@
-.CollapseView {
-  height: fit-content;
-
-  display: grid;
-  grid-gap: 0;
-
-  & > :first-child {
-    border-radius: 4px 4px 0 0;
-  }
-
-  & > :last-child {
-    border-radius: 0 0 4px 4px;
-    border: unset;
-  }
-}

package/content/Icon/IconView.scss

@@ -1,25 +0,0 @@
-.IconView {
-  svg {
-    width: $icon-size;
-  }
-
-  &_size_sm svg {
-    width: $icon-size-sm;
-  }
-
-  &_size_lg svg {
-    width: $icon-size-lg;
-  }
-}
-
-img.IconView {
-  width: $icon-size;
-
-  &_size_sm {
-    width: $icon-size-sm;
-  }
-
-  &_size_lg {
-    width: $icon-size-lg;
-  }
-}