npm - empower-container - Versions diffs - 0.1.21 → 0.1.24 - Mend

empower-container 0.1.21 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/README.md +378 -376
package/dist/cjs/DatetimeFormatter.d.ts +3 -3
package/dist/cjs/DatetimeFormatter.js +389 -389
package/dist/cjs/Information.d.ts +10 -10
package/dist/cjs/Information.js +63 -63
package/dist/cjs/MenuBar.d.ts +24 -24
package/dist/cjs/MenuBar.js +539 -539
package/dist/cjs/Modal.d.ts +33 -33
package/dist/cjs/Modal.js +44 -44
package/dist/cjs/assets/Asset.d.ts +17 -16
package/dist/cjs/assets/Asset.js +31 -30
package/dist/cjs/constants/Constant.d.ts +15 -15
package/dist/cjs/constants/Constant.js +35 -35
package/dist/cjs/index.d.ts +3 -3
package/dist/cjs/index.js +10 -10
package/dist/cjs/inputs/Input.d.ts +25 -25
package/dist/cjs/inputs/Input.js +106 -106
package/dist/cjs/inputs/InputSelectionHandler.d.ts +3 -3
package/dist/cjs/inputs/InputSelectionHandler.js +36 -36
package/dist/cjs/inputs/Select.d.ts +28 -28
package/dist/cjs/inputs/Select.js +403 -403
package/dist/esm/DatetimeFormatter.d.ts +3 -3
package/dist/esm/DatetimeFormatter.js +385 -385
package/dist/esm/Information.d.ts +10 -10
package/dist/esm/Information.js +38 -38
package/dist/esm/MenuBar.d.ts +24 -24
package/dist/esm/MenuBar.js +534 -534
package/dist/esm/Modal.d.ts +33 -33
package/dist/esm/Modal.js +39 -39
package/dist/esm/assets/Asset.d.ts +17 -16
package/dist/esm/assets/Asset.js +28 -27
package/dist/esm/constants/Constant.d.ts +15 -15
package/dist/esm/constants/Constant.js +32 -32
package/dist/esm/index.d.ts +3 -3
package/dist/esm/index.js +3 -3
package/dist/esm/inputs/Input.d.ts +25 -25
package/dist/esm/inputs/Input.js +104 -104
package/dist/esm/inputs/InputSelectionHandler.d.ts +3 -3
package/dist/esm/inputs/InputSelectionHandler.js +31 -31
package/dist/esm/inputs/Select.d.ts +28 -28
package/dist/esm/inputs/Select.js +399 -399
package/dist/scss/components/_modal.scss +66 -66
package/dist/scss/elements/_button.scss +133 -107
package/dist/scss/elements/_index.scss +1 -1
package/dist/scss/elements/_popover.scss +7 -7
package/dist/scss/foundation/_colors.scss +59 -59
package/dist/scss/foundation/_mixins.scss +40 -40
package/dist/scss/foundation/_normalize.scss +203 -203
package/dist/scss/foundation/_settings.scss +36 -36
package/dist/scss/foundation/_typography.scss +94 -94
package/dist/scss/library/_information.scss +63 -67
package/dist/scss/library/_input.scss +37 -37
package/dist/scss/library/_menubar.scss +240 -255
package/dist/scss/library/_select.scss +258 -258
package/dist/scss/style.scss +38 -23
package/package.json +62 -62
package/tscnofig.old +26 -26

package/dist/scss/library/_menubar.scss CHANGED Viewed

@@ -1,255 +1,240 @@
-.em-card-belt {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    min-height: 40px;
-    padding: 20px 15px;
-    .em-dropdown {
-        position: relative;
-    }
-    .em-belt-left {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        .belt-info {
-            margin-left: 10px;
-        }
-    }
-    .em-beltleft-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 20px;
-        > .belt-icon {
-            margin-right: 10px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            svg {
-                path, rect {
-                    fill: $blue-light4;
-                }
-            }
-        }
-        .icon-back {
-            height: 40px;
-            width: 40px;
-            min-width: 40px;
-            margin-right: 10px;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: $transition;
-            box-shadow: none;
-            &:hover {
-                svg {
-                    transition: $transition;
-                    transform: translateX(-2px);
-                }
-            }
-        }
-        .belt-icon-check {
-            margin-right: 10px;
-            > div {
-                display: flex;
-            }
-        }
-        .belt-title {
-            margin-block: 10px;
-            flex: none;
-            h6 {
-                text-transform: uppercase;
-                font-size: .875rem;
-                color: $gray-dark;
-                margin: 0;
-            }
-        }
-    }
-    .em-beltleft-cta {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 20px;
-        a {
-            margin-right: 10px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            max-height: 40px;
-            padding: 10px 20px;
-        }
-        .em-button{
-            &:not(:first-child){
-                background-color: transparent;
-                color: $green-dark;
-                box-shadow: inset 0 0 0 1px $green;
-                svg{
-                    margin-right: 10px;
-                    path, rect, circle {
-                    transition: $transition;
-                    fill: $green;;
-                    }
-                }
-                span{
-                    color: $gray-light4;
-                }
-                &:hover{
-                    background-color: $blue-light1;
-                    box-shadow: none;
-                    span{
-                        color: $gray;
-                    }
-                }
-            }
-        }
-    }
-    .em-belt-right {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        > a, > div {
-            margin-left: 10px;
-        }
-        .pagination-summary, .belt-dropdown {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 40px;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 10px;
-            box-shadow: inset 0 0 0 1px $blue-light2;
-            color: $gray-dark;
-            text-decoration: none;
-            font-size: .875rem;
-            transition: $transition;
-            &:hover {
-                box-shadow: inset 0 0 0 1px $blue-light4;
-            }
-        }
-        .pagination-summary {
-            font-weight: $font-regular;
-        }
-        .belt-dropdown {
-            span {
-                font-size: .875rem;
-                font-weight: 700;
-                color: $gray-light4;
-            }
-            .icon-arrowdown {
-                height: 20px;
-                width: 20px;
-                margin-left: 15px;
-                transition: $transition;
-            }
-            .icon-add  {
-                display: flex;
-                align-items: center;
-                margin-right: 10px;
-                svg path  {
-                    fill: $gray-light4;
-                }
-            }
-            &:hover{
-                span {
-                    color: $gray-dark;
-                }
-                .icon-arrowdown {
-                    transform: translateY(2px);
-                    svg path {
-                        fill: $gray-light4;
-                    }
-                }
-            }
-        }
-        .belt-prev, .belt-next {
-            padding: 10px;
-            height: 40px;
-            width: 40px;
-            min-width: 40px;
-            box-shadow: inset 0 0 0 1px $blue-light2;
-            border-radius: 10px;
-            transition: $transition;
-            .belt-icon {
-                height: 20px;
-                width: 20px;
-                background: 50% no-repeat;
-                transition: $transition;
-            }
-            &:hover {
-                box-shadow: inset 0 0 0 1px $blue-light4;
-                .belt-icon {
-                    svg path {
-                        fill: $gray-light4;
-                    }
-                }
-            }
-        }
-        .belt-prev {
-            &:hover .belt-icon {
-                transform: translateX(-2px);
-            }
-        }
-        .belt-next {
-            &:hover .belt-icon {
-                transform: translateX(2px);
-            }
-        }
-        .modal-close {
-            height: 40px;
-            width: 40px;
-            min-width: 40px;
-            padding: 10px;
-            box-shadow: none;
-            border-radius: 10px;
-            transition: $transition;
-            &:hover {
-                background-color: $blue-light1;
-                box-shadow: inset 0 0 0 5px $blue-light1;
-            }
-        }
-    }
-}
+.em-card-belt {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 40px;
+    padding: 20px 15px;
+    .em-dropdown {
+        position: relative;
+    }
+    .em-belt-left {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        .belt-info {
+            margin-left: 10px;
+        }
+    }
+    .em-beltleft-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 20px;
+        > .belt-icon {
+            margin-right: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            svg {
+                path, rect {
+                    fill: $blue-light4;
+                }
+            }
+        }
+        .icon-back {
+            height: 40px;
+            width: 40px;
+            min-width: 40px;
+            margin-right: 10px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: $transition;
+            box-shadow: none;
+            &:hover {
+                svg {
+                    transition: $transition;
+                    transform: translateX(-2px);
+                }
+            }
+        }
+        .belt-icon-check {
+            margin-right: 10px;
+            > div {
+                display: flex;
+            }
+        }
+        .belt-title {
+            margin-block: 10px;
+            flex: none;
+            h6 {
+                text-transform: uppercase;
+                font-size: .875rem;
+                color: $gray-dark;
+                margin: 0;
+            }
+        }
+    }
+    .em-beltleft-cta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 20px;
+        a {
+            margin-right: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            max-height: 40px;
+            padding: 10px 20px;
+        }
+        .em-button{
+            &:not(:first-child){
+                background-color: transparent;
+                color: $green-dark;
+                box-shadow: inset 0 0 0 1px $green;
+                svg{
+                    margin-right: 10px;
+                    path, rect, circle {
+                    transition: $transition;
+                    fill: $green;;
+                    }
+                }
+                span{
+                    color: $gray-light4;
+                }
+                &:hover{
+                    background-color: $blue-light1;
+                    box-shadow: none;
+                    span{
+                        color: $gray;
+                    }
+                }
+            }
+        }
+    }
+    .em-belt-right {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        > a, > div {
+            margin-left: 10px;
+        }
+        .pagination-summary, .belt-dropdown {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 40px;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 10px;
+            box-shadow: inset 0 0 0 1px $blue-light2;
+            color: $gray-dark;
+            text-decoration: none;
+            font-size: .875rem;
+            transition: $transition;
+            &:hover {
+                box-shadow: inset 0 0 0 1px $blue-light4;
+            }
+        }
+        .pagination-summary {
+            font-weight: $font-regular;
+        }
+        .belt-dropdown {
+            span {
+                font-size: .875rem;
+                font-weight: 700;
+                color: $gray-light4;
+            }
+            .icon-arrowdown {
+                height: 20px;
+                width: 20px;
+                margin-left: 15px;
+                transition: $transition;
+            }
+            .icon-add  {
+                display: flex;
+                align-items: center;
+                margin-right: 10px;
+                svg path  {
+                    fill: $gray-light4;
+                }
+            }
+            &:hover{
+                span {
+                    color: $gray-dark;
+                }
+                .icon-arrowdown {
+                    transform: translateY(2px);
+                    svg path {
+                        fill: $gray-light4;
+                    }
+                }
+            }
+        }
+        .belt-prev, .belt-next {
+            padding: 10px;
+            height: 40px;
+            width: 40px;
+            min-width: 40px;
+            box-shadow: inset 0 0 0 1px $blue-light2;
+            border-radius: 10px;
+            transition: $transition;
+            .belt-icon {
+                height: 20px;
+                width: 20px;
+                background: 50% no-repeat;
+                transition: $transition;
+            }
+            &:hover {
+                box-shadow: inset 0 0 0 1px $blue-light4;
+                .belt-icon {
+                    svg path {
+                        fill: $gray-light4;
+                    }
+                }
+            }
+        }
+        .belt-prev {
+            &:hover .belt-icon {
+                transform: translateX(-2px);
+            }
+        }
+        .belt-next {
+            &:hover .belt-icon {
+                transform: translateX(2px);
+            }
+        }
+    }
+}