@posiwise/shared-components 0.0.9 → 0.0.11

package/assets/scss/custom-bootstrap/_badge.scss

@@ -0,0 +1,468 @@
+.badge {
+    font-size: 85%;
+    font-weight: 500;
+    letter-spacing: 0.3px;
+    padding: 4px 8px;
+}
+
+.rounded-pill {
+    padding: 3px 6px;
+}
+
+// warning badges
+.bg-warning-1 {
+    background-color: map-get($warning, lighten-1);
+}
+
+.bg-warning-2 {
+    background-color: map-get($warning, darken-1);
+}
+
+.bg-warning-3 {
+    background-color: map-get($warning, lighten-4);
+}
+
+.bg-warning-4 {
+    background-color: map-get($warning, darken-4);
+}
+
+.bg-warning-5 {
+    background-color: map-get($warning, lighten-3);
+}
+
+.bg-warning-6 {
+    background-color: map-get($warning, darken-3);
+}
+
+.bg-warning-7 {
+    background-color: map-get($warning, lighten-2);
+}
+
+.bg-warning-8 {
+    background-color: map-get($warning, darken-2);
+}
+
+.bg-warning-9 {
+    background-color: map-get($warning, accent-4);
+}
+
+.bg-warning-10 {
+    background-color: map-get($red-color, lighten-4);
+}
+
+.bg-warning-11 {
+    background-color: map-get($red-color, accent-1);
+}
+
+.bg-warning-12 {
+    background-color: map-get($pink, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-13 {
+    background-color: map-get($pink, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-14 {
+    background-color: map-get($pink, lighten-4);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-15 {
+    background-color: map-get($pink, accent-1);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-16 {
+    background-color: map-get($pink, accent-4);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-17 {
+    background-color: map-get($pink, lighten-2);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-18 {
+    background-color: map-get($pink, darken-3);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-19 {
+    background-color: map-get($pink, darken-4);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-20 {
+    background-color: map-get($default, lighten-1);
+}
+
+.bg-warning-21 {
+    background-color: map-get($default, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-22 {
+    background-color: map-get($default, lighten-4);
+}
+
+.bg-warning-23 {
+    background-color: map-get($default, darken-4);
+    color: rgb(255 255 255);
+}
+
+.bg-default-24 {
+    background-color: map-get($default, darken-3);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-25 {
+    background-color: map-get($default, lighten-2);
+}
+
+.bg-default-26 {
+    background-color: map-get($default, accent-4);
+    color: rgb(255 255 255);
+}
+
+.bg-warning-27 {
+    background-color: map-get($default, accent-1);
+}
+
+// default badges
+
+.bg-default-1 {
+    background-color: map-get($default, lighten-1);
+}
+
+.bg-default-2 {
+    background-color: map-get($default, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-default-3 {
+    background-color: map-get($default, lighten-3);
+}
+
+.bg-default-4 {
+    background-color: map-get($default, darken-4);
+    color: rgb(255 255 255);
+}
+
+.bg-default-5 {
+    background-color: map-get($default, darken-3);
+    color: rgb(255 255 255);
+}
+
+.bg-default-6 {
+    background-color: map-get($default, accent-4);
+    color: rgb(255 255 255);
+}
+
+.bg-default-7 {
+    background-color: map-get($default, accent-1);
+    color: rgb(255 255 255);
+}
+
+.bg-default-8 {
+    background-color: map-get($pink, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-default-9 {
+    background-color: map-get($pink, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-default-10 {
+    background-color: map-get($pink, lighten-4);
+    color: rgb(255 255 255);
+}
+
+.bg-default-11 {
+    background-color: map-get($pink, accent-1);
+    color: rgb(255 255 255);
+}
+
+.bg-default-12 {
+    background-color: map-get($pink, accent-4);
+    color: rgb(255 255 255);
+}
+
+.bg-default-13 {
+    background-color: map-get($pink, lighten-2);
+    color: rgb(255 255 255);
+}
+
+.bg-default-14 {
+    background-color: map-get($pink, darken-3);
+    color: rgb(255 255 255);
+}
+
+.bg-default-15 {
+    background-color: map-get($pink, darken-4);
+    color: rgb(255 255 255);
+}
+
+.bg-default-16 {
+    background-color: map-get($warning, lighten-1);
+}
+
+.bg-default-17 {
+    background-color: map-get($warning, darken-1);
+}
+
+.bg-default-18 {
+    background-color: map-get($warning, lighten-4);
+}
+
+.bg-default-19 {
+    background-color: map-get($warning, darken-4);
+}
+
+.bg-default-20 {
+    background-color: map-get($warning, lighten-3);
+}
+
+.bg-default-21 {
+    background-color: map-get($warning, darken-3);
+}
+
+.bg-default-22 {
+    background-color: map-get($warning, lighten-2);
+}
+
+.bg-default-23 {
+    background-color: map-get($warning, darken-2);
+}
+
+.bg-default-24 {
+    background-color: map-get($warning, accent-4);
+}
+
+// blue-grey badges
+
+.bg-blue-grey {
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-1 {
+    background-color: map-get($blue-grey, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-2 {
+    background-color: map-get($blue-grey, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-3 {
+    background-color: map-get($blue-grey, lighten-4);
+}
+
+.bg-blue-grey-4 {
+    background-color: map-get($blue-grey, darken-4);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-5 {
+    background-color: map-get($blue-grey, darken-3);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-6 {
+    background-color: map-get($blue-grey, accent-4);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-7 {
+    background-color: map-get($blue-grey, accent-2);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-8 {
+    background-color: map-get($warning, lighten-1);
+}
+
+.bg-blue-grey-9 {
+    background-color: map-get($warning, darken-1);
+}
+
+.bg-blue-grey-10 {
+    background-color: map-get($warning, lighten-4);
+}
+
+.bg-blue-grey-11 {
+    background-color: map-get($warning, darken-4);
+}
+
+.bg-blue-grey-12 {
+    background-color: map-get($warning, lighten-3);
+}
+
+.bg-blue-grey-13 {
+    background-color: map-get($warning, darken-3);
+}
+
+.bg-blue-grey-14 {
+    background-color: map-get($warning, lighten-2);
+}
+
+.bg-blue-grey-15 {
+    background-color: map-get($warning, darken-2);
+}
+
+.bg-blue-grey-16 {
+    background-color: map-get($warning, accent-4);
+}
+
+.bg-blue-grey-17 {
+    background-color: map-get($pink, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-18 {
+    background-color: map-get($pink, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-19 {
+    background-color: map-get($pink, lighten-4);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-20 {
+    background-color: map-get($pink, accent-1);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-21 {
+    background-color: map-get($pink, accent-4);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-22 {
+    background-color: map-get($pink, lighten-2);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-23 {
+    background-color: map-get($pink, darken-3);
+    color: rgb(255 255 255);
+}
+
+.bg-blue-grey-24 {
+    background-color: map-get($pink, darken-4);
+    color: rgb(255 255 255);
+}
+
+// pink bages
+
+.bg-pink {
+    color: rgb(255 255 255);
+}
+
+.bg-pink-1 {
+    background-color: map-get($pink, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-pink-2 {
+    background-color: map-get($pink, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-pink-3 {
+    background-color: map-get($pink, lighten-4);
+    color: rgb(255 255 255);
+}
+
+.bg-pink-4 {
+    background-color: map-get($pink, darken-4);
+    color: rgb(255 255 255);
+}
+
+// purple badges
+
+.bg-purple {
+    color: rgb(255 255 255);
+}
+
+.bg-purple-1 {
+    background-color: map-get($purple, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-purple-2 {
+    background-color: map-get($purple, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-purple-3 {
+    background-color: map-get($purple, lighten-4);
+    color: rgb(255 255 255);
+}
+
+.bg-purple {
+    color: rgb(255 255 255);
+}
+
+// cyan badges
+
+.bg-cyan {
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-1 {
+    background-color: map-get($cyan, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-1 {
+    background-color: map-get($cyan, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-2 {
+    background-color: map-get($cyan, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-3 {
+    background-color: map-get($cyan, lighten-4);
+}
+
+.bg-cyan-4 {
+    background-color: map-get($cyan, darken-4);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-5 {
+    background-color: map-get($cyan, lighten-3);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-6 {
+    background-color: map-get($cyan, lighten-1);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-7 {
+    background-color: map-get($cyan, darken-1);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-8 {
+    background-color: map-get($cyan, lighten-4);
+}
+
+.bg-cyan-9 {
+    background-color: map-get($cyan, darken-4);
+    color: rgb(255 255 255);
+}
+
+.bg-cyan-10 {
+    background-color: map-get($cyan, lighten-3);
+    color: rgb(255 255 255);
+}

package/assets/scss/custom-bootstrap/_bootstrap_variables.scss

@@ -0,0 +1,30 @@
+// What you put here will override the default bootstrap variables
+
+// WE ARE NOT USING THE THEME-COLORS AT THE MOMENT
+$theme-colors: (
+    'primary': rgb(0 123 255),
+    'secondary': rgb(108 117 125),
+    'success': rgb(40 167 69),
+    'info': rgb(23 162 184),
+    'warning': rgb(255 193 7),
+    'danger': rgb(220 53 69),
+    'light': rgb(248 249 250),
+    'dark': rgb(52 58 64)
+);
+
+// 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%,
+        90: 90%,
+        100: 100%,
+        auto: auto
+    ),
+    $sizes
+);
+
+@import 'bootstrap/scss/bootstrap.scss';

package/assets/scss/custom-bootstrap/_buttons.scss

@@ -0,0 +1,84 @@
+// Custom round buttons
+.btn-round {
+    border-radius: $border-radius-extreme;
+}
+
+.btn:active,
+.btn.active {
+    background-image: initial;
+}
+
+button:hover {
+    cursor: pointer;
+}
+
+.btn-group > .btn.active {
+    z-index: 0;
+}
+
+.btn {
+    border-radius: 2px;
+}
+
+.btn-circle {
+    border-radius: 100%;
+    padding: 10px;
+}
+
+.btn-danger {
+    background-color: rgb(250 88 56);
+    border-color: rgb(250 88 56);
+    color: rgb(255 255 255);
+}
+
+.btn-link {
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: none !important;
+    }
+}
+
+// Buttons
+
+.input-group {
+    .btn {
+        &[class*='btn-'] {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.btn-group,
+.input-group {
+    span {
+        &:first-child:not(:last-child) {
+            .btn.dropdown-toggle {
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+            }
+        }
+
+        &:last-child:not(:first-child) {
+            .btn.dropdown-toggle {
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+            }
+        }
+
+        &:not(:last-child):not(:first-child) {
+            .btn.dropdown-toggle {
+                border-radius: 0;
+            }
+        }
+    }
+}
+
+.btn-group-vertical {
+    .btn {
+        &[class*='btn-'] {
+            margin-bottom: 0;
+        }
+    }
+}