@micromag/core 0.3.832 → 0.4.4

package/{scss/_placeholders.scss → styles/shared.module.css}

@@ -1,7 +1,5 @@
-@import './variables';
-
 /* Utils */
-%hide-scrollbars {
+.hideScrollbars {
     scrollbar-width: none;
 
     &::-webkit-scrollbar {
@@ -10,87 +8,89 @@
 }
 
 /* Reset */
-%reset-viewer-fonts {
+.resetViewerFonts {
     font-family: Helvetica, Arial, sans-serif;
     font-size: 16px;
     font-weight: normal;
     line-height: 1.1;
 }
 
-%reset-viewer-elements {
-    margin: 0;
+.resetViewerElements {
     padding: 0;
+    margin: 0;
 }
 
-%reset-viewer {
-    @extend %reset-viewer-fonts;
-
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box; // 1
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p,
-    ul,
-    ol,
-    dl,
-    li,
-    address,
-    blockquote,
-    pre,
-    figure,
-    caption,
-    label,
-    legend {
-        @extend %reset-viewer-elements;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p,
-    li {
+.resetViewer {
+    composes: resetviewerfonts;
+
+    & *,
+    & *::before,
+    & *::after {
+        box-sizing: border-box;
+    }
+
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6,
+    & p,
+    & ul,
+    & ol,
+    & dl,
+    & li,
+    & address,
+    & blockquote,
+    & pre,
+    & figure,
+    & caption,
+    & label,
+    & legend {
+        padding: 0;
+        margin: 0;
+    }
+
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6,
+    & p,
+    & li {
         font-weight: inherit;
     }
 
-    mark, .mark {
+    & mark,
+    & .mark {
         color: inherit;
     }
 }
 
-%reset-button {
-    display: inline-block;
+.resetButton {
     position: relative;
+    display: inline-block;
     padding: 0;
     border: 0;
+    appearance: none;
     background: transparent;
     color: inherit;
-    font-family: inherit;
     cursor: pointer;
-    appearance: none;
+    font-family: inherit;
 }
 
-%reset-input {
+.resetInput {
     padding: 0;
     border: 0;
+    appearance: none;
     background: transparent;
-    font-family: inherit;
     cursor: pointer;
-    appearance: none;
+    font-family: inherit;
 }
 
 /* Container */
-%fullscreen {
+.fullscreen {
     position: absolute;
     top: 0;
     left: 0;
@@ -98,11 +98,11 @@
     height: 100%;
 }
 
-%screen {
+.screen {
     position: relative;
+    overflow: hidden;
     width: 100%;
     height: 100%;
-    overflow: hidden;
 
     &.disabled {
         overflow: hidden;
@@ -115,74 +115,75 @@
     }
 
     &.placeholder {
-        .content {
+        & .content {
             position: relative;
             padding: 6px;
         }
     }
 }
 
-%empty {
+.empty {
+    border: dashed 2px var(--mm-gray-800);
     margin: 5px auto;
-    border: dashed 2px $gray-800;
-    color: $gray-800;
+    color: var(--mm-gray-800);
 }
 
-%empty-text {
+.emptyText {
     width: 100%;
     height: 100px;
 }
 
-%empty-image {
+.emptyImage {
     width: 100%;
     height: 200px;
 }
 
 /* Text styles */
-%text-inner-styles {
-    em,
-    i {
+.textInnerStyles {
+    & em,
+    & i {
         font-style: italic;
     }
 
-    strong,
-    b {
+    & strong,
+    & b {
         font-weight: bold;
     }
 
-    p {
+    & p {
         margin-top: 0.5em;
         margin-bottom: 0.5em;
     }
 
-    mark {
+    & mark {
         padding: 0;
         box-decoration-break: clone;
     }
 }
-%text-styles {
-    @extend %reset-viewer-fonts;
-    @extend %text-inner-styles;
+
+.textStyles {
+    composes: resetviewerfonts;
+    composes: textinnerstyles;
     line-height: 1.3;
 
-    h2 {
+    & h2 {
         font-size: 2em;
     }
 
-    h3 {
+    & h3 {
         font-size: 1.75em;
     }
 
-    h4 {
+    & h4 {
         font-size: 1.5em;
     }
 
-    blockquote {
+    & blockquote {
         padding: 0;
         padding-left: 1em;
     }
 
-    img {
+    & img {
         display: block;
         width: auto;
         max-width: 100%;
@@ -190,44 +191,44 @@
     }
 }
 
-%flex {
+/* Layout */
+.flex {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
 }
 
-%flex-full {
+.flexFull {
     display: flex;
+    width: 100%;
+    height: 100%;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    height: 100%;
 }
 
-// TODO: remove this
-
-%placeholder-full {
+.placeholderFull {
     width: 100%;
 }
 
-%placeholder-center {
+.placeholderCenter {
     margin-right: auto;
     margin-left: auto;
 }
 
-%placeholder-left {
-    float: left;
+.placeholderLeft {
     clear: both;
+    float: left;
 }
 
-%placeholder-right {
-    float: right;
+.placeholderRight {
     clear: both;
+    float: right;
 }
 
-%form-disabled {
+/* Form */
+.formDisabled {
     position: absolute;
     z-index: 0;
     top: 0;
@@ -235,7 +236,7 @@
     width: 100%;
 }
 
-%form-transitions {
+.formTransitions {
     position: relative;
 
     &.enterRight,
@@ -264,8 +265,8 @@
 
     &.enterActiveHorizontal,
     &.enterActiveVertical {
-        transform: translate(0, 0);
         opacity: 1;
+        transform: translate(0, 0);
     }
 
     &.enterActiveHorizontal {
@@ -277,21 +278,25 @@
     }
 
     &.leave {
-        @extend %form-disabled;
-        transform: translate(0, 0);
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        width: 100%;
         opacity: 1;
+        transform: translate(0, 0);
     }
 
     &.leaveActiveRight,
     &.leaveActiveLeft {
-        transition: transform 0.2s ease-out, opacity 0.2s ease-out;
         opacity: 0.5;
+        transition: transform 0.2s ease-out, opacity 0.2s ease-out;
     }
 
     &.leaveActiveTop,
     &.leaveActiveBottom {
-        transition: transform 0.5s ease-out, opacity 0.5s ease-out;
         opacity: 0.5;
+        transition: transform 0.5s ease-out, opacity 0.5s ease-out;
     }
 
     &.leaveActiveRight {
@@ -311,9 +316,10 @@
     }
 }
 
-%focus-outline {
+/* Focus */
+.focusOutline {
     &:focus-visible {
-        outline: 3px solid $purple;
+        outline: 3px solid var(--mm-purple);
         outline-offset: 4px;
     }
 }

package/styles/slideshow.module.css

@@ -0,0 +1,28 @@
+.container {
+    position: relative;
+    overflow: hidden;
+
+    .items {
+        width: 100%;
+        height: 100%;
+    }
+
+    .item {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transition: transform 0.3s ease-out;
+
+        &.prev {
+            transform: translateX(-100%);
+        }
+
+        &.current {
+            transform: translateX(0);
+        }
+
+        &.next {
+            transform: translateX(100%);
+        }
+    }
+}

package/styles/spinner.module.css

@@ -0,0 +1,43 @@
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+}
+
+.container {
+    display: block;
+    width: 40px;
+    height: 40px;
+
+    .path {
+        color: currentcolor;
+        stroke-linecap: round;
+    }
+
+    &.animated {
+        animation: rotate 2s linear infinite;
+
+        .path {
+            animation: dash 1.5s ease-in-out infinite;
+        }
+    }
+
+}
+

package/styles/styles.css

@@ -0,0 +1 @@
+@import '@micromag/core/assets/css/styles.css';

package/styles/survey-answer.module.css

@@ -0,0 +1,18 @@
+.container {
+    display: flex;
+    align-items: center;
+    mix-blend-mode: difference;
+
+    .block {
+        flex-grow: 1;
+    }
+
+    .percent {
+        margin-left: 4px;
+    }
+
+    .percentIcon {
+        padding: 1px;
+        color: rgb(var(--mm-white), 0.6);
+    }
+}

package/styles/tabs.module.css

@@ -0,0 +1,4 @@
+.container {
+    position: relative;
+    display: inline-block;
+}

package/styles/theme.css

@@ -0,0 +1,84 @@
+:root {
+    /* Colors */
+    --mm-white: #fff;
+    --mm-black: #1c1c1c;
+    --mm-purple: #a13dff;
+    --mm-red: #ff2945;
+    --mm-green: #0ed88f;
+    --mm-blue: #2151ff;
+    --mm-yellow: #ffe535;
+
+    /* Theme aliases */
+    --mm-primary: var(--mm-purple);
+    --mm-secondary: var(--mm-gray-200);
+    --mm-info: var(--mm-blue);
+    --mm-light: var(--mm-white);
+    --mm-dark: #343434;
+
+    /* Gray scale */
+    --mm-gray-100: #f5f5f5;
+    --mm-gray-200: #e9e9e9;
+    --mm-gray-300: #dedede;
+    --mm-gray-400: #b3b3b3;
+    --mm-gray-500: #adadad;
+    --mm-gray-600: #6c6c6c;
+    --mm-gray-700: #494949;
+    --mm-gray-800: #343434;
+    --mm-gray-900: #2b2b2b;
+
+    /* Typography */
+    --mm-font-family-sans-serif: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --mm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+        'Courier New', monospace;
+    --mm-font-weight-normal: 400;
+    --mm-font-weight-bold: 600;
+    --mm-font-size-sm: 0.875rem;
+
+    /* Input/Form variables */
+    --mm-input-bg: hsla(0, 0%, 100%, 0.07);
+    --mm-input-color: var(--mm-white);
+    --mm-input-border-width: 0;
+    --mm-input-border-color: transparent;
+    --mm-input-border-radius: 0.375rem;
+    --mm-input-border-radius-sm: 0.25rem;
+    --mm-input-border-radius-lg: 0.5rem;
+    --mm-input-line-height: 1.4;
+    --mm-input-font-size: 1rem;
+    --mm-input-font-size-sm: 0.875rem;
+    --mm-input-font-size-lg: 1.25rem;
+    --mm-input-btn-padding-y: 0.5rem;
+    --mm-input-btn-padding-y-sm: 0.25rem;
+    --mm-input-btn-padding-y-lg: 0.5rem;
+    --mm-input-btn-padding-x: 0.75rem;
+    --mm-input-btn-padding-x-sm: 0.75rem;
+    --mm-input-btn-padding-x-lg: 1.3rem;
+    --mm-input-btn-focus-color: rgba(161, 61, 255, 0.4);
+
+    /* Body */
+    --mm-body-bg: var(--mm-black);
+    --mm-body-color: var(--mm-gray-100);
+
+    /* Spacing */
+    --mm-spacer: 1rem;
+
+    /* Border */
+    --mm-border-color: #dee2e6;
+
+    /* Easing functions */
+    --mm-ease-in-bounce: cubic-bezier(0.075, 1.5, 0.35, 0.95);
+    --mm-ease-in-out-bounce: cubic-bezier(0.9, -0.5, 0.1, 1.5);
+    --mm-ease-in-out-soft-sine: cubic-bezier(0.4, 0, 0.6, 1);
+    --mm-ease-in-out-sine: cubic-bezier(0.6, 0, 0.4, 1);
+    --mm-ease-in-out-hard-sine: cubic-bezier(0.9, 0, 0.1, 1);
+    --mm-ease-in-ramp: cubic-bezier(0.6, 0, 1, 0.5);
+    --mm-ease-out-ramp: cubic-bezier(0, 0.6, 0.5, 1);
+    --mm-ease-in-kickback: cubic-bezier(0.41, 1.69, 0.04, 0.67);
+    --mm-ease-in-yo: cubic-bezier(0.21, 2.59, 0, 0.9);
+    --mm-ease-in-bump: cubic-bezier(0.4, 1.69, 0, 1);
+
+    /* Pre-computed rgba values used in component styles */
+    --mm-white-60: rgba(255, 255, 255, 0.6);
+    --mm-black-50: rgba(28, 28, 28, 0.5);
+}

package/styles/transition.module.css

@@ -0,0 +1,9 @@
+.container {
+    &.fullscreen {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

package/{scss/vendor.scss → styles/vendor.css}

@@ -1,21 +1,25 @@
 /* stylelint-disable selector-class-pattern */
+
+/* Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-@import './variables';
-@import './placeholders';
-@import './mixins';
-@import '~bootstrap/scss/bootstrap';
+
+/* Bootstrap (pre-compiled) */
+@import 'bootstrap/dist/css/bootstrap.css';
+
+/* Theme overrides */
+@import './bootstrap-overrides.css';
+@import './bootstrap-patches.css';
+
+/* Uppy */
 @import '@uppy/core/css/style.min.css';
 @import '@uppy/dashboard/css/style.min.css';
 
-// TODO add more when needed
-@import '~@panneau/fields/scss/styles';
-@import '~@panneau/displays/scss/styles';
-// @import '~@panneau/actions/scss/styles';
-// @import '~@panneau/forms/scss/styles';
-// @import '~@panneau/lists/scss/styles';
-@import '~@panneau/filters/scss/styles';
-// @import '~@panneau/modals/scss/styles';
+/* Panneau packages */
+@import '@panneau/fields/assets/css/styles.css';
+@import '@panneau/displays/assets/css/styles.css';
+@import '@panneau/filters/assets/css/styles.css';
 
+/* Panneau elements */
 @import '@panneau/element-button/assets/css/styles.css';
 @import '@panneau/element-dropdown/assets/css/styles.css';
 @import '@panneau/element-form-group/assets/css/styles.css';
@@ -26,21 +30,3 @@
 @import '@panneau/element-media-card/assets/css/styles.css';
 @import '@panneau/element-media-player/assets/css/styles.css';
 @import '@panneau/medias/assets/css/styles.css';
-
-.container-small {
-    @include make-container();
-
-    @each $breakpoint, $container-small-max-width in $container-small-max-widths {
-        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-            max-width: $container-small-max-width;
-        }
-    }
-}
-
-.dropdown-menu-start {
-    left: 0;
-}
-
-.dropdown-menu-end {
-    right: 0;
-}

package/styles/video-360.module.css

@@ -0,0 +1,15 @@
+.container {
+    .box {
+        flex-direction: column;
+    }
+
+    .icon {
+        margin-bottom: 5px;
+        color: var(--mm-black);
+    }
+
+    .label {
+        color: var(--mm-black);
+        font-size: 0.75em;
+    }
+}

package/scss/_mixins.scss

@@ -1,34 +0,0 @@
-@mixin clearfix {
-    &::after {
-        content: '';
-        display: table;
-        clear: both;
-    }
-}
-
-@mixin background-grid($size: 30px, $color: black, $background: white) {
-    background-color: $background;
-    background-image: linear-gradient(
-            45deg,
-            $color 25%,
-            transparent 25%,
-            transparent 75%,
-            $color 75%,
-            $color
-        ),
-        linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color);
-    background-position: 0 0, $size $size;
-    background-size: ($size * 2) ($size * 2);
-}
-
-@mixin match-story-screen($size: 'mobile') {
-    :global(.story-screen-#{$size}) {
-        @content;
-    }
-}
-
-@mixin match-screen($size: 'mobile') {
-    .screen-#{$size} {
-        @content;
-    }
-}