@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.60

package/package.json

@@ -1,58 +1,58 @@
 {
-  "name": "@steroidsjs/bootstrap",
-  "version": "3.0.0-beta.6",
-  "description": "",
-  "main": "index.js",
-  "author": "Vladimir Kozhin <hello@kozhindev.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/steroids/react-bootstrap"
-  },
-  "scripts": {
-    "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src --quiet",
-    "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" \"src/icons/*.svg\" dist"
-  },
-  "license": "MIT",
-  "homepage": "https://github.com/steroids/react-bootstrap",
-  "bugs": {
-    "url": "https://github.com/steroids/react-bootstrap/issues"
-  },
-  "dependencies": {
-    "@ckeditor/ckeditor5-react": "^3.0.2",
-    "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-    "bootstrap": "^4.5.2",
-    "date-fns": "^2.29.3",
-    "lodash": "^4.17.20",
-    "lodash-es": "^4.17.20",
-    "rc-slider": "^9.7.4",
-    "react": "^18.2.0",
-    "react-collapse": "^5.0.1",
-    "react-day-picker": "^7.4.10",
-    "react-dom": "^18.2.0",
-    "react-image-crop": "^9.0.2",
-    "react-modal": "^3.11.2",
-    "react-transition-group": "^2.9.0",
-    "react-use": "^17.4.0"
-  },
-  "devDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6",
-    "@steroidsjs/eslint-config": "^2.1.3",
-    "@types/enzyme": "^3.10.8",
-    "@types/googlemaps": "^3.43.3",
-    "@types/jest": "^26.0.22",
-    "@types/markdown-to-jsx": "^6.11.3",
-    "@types/node": "^14.14.37",
-    "@types/overlayscrollbars": "^1.12.0",
-    "@types/reach__router": "^1.3.7",
-    "@types/react": "^18.0.27",
-    "@types/react-color": "^3.0.4",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/webpack-env": "^1.16.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.34.0",
-    "typescript": "^4.9.5"
-  },
-  "peerDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6"
-  }
+    "name": "@steroidsjs/bootstrap",
+    "version": "3.0.0-beta.60",
+    "description": "",
+    "main": "index.js",
+    "author": "Vladimir Kozhin <hello@kozhindev.com>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/steroids/react-bootstrap"
+    },
+    "scripts": {
+        "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src --quiet",
+        "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" \"src/icons/svgs/*.svg\" dist"
+    },
+    "license": "MIT",
+    "homepage": "https://github.com/steroids/react-bootstrap",
+    "bugs": {
+        "url": "https://github.com/steroids/react-bootstrap/issues"
+    },
+    "dependencies": {
+        "@ckeditor/ckeditor5-react": "^3.0.2",
+        "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
+        "date-fns": "^2.29.3",
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20",
+        "normalize.css": "^8.0.1",
+        "rc-slider": "^9.7.4",
+        "react": "^18.2.0",
+        "react-collapse": "^5.0.1",
+        "react-day-picker": "^7.4.10",
+        "react-dom": "^18.2.0",
+        "react-image-crop": "^9.0.2",
+        "react-modal": "^3.11.2",
+        "react-transition-group": "^2.9.0",
+        "react-use": "^17.4.0"
+    },
+    "devDependencies": {
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42",
+        "@steroidsjs/eslint-config": "^2.1.4",
+        "@types/enzyme": "^3.10.8",
+        "@types/googlemaps": "^3.43.3",
+        "@types/jest": "^26.0.22",
+        "@types/markdown-to-jsx": "^6.11.3",
+        "@types/node": "^14.14.37",
+        "@types/overlayscrollbars": "^1.12.0",
+        "@types/reach__router": "^1.3.7",
+        "@types/react": "^18.0.27",
+        "@types/react-color": "^3.0.4",
+        "@types/react-syntax-highlighter": "^13.5.0",
+        "@types/webpack-env": "^1.16.0",
+        "copyfiles": "^2.4.1",
+        "eslint": "^8.34.0",
+        "typescript": "^4.9.5"
+    },
+    "peerDependencies": {
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42"
+    }
 }

package/scss/animations/index.scss

@@ -0,0 +1 @@
+@import "loading";

package/scss/animations/loading.scss

@@ -0,0 +1,13 @@
+@keyframes loading {
+  from {
+    transform: none;
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin loadingAnimation {
+  animation: loading 1.5s linear infinite;
+}

package/scss/fonts.scss

@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,500,600,700&display=swap');
+
+html {
+  font-family: 'Nunito', sans-serif;
+}
+

package/scss/mixins/button.scss

@@ -1,33 +1,89 @@
-@mixin button-theme($color) {
-    background-color: map-get($color, color);
-    color: map-get($color, text-color);
+@mixin svg-color($color) {
+    svg {
+        path { 
+            stroke: $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 {
+        box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
     }
     &:active {
-      background-color: map-get($color, color-light);
+        background-color: map-get($colorMap, color-light);
+    }
+
+    &:disabled {
+        background-color: map-get($colorMap, color);
+        color: map-get($colorMap, text-color);
+    }
+
+    #{$root}__loader { 
+        svg {
+            path { 
+                stroke: map-get($colorMap, color-light);
+
+                @if ($colorName == 'basic' ) {
+                    stroke: map-get($colorMap, color-dark);
+                }
+            }
+        }
+    }
+
+    #{$root}__link {
+        color: map-get($colorMap, color-dark);
+
+        &:hover {
+            color: map-get($colorMap, 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;
-  }
+@mixin button-outline-theme($colorMap, $colorName, $root) {
+    background-color: transparent;
+    color: map-get($colorMap, color);
+    stroke: map-get($colorMap, color);
+    border: 1px solid map-get($colorMap, color);
+
+    @include svg-color(map-get($colorMap, text-color));
+
+    &:hover {
+        @include svg-color(map-get($colorMap, color-dark));
+        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: 1px solid transparent;
+    }
+    &:active {
+        @include svg-color(map-get($colorMap, color-light));
+        color: map-get($colorMap, color-light);
+        border-color: map-get($colorMap, color-light);
+        stroke: map-get($colorMap, color-light);
+        box-shadow: none;
+    }
+
+    &:disabled {
+        background-color: transparent;
+        @include svg-color(map-get($colorMap, color));
+        color: map-get($colorMap, color);
+        border: 1px solid map-get($colorMap, color);
+    }
+
+    @if ($colorName == "basic") {
+        color: $text-color;
+    } 
+
+    #{$root}__loader { 
+        @include svg-color(map-get($colorMap, color));
+    }
 }

package/scss/mixins/customMixins.scss

@@ -0,0 +1,5 @@
+@mixin loader-color($colorMap, $colorName, $root) {
+    svg stop {
+        stop-color: map-get($colorMap, color);
+    }
+}

package/scss/mixins/date.scss

@@ -0,0 +1,397 @@
+:root {
+    --date-icon-default-color: #cbd5db;
+    --date-icon-close-default-color: #323232;
+    --date-icon-disabled-color: rgba(0, 0, 0, 0.1);
+    --date-range-separator-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --date-icon-default-color: #5b5c6b;
+    --date-icon-close-default-color: #ffffff;
+    --date-icon-disabled-color: rgba(255, 255, 255, 0.1);
+    --date-range-separator-color: rgba(255, 255, 255, 0.1);
+}
+
+$date-icon-default-color: var(--date-icon-default-color);
+$date-icon-close-default-color: var(--date-icon-close-default-color);
+$date-icon-disabled-color: var(--date-icon-disabled-color);
+$date-range-separator-color: var(--date-range-separator-color);
+
+$date-sizes: () !default;
+$date-sizes: map-merge(
+    (
+        "lg": (
+            "padding": 16px 8px,
+            "radius": $radius-large,
+            "font-size": $font-size-lg,
+            "height": 56px,
+            "first-input-width": 96px,
+        ),
+        "md": (
+            "padding": 11px 8px,
+            "radius": $radius-large,
+            "font-size": $font-size-base,
+            "height": 46px,
+            "first-input-width": 86px,
+        ),
+        "sm": (
+            "padding": 5px 8px,
+            "radius": $radius-small,
+            "font-size": $font-size-sm,
+            "height": 34px,
+            "first-input-width": 76px,
+        ),
+    ),
+    $date-sizes
+);
+
+@mixin icon-container($root) {
+    #{$root}__icon-container {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+
+        > * {
+            display: inline-flex;
+            flex-flow: row nowrap;
+            width: 100%;
+            height: 100%;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-default-color;
+            }
+        }
+
+        #{$root}__close-icon {
+            cursor: pointer;
+            path,
+            circle {
+                stroke: $date-icon-close-default-color;
+            }
+        }
+    }
+}
+
+@mixin date-default-sizes($root) {
+    &_size {
+        @each $size, $size-map in $date-sizes {
+            &_#{$size} {
+                #{$root}__input {
+                    border-radius: map-get($size-map, radius);
+                    padding: map-get($size-map, padding);
+                    padding-right: 40px;
+                    height: map-get($size-map, height);
+                }
+
+                #{$root}__body::before {
+                    border-radius: calc(map-get($size-map, radius) + 4px);
+                }
+
+                font-size: map-get($size-map, font-size);
+            }
+        }
+    }
+}
+
+@mixin date-default-input() {
+    &__input {
+        width: 100%;
+        font-size: inherit;
+        line-height: $line-height-lg;
+        background-color: $element-background-color;
+        border: 1px solid $border-color;
+        color: $text-color;
+        transition: border-color 150ms ease-in-out;
+
+        &:active {
+            border-color: $primary;
+        }
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+
+        &:disabled {
+            border: none;
+            background-color: $background-disabled-color;
+        }
+    }
+}
+
+@mixin date-default-body() {
+    &__body {
+        position: relative;
+
+        &::before {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            content: "";
+            border: 4px solid $primary-light;
+            transform: translate(-4px, -4px);
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+        }
+    }
+}
+
+@mixin date-default-effects($root) {
+    &:focus-within:not(:active) {
+        #{$root}__body {
+            &::before {
+                opacity: 1;
+            }
+        }
+
+        #{$root}__input {
+            border-color: transparent;
+        }
+    }
+
+    &_disabled {
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-disabled-color;
+            }
+        }
+    }
+
+    &_is-invalid {
+        #{$root}__input {
+            border-color: $danger;
+        }
+    }
+}
+
+@mixin date-range-body($root) {
+    &__body {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        background-color: $element-background-color;
+        color: $text-color;
+        column-gap: 8px;
+
+        > * {
+            &:nth-child(1) {
+                width: 91px;
+            }
+
+            &:nth-child(2) {
+                width: 100%;
+                margin-right: 40px;
+            }
+        }
+    }
+}
+
+@mixin date-range-effects($root) {
+    &__effect {
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: inherit;
+        pointer-events: none;
+
+        &::before,
+        &::after {
+            display: block;
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            transition: border-color 150ms ease-in-out, opacity 150ms ease-in-out;
+            opacity: 1;
+            border-radius: inherit;
+            border-width: 1px;
+            border-style: solid;
+            pointer-events: none;
+        }
+
+        &::before {
+            border-color: $border-color;
+        }
+
+        &::after {
+            width: 100%;
+            height: 100%;
+            transform: translate(-4px, -4px);
+            border: 4px solid $primary-light;
+            opacity: 0;
+        }
+    }
+
+    //Effects
+    //Active
+    &__input:active ~ &__effect::before {
+        border-color: $primary;
+    }
+
+    //Focus
+    &__body:focus-within:not(:active) &__effect {
+        &::before {
+            border-color: transparent;
+        }
+
+        &::after {
+            opacity: 1;
+        }
+    }
+
+    &_disabled {
+        #{$root}__body {
+            background-color: $background-disabled-color;
+        }
+
+        #{$root}__effect {
+            opacity: 0;
+        }
+    }
+
+    &_disabled {
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-disabled-color;
+            }
+        }
+    }
+
+    &_is-invalid {
+        #{$root}__effect::before {
+            border-color: $danger;
+        }
+
+        #{$root}__input:active ~ #{$root}__effect::before {
+            border-color: $danger;
+        }
+    }
+}
+
+@mixin date-range-sizes($root) {
+    &_size {
+        @each $size, $size-map in $date-sizes {
+            &_#{$size} {
+                #{$root}__body {
+                    padding: map-get($size-map, padding);
+                    border-radius: map-get($size-map, radius);
+                    height: map-get($size-map, height);
+
+                    > * {
+                        &:nth-child(1) {
+                            width: map-get($size-map, first-input-width);
+                        }
+                    }
+                }
+
+                #{$root}__effect::after {
+                    border-radius: calc(map-get($size-map, radius) + 4px);
+                }
+
+                font-size: map-get($size-map, font-size);
+            }
+        }
+    }
+}
+
+@mixin date-range-input() {
+    &__input {
+        border: none;
+        font-size: inherit;
+        background-color: inherit;
+        color: inherit;
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+    }
+}
+
+
+@mixin date-time-panel($root) {
+    &__panel-container {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        color: $text-color;
+
+        #{$root}__separator {
+            position: relative;
+            margin-left: 4px;
+            margin-right: 16px;
+            width: 1px;
+            height: 338px;
+            background-color: $date-range-separator-color;
+            transform: translateY(12px);
+        }
+
+        .TimePanelView__body {
+            column-gap: 2px;
+            width: 68px;
+        }
+
+        .TimePanelView__header {
+            border: none;
+            margin-top: 2px;
+        }
+
+        .TimePanelView__column {
+            height: 298px;
+            row-gap: 2px;
+            border: none;
+
+            &:not(:last-child) {
+                border-right: none;
+            }
+
+            overflow: scroll;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+
+            &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+            }
+
+            .TimePanelView__cell {
+                padding: 0;
+                border-radius: $radius-large;
+
+                &-value {
+                    padding: 6px 7px;
+                }
+            }
+        }
+
+        .TimePanelView__button_ok {
+            @include calendar-button();
+        }
+
+        .TimePanelView__footer {
+            margin-top: 3px;
+        }
+    }
+}

package/scss/mixins/index.scss

@@ -1,2 +1,5 @@
 @import "button";
-@import "card";
+@import "typography";
+@import "scroll";
+@import "customMixins";
+@import "date";

package/scss/mixins/scroll.scss

@@ -0,0 +1,31 @@
+@mixin custom-scroll($thumbColor, $backgroundColor) {
+    scrollbar-color: $thumbColor $backgroundColor;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        border-radius: 3px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 3px;
+        background-color: $backgroundColor;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: $thumbColor;
+    }
+}
+
+@mixin scrollWrapper($maxHeight, $paddingRight: 0, $thumbColor, $backgroundColor) {
+    @include custom-scroll($thumbColor, $backgroundColor);
+    padding-right: $paddingRight;
+    max-height: $maxHeight;
+    overflow: auto;
+}