@schukai/monster 3.51.4 → 3.52.0

package/source/components/style/mixin/skeleton.pcss

@@ -0,0 +1,26 @@
+
+
+@define-mixin skeleton $width, $color:var(--monster-color-gray-3), $height:100% {
+    --monster-skeleton-color: $color;
+    --monster-skeleton-height: $height;
+    --monster-skeleton-width: $width;
+    --monster-skeleton: linear-gradient(90deg, var(--monster-skeleton-color) 0, transparent var(--monster-skeleton-width));
+
+    background-image:
+            var(--monster-skeleton);
+
+    background-size:
+            var(--monster-skeleton-width) var(--monster-skeleton-height);
+
+    background-repeat:
+            no-repeat;
+
+    background-position:
+            0 0;
+
+    color: var(--monster-skeleton-color);
+
+    min-height: 1px;
+
+
+}

package/source/components/style/mixin/spinner.pcss

@@ -0,0 +1,24 @@
+
+
+@define-mixin buildSpinner $colorVar     {
+
+
+    position: relative;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+
+    &::before {
+        content: "";
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 8px solid var(--monster-bg-color-$colorVar);
+        border-top-color: var(--monster-color-$colorVar);
+        animation: monsterAnimationSpinnerKeyFrames 4s ease-in-out infinite;
+    }
+    
+    
+}

package/source/components/style/mixin/typography.pcss

@@ -0,0 +1,52 @@
+
+
+@define-mixin h1 {
+    font-size: 3rem;
+    line-height: 1;   
+    margin-bottom: 1.25rem;
+    font-weight: normal;
+}
+
+@define-mixin h2 {
+    font-size: 2.5rem;
+    line-height: calc(2px + 2ex + 2px);
+    margin-bottom: 1.25rem;
+    font-weight: normal;
+}
+
+@define-mixin h3 {
+    font-size: 2rem;
+    line-height: calc(2px + 2ex + 2px);
+    margin-bottom: 1.25rem;
+    font-weight: normal;
+}
+
+@define-mixin h4 {
+    font-size: 1.5rem;
+    line-height: calc(2px + 2ex + 2px);
+    margin-bottom: 1.25rem;
+    font-weight: normal;
+}
+
+@define-mixin h5 {
+    font-size: 1.4rem;
+    line-height: calc(2px + 2ex + 2px);
+    margin-bottom: 1.25rem;
+    font-weight: bolder;
+}
+
+@define-mixin h6 {
+    font-size: 1.3rem;
+    line-height: calc(2px + 2ex + 2px);
+    margin-bottom: 1.25rem;
+    font-weight: bold;
+}
+ 
+@define-mixin paragraph {
+    font-size: 1rem;
+    line-height: 1.4;
+    font-weight: normal;
+}
+
+
+

package/source/components/style/normalize.pcss

@@ -0,0 +1,14 @@
+@import-normalize;
+
+html {
+    height:100%;
+    min-height:100%;
+}
+
+body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    min-height:99%;
+    word-break: break-word;
+}

package/source/components/style/popper.pcss

@@ -0,0 +1,78 @@
+div[data-monster-role=popper] {
+    box-sizing: border-box;
+    display: none;
+    padding: 1.1em;
+    z-index: var(--monster-z-index-modal);
+    background: var(--monster-bg-color-primary-1);
+    color: var(--monster-color-primary-1);
+    border-radius: var(--monster-border-radius);
+    border-width: var(--monster-border-width);
+    border-style: var(--monster-border-style);
+    border-color: var(--monster-bg-color-primary-4);
+    box-shadow: var(--monster-box-shadow-1);
+}
+
+[data-popper-arrow],
+[data-popper-arrow]::before {
+    position: absolute;
+    width: calc(2 * max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance)));   
+    height: calc(2 * max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance)));
+    background: inherit;
+}
+
+[data-popper-arrow] {
+    visibility: hidden;
+}
+
+[data-popper-arrow]::before {
+    visibility: visible;
+    content: '';
+    transform: rotate(45deg);
+    box-sizing: border-box;
+}
+
+div[data-popper-placement^='top'] > [data-popper-arrow] {
+    bottom: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width)) / 2 );
+}
+
+div[data-popper-placement^='top'] > [data-popper-arrow]:before {
+    border-left: transparent;
+    border-right: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-bottom: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-top: transparent;
+}
+
+div[data-popper-placement^='bottom'] > [data-popper-arrow] {
+    top: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width))  );
+}
+
+div[data-popper-placement^='bottom'] > [data-popper-arrow]:before {
+    border-right: transparent;
+    border-left: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-top: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-bottom: transparent;
+}
+
+div[data-popper-placement^='left'] > [data-popper-arrow] {
+    right: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width))  );
+}
+
+div[data-popper-placement^='left'] > [data-popper-arrow]:before {
+    border-left: transparent;
+    border-right: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-top: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-bottom: transparent;
+}
+
+div[data-popper-placement^='right'] > [data-popper-arrow] {
+    left: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width)) / 2 );
+}
+
+div[data-popper-placement^='right'] > [data-popper-arrow]:before {
+    border-right: transparent;
+    border-left: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-bottom: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
+    border-top: transparent;
+}
+
+

package/source/components/style/property.pcss

@@ -0,0 +1,17 @@
+@import "mixin/property.pcss";
+
+:root,
+::after,
+::before {
+    @mixin defaultFontProperty;
+    @mixin defaultColorProperty;
+    @mixin defaultShadowProperty;
+    @mixin defaultTextProperty;
+    @mixin defaultBorderProperty;
+    @mixin defaultPoperProperty;
+    @mixin defaultZIndexProperty;
+    @mixin defaultSpaceProperty;
+    @mixin defaultBreakPointProperty;
+}
+
+

package/source/components/style/ripple.pcss

@@ -0,0 +1,14 @@
+span.monster-fx-ripple {
+    position: absolute; /* The absolute position we mentioned earlier */
+    border-radius: 50%;
+    transform: scale(0);
+    animation: monster-fx-ripple 600ms linear;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+
+@keyframes monster-fx-ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

package/source/components/style/skeleton.pcss

@@ -0,0 +1,28 @@
+@import "mixin/skeleton.pcss";
+
+@for $i from 10 to 100 by 10 {
+    .monster-skeleton-col-$(i) {
+        @mixin skeleton $(i)%;
+    }    
+}
+
+.monster-skeleton-animated {
+    animation-duration: 2.25s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: shimmer;
+    animation-timing-function: linear;
+    border-radius: 4px;
+}
+
+@keyframes shimmer {
+    0% {
+        filter: brightness(1);
+    }
+    50% {
+        filter: brightness(1.5);
+    }
+    100% {
+        filter: brightness(1);
+    }
+}

package/source/components/style/space.pcss

@@ -0,0 +1,47 @@
+@import "mixin/property.pcss";
+
+
+@for $i from 0 to 7 {
+    .monster-margin-$(i) {
+        margin: var(--monster-space-$(i));
+    }
+
+    .monster-margin-top-$(i) {
+        margin-top: var(--monster-space-$(i));
+    }
+
+    .monster-margin-end-$(i) {
+        margin-left: var(--monster-space-$(i));
+    }
+
+    .monster-margin-bottom-$(i) {
+        margin-bottom: var(--monster-space-$(i));
+    }
+
+    .monster-margin-start-$(i) {
+        margin-left: var(--monster-space-$(i));
+    }
+
+    .monster-padding-$(i) {
+        padding: var(--monster-space-$(i));
+    }
+
+    .monster-padding-top-$(i) {
+        padding-top: var(--monster-space-$(i));
+    }
+
+    .monster-padding-end-$(i) {
+        padding-right: var(--monster-space-$(i));
+    }
+
+    .monster-padding-bottom-$(i) {
+        padding-bottom: var(--monster-space-$(i));
+    }
+
+    .monster-padding-start-$(i) {
+        padding-left: var(--monster-space-$(i));
+    }
+
+}
+
+

package/source/components/style/spinner.pcss

@@ -0,0 +1,6 @@
+
+.monster-spinner {
+    mask: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='red'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
+    height: 100%;
+}
+

package/source/components/style/table.pcss

@@ -0,0 +1,46 @@
+@import "mixin/media.pcss";
+
+th {
+    text-align: inherit;
+}
+
+.monster-table {
+    width: 100%;
+    margin-bottom: 1rem;
+    color: #212529;
+    box-sizing: border-box;
+    border-collapse: collapse;
+}
+
+.monster-table tr {
+    margin: 10px 0;
+}
+
+.monster-table th,
+.monster-table td {
+    padding: 0.75rem;
+    vertical-align: top;
+}
+
+.monster-table thead th {
+    vertical-align: bottom;
+}
+
+.monster-table-container {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+    padding: 8px;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.monster-table tbody tr th, .monster-table tbody tr td {
+    background-color: var(--monster-bg-color-primary-1);
+    border: none;
+}
+
+
+

package/source/components/style/theme.pcss

@@ -0,0 +1,119 @@
+
+@for $i from 1 to 4 {
+
+    .monster-theme-primary-$(i) {
+        background-color: var(--monster-bg-color-primary-$i);
+        color: var(--monster-color-primary-$i);
+    }
+    
+    .monster-theme-primary-disabled-$(i) {
+        background-color: var(--monster-bg-color-primary-disabled-$i);
+        color: var(--monster-color-primary-disabled-$i);
+    }
+
+    .monster-theme-secondary-$(i) {
+        background-color: var(--monster-bg-color-secondary-$i);
+        color: var(--monster-color-secondary-$i);
+    }
+
+    .monster-theme-tertiary-$(i) {
+        background-color: var(--monster-bg-color-tertiary-$i);
+        color: var(--monster-color-tertiary-$i);
+    }
+
+    .monster-theme-destructive-$(i) {
+        background-color: var(--monster-bg-color-destructive-$i);
+        color: var(--monster-color-destructive-$i);
+    }
+
+    .monster-theme-success-$(i) {
+        background-color: var(--monster-bg-color-success-$i);
+        color: var(--monster-color-success-$i);
+    }
+
+    .monster-theme-warning-$(i) {
+        background-color: var(--monster-bg-color-warning-$i);
+        color: var(--monster-color-warning-$i);
+    }
+
+    .monster-theme-error-$(i) {
+        background-color: var(--monster-bg-color-error-$i);
+        color: var(--monster-color-error-$i);
+    }
+
+    .monster-theme-selection-$(i) {
+        background-color: var(--monster-bg-color-selection-$i);
+        color: var(--monster-color-selection-$i);
+    }
+
+    .monster-border-color-$(i) {
+        border-color: var(--monster-color-border-$i);
+    }
+
+    .monster-color-neutral-$(i) {
+        color: var(--monster-color-primary-$i);
+    }
+
+    .monster-bg-color-primary-$(i) {
+        background-color: var(--monster-bg-color-primary-$i);
+    }
+
+    .monster-bg-color-secondary-$(i) {
+        background-color: var(--monster-bg-color-secondary-$i);
+    }
+
+    .monster-bg-color-tertiary-$(i) {
+        background-color: var(--monster-bg-color-tertiary-$i);
+    }    
+   
+    
+    
+    /*** @DEPRECATED since 2023-02-03 */
+    .monster-color-primary-$(i) {
+        background-color: var(--monster-bg-color-primary-$i);
+        color: var(--monster-color-primary-$i);
+    }
+    
+    .monster-color-secondary-$(i) {
+        background-color: var(--monster-bg-color-secondary-$i);
+        color: var(--monster-color-secondary-$i);
+    }
+        
+    .monster-color-tertiary-$(i) {
+        background-color: var(--monster-bg-color-tertiary-$i);
+        color: var(--monster-color-tertiary-$i);
+    }
+    
+    .monster-color-destructive-$(i) {
+        background-color: var(--monster-bg-color-destructive-$i);
+        color: var(--monster-color-destructive-$i);
+    }
+    
+    .monster-color-success-$(i) {
+        background-color: var(--monster-bg-color-success-$i);
+        color: var(--monster-color-success-$i);
+    }
+    
+    .monster-color-warning-$(i) {
+        background-color: var(--monster-bg-color-warning-$i);
+        color: var(--monster-color-warning-$i);
+    }
+    
+    .monster-color-error-$(i) {
+        background-color: var(--monster-bg-color-error-$i);
+        color: var(--monster-color-error-$i);
+    }
+    
+    .monster-color-selection-$(i) {
+        background-color: var(--monster-bg-color-selection-$i);
+        color: var(--monster-color-selection-$i);
+    }
+    
+
+    
+    
+    
+    
+    
+}
+