@steroidsjs/bootstrap 2.1.0-beta.2 → 2.1.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/bootstrap",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.0-beta.7",
   "description": "",
   "main": "index.js",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -19,15 +19,16 @@
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^3.0.2",
     "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-    "@steroidsjs/core": "^2.1.0-beta.9",
+    "@steroidsjs/core": "^2.1.0-beta.30",
     "bootstrap": "^4.5.2",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.20",
-    "rc-slider": "^9.3.1",
+    "rc-slider": "^9.7.4",
     "react": "^17.0.2",
     "react-collapse": "^5.0.1",
     "react-day-picker": "^7.4.8",
     "react-dom": "^17.0.2",
+    "react-image-crop": "^9.0.2",
     "react-modal": "^3.11.2",
     "react-transition-group": "^2.9.0"
   },

package/scss/mixins/button.scss

@@ -0,0 +1,33 @@
+@mixin button-theme($color) {
+    background-color: map-get($color, color);
+    color: map-get($color, text-color);
+
+    &:hover {
+      background-color: map-get($color, color-dark);
+    }
+    &:focus, &:focus-visible {
+      border: 3px solid map-get($color, color-light);
+    }
+    &:active {
+      background-color: map-get($color, color-light);
+    }
+}
+
+@mixin button-outline-theme($color) {
+  background-color: #fff;
+  color: map-get($color, color);
+  border: 1px solid map-get($color, 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;
+  }
+}

package/scss/mixins/card.scss

@@ -0,0 +1,26 @@
+@mixin card-theme($root, $color) {
+  background: map-get($color, color);
+  color: map-get($color, text-color);
+
+  #{$root}__header{
+    background: map-get($color, color);
+    border-bottom: 1px solid map-get($color, color-dark);
+  }
+  #{$root}__footer{
+    background: map-get($color, color);
+    border-top: 1px solid map-get($color, color-dark);
+  }
+}
+
+@mixin card-border-theme($root, $color) {
+  border: 1px solid map-get($color, color);
+  #{$root}__content{
+    color: map-get($color, color);
+  }
+  #{$root}__header{
+    border-bottom: 1px solid map-get($color, color);
+  }
+  #{$root}__footer{
+    border-top: 1px solid map-get($color, color);
+  }
+}

package/scss/mixins/index.scss

@@ -0,0 +1,2 @@
+@import "button";
+@import "card";

package/scss/variables/colors.scss

@@ -0,0 +1,74 @@
+$primary: #651FFF;
+$primary-dark: #410FAD;
+$primary-light: #D8CCF7;
+
+$secondary: #97A7C8;
+$secondary-dark: #596886;
+$secondary-light: #E3EAF9;
+
+$heading: #152536;
+$body: #68717A;
+$white: #FFFFFF;
+
+$success: #64D03E;
+$success-dark: #218838;
+$success-light: #ABED94;
+
+$danger: #FF4557;
+$danger-dark: #DA2839;
+$danger-light: #ff99a3;
+
+$warning: #fad826;
+$warning-dark: #dcc131;
+$warning-light: #fff3b2;
+
+$info: #39bbd8;
+$info-dark: #2796af;
+$info-light: #a7efff;
+
+$light: #f8f9fa;
+$light-dark: #e2e6ea;
+$light-light: #fafafa;
+
+$dark: #343a40;
+$dark-dark: #1a1c1e;
+$dark-light: #acacac;
+
+$color-themes: () !default;
+$color-themes: map-merge(
+  (
+      "primary":   ("color": $primary,   "color-dark": $primary-dark,   "color-light": $primary-light, "text-color": $white),
+      "secondary": ("color": $secondary, "color-dark": $secondary-dark, "color-light": $secondary-light, "text-color": $white),
+      "success":   ("color": $success,   "color-dark": $success-dark,   "color-light": $success-light, "text-color": $white),
+      "danger":    ("color": $danger,    "color-dark": $danger-dark,    "color-light": $danger-light, "text-color": $white),
+      "warning":   ("color": $warning,   "color-dark": $warning-dark,   "color-light": $warning-light, "text-color": $dark),
+      "info":      ("color": $info,      "color-dark": $info-dark,      "color-light": $info-light, "text-color": $white),
+      "light":     ("color": $light,     "color-dark": $light-dark,     "color-light": $light-light, "text-color": $dark),
+      "dark":      ("color": $dark,      "color-dark": $dark-dark,      "color-light": $dark-light, "text-color": $white)
+  ),
+  $color-themes
+);
+
+$grey-light: #D9D9D9;
+$grey-lighter: #F8F8F8;
+$grey: #F8F9FA;
+$grey-dark: #2D2D2D;
+$grey-darker: #78848E;
+$grey-disabled: #F1F1F1;
+
+$additional: #0596FF;
+
+$border-default: #CCCCCC;
+$border-hover: #B0B0B0;
+$border-action: #39BBD8;
+$border-typing: #A7EFFF;
+$back-disabled: #EBEBEB;
+$back-success: #F1FFEC;
+$border-success: #64D03E;
+$back-error: #FCE7E7;
+$border-error: #FF4557;
+$back-info: #ECFCFF;
+$back-warning: #FFFCEA;
+
+$shadow-default: 0px 0px 30px rgba(0, 0, 0, 0.1);
+

package/scss/variables/components/alert.scss

@@ -0,0 +1,9 @@
+$alert-padding-y: 12px !default;
+$alert-padding-x: 16px !default;
+
+$alert-border-radius: 4px !default;
+$alert-description-font-size: 18px !default;
+$alert-message-font-size: 16px !default;
+
+$alert-icon-size: 24px !default;
+$alert-close-icon-size: 15px !default;

package/scss/variables/components/avatar.scss

@@ -0,0 +1,17 @@
+$avatar-x-large-size: 64px !default;
+$avatar-x-large-font-size: 20px !default;
+
+$avatar-large-size: 46px !default;
+$avatar-large-font-size: 16px !default;
+
+$avatar-middle-size: 36px !default;
+$avatar-middle-font-size: 14px !default;
+
+$avatar-small-size: 28px !default;
+$avatar-small-font-size: 14px !default;
+
+$avatar-status-color: $success !default;
+$avatar-status-border: 2px solid $white !default;
+
+$avatar-background-color: $primary !default;
+$avatar-text-color: $white !default;

package/scss/variables/components/button.scss

@@ -0,0 +1,14 @@
+$button-border: 3px solid transparent !default;
+$button-border-radius: 4px !default;
+$button-padding-y: 0px !default;
+$button-padding-x: 20px !default;
+
+$button-font-weight: 500 !default;
+$button-font-size: 1rem !default;
+$button-font-size-sm: 14px !default;
+$button-font-size-md: 16px !default;
+$button-font-size-lg: 18px !default;
+
+$button-height-sm: 28px !default;
+$button-height-md: 36px !default;
+$button-height-lg: 46px !default;

package/scss/variables/components/calendar.scss

@@ -0,0 +1,15 @@
+$calendar-primary-color: $primary !default;
+$calendar-primary-light-color: $primary-light !default;
+$calendar-secondary-color: $border-default !default;
+$calendar-secondary-light-color: $light !default;
+$calendar-text-color: $heading !default;
+$calendar-selected-text-color: $white !default;
+
+$calendar-font-weight: 500 !default;
+
+$calendar-day-border-radius: 10px !default;
+
+$calendar-shadow-shape: 0 0 0 3px !default;
+$calendar-selected-shadow: $calendar-shadow-shape $calendar-primary-light-color !default;
+$calendar-today-shadow: $calendar-shadow-shape $calendar-primary-light-color !default;
+$calendar-hover-shadow: $calendar-shadow-shape $calendar-secondary-color !default;

package/scss/variables/components/card.scss

@@ -0,0 +1,20 @@
+$card-header-font-size: 20px !default;
+$card-header-line-height: 24px !default;
+
+$card-title-font-size: 20px !default;
+$card-title-line-height: 24px !default;
+
+$card-font-size: 14px !default;
+
+$card-children-font-size: 16px !default;
+$card-children-line-height: 28px !default;
+
+$card-horizontal-header-font-size: 28px !default;
+$card-horizontal-font-size: 16px !default;
+
+$card-link-font-size: 16px !default;
+
+$card-border-radius: 3px !default;
+$card-button-border-radius: 4px !default;
+
+$card-header-background: $grey-lighter !default;

package/scss/variables/components/icon.scss

@@ -0,0 +1,3 @@
+$icon-size: 16px !default;
+$icon-size-sm: 12px !default;
+$icon-size-lg: 32px !default;

package/scss/variables/components/input.scss

@@ -0,0 +1,11 @@
+$input-height-sm: 28px !default;
+$input-height-md: 36px !default;
+$input-height-lg: 46px !default;
+
+$input-border: 1px solid $border-default !default;
+$input-border-radius: 4px !default;
+
+$input-padding-y: 0 !default;
+$input-padding-x: 8px !default;
+$input-addon-padding: 0.6rem !default;
+$input-text-padding: 0.4rem !default;

package/scss/variables/components/ratefield.scss

@@ -0,0 +1,2 @@
+$icon-size: 20px !default;
+$icon-color: $primary !default;

package/scss/variables/index.scss

@@ -0,0 +1,9 @@
+@import 'colors';
+@import 'components/alert';
+@import 'components/avatar';
+@import 'components/button';
+@import 'components/calendar';
+@import 'components/card';
+@import 'components/icon';
+@import 'components/input';
+@import 'components/ratefield';

package/list/Accordion/AccordionView.scss

@@ -1,10 +0,0 @@
-.AccordionView {
-  width: 100%;
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-  }
-}

package/list/Detail/DetailView.scss

@@ -1,5 +0,0 @@
-.DetailView {
-  &__item-label {
-    width: 250px;
-  }
-}