webcoreui 0.7.0 → 0.8.1

package/components/Footer/footer.module.scss

@@ -1,61 +1,61 @@
-@import '../../scss/config.scss';
-
-.footer {
-    @include border(top, primary-50);
-
-    .column-title {
-        @include spacing(mb-default);
-
-        display: block;
-    }
-
-    .column {
-        @include spacing(0);
-        
-        list-style-type: none;
-        
-        a {
-            @include typography(primary-10, none);
-
-            &:hover,
-            &.active {
-                @include typography(primary, underline);
-            }
-        }
-    }
-}
-
-.container {
-    @include spacing(auto-default, px-default);
-
-    max-width: 1200px;
-}
-
-.wrapper {
-    @include layout(flex, column, default, h-between);
-}
-
-.columns {
-    @include layout(flex, column, default);
-}
-
-.subtext {
-    @include border(top, primary-60);
-    @include spacing(mt-default, py-default);
-    @include layout(flex, column, default, h-between);
-
-    span {
-        @include typography(md, primary-20);
-    }
-}
-
-@include media('sm') {
-    .wrapper,
-    .subtext {
-        @include layout(row, none);
-    }
-
-    .columns {
-        @include layout(row, '5xl');
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.footer {
+    @include border(top, primary-50);
+
+    .column-title {
+        @include spacing(mb-default);
+
+        display: block;
+    }
+
+    .column {
+        @include spacing(0);
+        
+        list-style-type: none;
+        
+        a {
+            @include typography(primary-10, none);
+
+            &:hover,
+            &.active {
+                @include typography(primary, underline);
+            }
+        }
+    }
+}
+
+.container {
+    @include spacing(auto-default, px-default);
+
+    max-width: 1200px;
+}
+
+.wrapper {
+    @include layout(flex, column, default, h-between);
+}
+
+.columns {
+    @include layout(flex, column, default);
+}
+
+.subtext {
+    @include border(top, primary-60);
+    @include spacing(mt-default, py-default);
+    @include layout(flex, column, default, h-between);
+
+    span {
+        @include typography(md, primary-20);
+    }
+}
+
+@include media('sm') {
+    .wrapper,
+    .subtext {
+        @include layout(row, none);
+    }
+
+    .columns {
+        @include layout(row, '5xl');
+    }
+}

package/components/Group/group.module.scss

@@ -1,43 +1,43 @@
-@import '../../scss/config.scss';
-
-.group {
-    @include layout(flex, none);
-    @include visibility(auto);
-
-    button,
-    span {
-        @include border-radius(none);
-
-        &:first-child {
-            @include border-radius(left, md);
-        }
-
-        &:last-child {
-            @include border-radius(right, md);
-        }
-    }
-
-    &.separator button:not(:last-child),
-    &.separator span:not(:last-child) {
-        @include border(1px, right, primary-70);
-    }
-
-    &.outline button
-    &.outline span {
-        @include border(1px, primary-20);
-        box-shadow: none;
-
-        &:hover {
-            @include border(1px, primary);
-            box-shadow: none;
-        }
-
-        &:first-child {
-            @include border(right, 0);
-        }
-
-        &:last-child {
-            @include border(left, 0);
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.group {
+    @include layout(flex, none);
+    @include visibility(auto);
+
+    button,
+    span {
+        @include border-radius(none);
+
+        &:first-child {
+            @include border-radius(left, md);
+        }
+
+        &:last-child {
+            @include border-radius(right, md);
+        }
+    }
+
+    &.separator button:not(:last-child),
+    &.separator span:not(:last-child) {
+        @include border(1px, right, primary-70);
+    }
+
+    &.outline button
+    &.outline span {
+        @include border(1px, primary-20);
+        box-shadow: none;
+
+        &:hover {
+            @include border(1px, primary);
+            box-shadow: none;
+        }
+
+        &:first-child {
+            @include border(right, 0);
+        }
+
+        &:last-child {
+            @include border(left, 0);
+        }
+    }
+}

package/components/Kbd/kbd.module.scss

@@ -1,8 +1,8 @@
-@import '../../scss/config.scss';
-
-.kbd {
-    @include background(primary-50);
-    @include border-radius(md);
-    @include typography(md, regular);
-    @include spacing(py-xs, px-xs);
-}
+@use '../../scss/config.scss' as *;
+
+.kbd {
+    @include background(primary-50);
+    @include border-radius(md);
+    @include typography(md, regular);
+    @include spacing(py-xs, px-xs);
+}

package/components/List/list.module.scss

@@ -1,91 +1,91 @@
-@import '../../scss/config.scss';
-
-.list {
-    @include spacing(0);
-
-    overflow-y: auto;
-    list-style-type: none;
-
-    &:hover li[data-selected] {
-        @include background(transparent);
-    }
-
-    li {
-        @include transition(background);
-        @include spacing(px-sm, py-xs, m-xs);
-        @include layout(flex, sm, v-center);
-        @include border-radius(md);
-
-        &:not(.title, [data-disabled]) {
-            cursor: pointer;
-        }
-
-        &:not(.title, [data-disabled]):hover,
-        &[data-selected] {
-            @include background(primary-40);
-        }
-
-        &[data-disabled],
-        &[data-disabled] span {
-            @include typography(primary-30);
-
-            cursor: default;
-        }
-
-        &[data-hidden] {
-            @include visibility(none);
-        }
-
-        &[data-id="w-no-results"] {
-            @include layout(h-center);
-            cursor: default;
-
-            &:hover {
-                @include background(transparent);
-            }
-        }
-
-        &.title {
-            @include typography(md, primary-20);
-            @include spacing(m0);
-            
-            padding-bottom: 0;
-            
-            &:not(:first-child) {
-                @include border(top, primary-50);
-            }
-        }
-
-        svg {
-            @include size(18px);
-            pointer-events: none;
-        }
-
-        a,
-        div {
-            @include layout(flex, sm, v-center);
-            @include typography(none);
-            flex: 1;
-        }
-
-        div {
-            pointer-events: none;
-        }
-
-        span {
-            @include typography(md, primary-20);
-            pointer-events: none;
-        }
-    }
-}
-
-.container {
-    @include border-radius(md);
-    @include border(primary-50);
-
-    input {
-        @include border(top, 0);
-        @include border(left, 0);
-        @include border(right, 0);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.list {
+    @include spacing(0);
+
+    overflow-y: auto;
+    list-style-type: none;
+
+    &:hover li[data-selected] {
+        @include background(transparent);
+    }
+
+    li {
+        @include transition(background);
+        @include spacing(px-sm, py-xs, m-xs);
+        @include layout(flex, sm, v-center);
+        @include border-radius(md);
+
+        &:not(.title, [data-disabled]) {
+            cursor: pointer;
+        }
+
+        &:not(.title, [data-disabled]):hover,
+        &[data-selected] {
+            @include background(primary-40);
+        }
+
+        &[data-disabled],
+        &[data-disabled] span {
+            @include typography(primary-30);
+
+            cursor: default;
+        }
+
+        &[data-hidden] {
+            @include visibility(none);
+        }
+
+        &[data-id="w-no-results"] {
+            @include layout(h-center);
+            cursor: default;
+
+            &:hover {
+                @include background(transparent);
+            }
+        }
+
+        &.title {
+            @include typography(md, primary-20);
+            @include spacing(m0);
+            
+            padding-bottom: 0;
+            
+            &:not(:first-child) {
+                @include border(top, primary-50);
+            }
+        }
+
+        svg {
+            @include size(18px);
+            pointer-events: none;
+        }
+
+        a,
+        div {
+            @include layout(flex, sm, v-center);
+            @include typography(none);
+            flex: 1;
+        }
+
+        div {
+            pointer-events: none;
+        }
+
+        span {
+            @include typography(md, primary-20);
+            pointer-events: none;
+        }
+    }
+}
+
+.container {
+    @include border-radius(md);
+    @include border(primary-50);
+
+    input {
+        @include border(top, 0);
+        @include border(left, 0);
+        @include border(right, 0);
+    }
+}

package/components/Masonry/masonry.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 body {
     --w-masonry-gap: 5px;

package/components/Modal/modal.module.scss

@@ -1,110 +1,110 @@
-@import '../../scss/config.scss';
-
-.modal {
-    @include transition();
-    @include position(fixed, 't50%', 'l50%');
-    @include spacing(m0, p-default);
-    @include layer(modal);
-    @include visibility(block, 0);
-    @include border(primary-50);
-    @include background(primary-70);
-    @include typography(primary);
-    @include border-radius(md);
-    @include size('w90%');
-
-    transform: translate(-50%, calc(-50% + 15px));
-    max-width: 500px;
-    pointer-events: none;
-
-    &[data-show="true"] {
-        @include visibility(1);
-
-        transform: translate(-50%, -50%);
-        pointer-events: all;
-
-        + .overlay {
-            @include visibility(1);
-            pointer-events: all;
-        }
-    }
-
-    &.transparent {
-        @include border(0);
-        @include spacing(p0);
-        @include size('wfit-content');
-        @include background(transparent);
-    }
-
-    &.info {
-        @include border(info);
-
-        .title {
-            @include typography(info);
-        }
-    }
-
-    &.success {
-        @include border(success);
-
-        .title {
-            @include typography(success);
-        }
-    }
-
-    &.warning {
-        @include border(warning);
-
-        .title {
-            @include typography(warning);
-        }
-    }
-
-    &.alert {
-        @include border(alert);
-
-        .title {
-            @include typography(alert);
-        }
-    }
-
-    .close {
-        @include position(absolute, t10px, r10px);
-        @include spacing(p-xs);
-
-        svg {
-            @include size(10px);
-        }
-    }
-
-    .title {
-        @include typography(lg);
-        @include spacing(mb-xs);
-        @include layout(flex, v-center, xs);
-
-        svg {
-            @include size(20px);
-        }
-    }
-
-    .subTitle {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
-    }
-}
-
-.overlay {
-    @include transition(opacity);
-    @include position(fixed);
-    @include background(overlay);
-    @include layer(header);
-    @include visibility(0);
-
-    inset: 0;
-    pointer-events: none;
-}
-
-@include media(xs) {
-    .modal {
-        @include size('wauto');
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.modal {
+    @include transition();
+    @include position(fixed, 't50%', 'l50%');
+    @include spacing(m0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size('w90%');
+
+    transform: translate(-50%, calc(-50% + 15px));
+    max-width: 500px;
+    pointer-events: none;
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translate(-50%, -50%);
+        pointer-events: all;
+
+        + .overlay {
+            @include visibility(1);
+            pointer-events: all;
+        }
+    }
+
+    &.transparent {
+        @include border(0);
+        @include spacing(p0);
+        @include size('wfit-content');
+        @include background(transparent);
+    }
+
+    &.info {
+        @include border(info);
+
+        .title {
+            @include typography(info);
+        }
+    }
+
+    &.success {
+        @include border(success);
+
+        .title {
+            @include typography(success);
+        }
+    }
+
+    &.warning {
+        @include border(warning);
+
+        .title {
+            @include typography(warning);
+        }
+    }
+
+    &.alert {
+        @include border(alert);
+
+        .title {
+            @include typography(alert);
+        }
+    }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+}
+
+.overlay {
+    @include transition(opacity);
+    @include position(fixed);
+    @include background(overlay);
+    @include layer(header);
+    @include visibility(0);
+
+    inset: 0;
+    pointer-events: none;
+}
+
+@include media(xs) {
+    .modal {
+        @include size('wauto');
+    }
+}

package/components/Pagination/pagination.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .pagination {
     @include layout(flex, xs, wrap);