minolith 1.2.0 → 1.3.1

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 (17) hide show
  1. package/dist/css/minolith-skelton.css +158 -72
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +158 -72
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith.css +1670 -1584
  6. package/dist/css/minolith.css.map +1 -1
  7. package/dist/css/minolith.min.css +6 -6
  8. package/dist/css/minolith.min.css.map +1 -1
  9. package/package.json +1 -1
  10. package/src/base/tabula.scss +4 -0
  11. package/src/components/aside.scss +7 -0
  12. package/src/components/description-list.scss +46 -0
  13. package/src/components/index.scss +2 -0
  14. package/src/components/list.scss +39 -9
  15. package/src/layouts/columns.scss +18 -18
  16. package/src/layouts/container.scss +18 -18
  17. package/src/mixins/responsive.scss +4 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "1.2.0",
3
+ "version": "1.3.1",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
package/src/base/tabula.scss CHANGED
@@ -19,6 +19,10 @@
19
19
  font-family: var(--#{variables.$prefix}font-family-main);
20
20
  z-index: var(--#{variables.$prefix}z-index-tabula);
21
21
  text-size-adjust: 100%;
22
+ line-height: 1.5;
23
+ letter-spacing: 0.025rem;
24
+ text-autospace: normal;
25
+ text-spacing-trim: trim-start;
22
26
 
23
27
  &::selection {
24
28
  color: var(--#{variables.$prefix}tabula-color-selection-fore);
package/src/components/aside.scss ADDED
@@ -0,0 +1,7 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+ @use "../mixins/index.scss" as mixins;
4
+
5
+ :where(.aside) {
6
+ @include mixins.element();
7
+ }
package/src/components/description-list.scss ADDED
@@ -0,0 +1,46 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+ @use "../mixins/index.scss" as mixins;
4
+
5
+ :where(.description-list) {
6
+ --#{variables.$prefix}description-list-gutter-y: 1rem;
7
+ --#{variables.$prefix}description-details-indent: 2rem;
8
+ @include mixins.element();
9
+ display: grid;
10
+ gap: var(--#{variables.$prefix}description-list-gutter-y) 0;
11
+
12
+ &.has-marker {
13
+ > :where(.description-list-item) {
14
+ display: list-item;
15
+ list-style-type: disc;
16
+ margin-left: var(--#{variables.$prefix}description-details-indent);
17
+ > :where(.description-details) {
18
+ @include mixins.element();
19
+ margin-left: 0;
20
+ }
21
+ }
22
+ }
23
+
24
+ > :where(.description-list-item) {
25
+ @include mixins.element();
26
+ display: block;
27
+
28
+ &.has-separater {
29
+ > :where(.description-term) {
30
+ &::after {
31
+ content: ":";
32
+ }
33
+ }
34
+ }
35
+
36
+ > :where(.description-term) {
37
+ @include mixins.element();
38
+ font-weight: var(--#{variables.$prefix}font-weight-semibold);
39
+ }
40
+
41
+ > :where(.description-details) {
42
+ @include mixins.element();
43
+ margin-left: var(--#{variables.$prefix}description-details-indent);
44
+ }
45
+ }
46
+ }
package/src/components/index.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @forward "./accordion.scss";
2
+ @forward "./aside.scss";
2
3
  @forward "./badge.scss";
3
4
  @forward "./blockquote.scss";
4
5
  @forward "./breadcrumbs.scss";
@@ -6,6 +7,7 @@
6
7
  @forward "./card.scss";
7
8
  @forward "./dialogue.scss";
8
9
  @forward "./div.scss";
10
+ @forward "./description-list.scss";
9
11
  @forward "./figure.scss";
10
12
  @forward "./footer.scss";
11
13
  @forward "./hamburger.scss";
package/src/components/list.scss CHANGED
@@ -1,16 +1,46 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
1
3
  @use "../mixins/index.scss" as mixins;
2
4
 
3
- :where(.list) {
5
+ @mixin base-list() {
6
+ @include mixins.element();
7
+ display: grid;
8
+ }
9
+
10
+ @mixin base-list-item() {
4
11
  @include mixins.element();
5
- display: block;
6
- list-style: none;
7
- &.is-style-decimal {
8
- list-style: decimal;
12
+ display: list-item;
13
+ }
14
+
15
+ :where(.list) {
16
+ @include base-list();
17
+ --#{variables.$prefix}list-gutter-y: 1rem;
18
+ --#{variables.$prefix}list-indent: 1.5rem;
19
+ gap: var(--#{variables.$prefix}list-gutter-y) 0;
20
+ > :where(.list-item) {
21
+ @include base-list-item();
22
+ margin-left: var(--#{variables.$prefix}list-indent);
9
23
  }
10
- &.is-style-disc {
11
- list-style: disc;
24
+ }
25
+
26
+ :where(.ordered-list) {
27
+ @include base-list();
28
+ --#{variables.$prefix}ordered-list-gutter-y: 1rem;
29
+ --#{variables.$prefix}ordered-list-indent: 1.5rem;
30
+ gap: var(--#{variables.$prefix}ordered-list-gutter-y) 0;
31
+ > :where(.ordered-list-item) {
32
+ @include base-list-item();
33
+ margin-left: var(--#{variables.$prefix}ordered-list-indent);
12
34
  }
13
- > :where(.list-item) {
14
- display: list-item;
35
+ }
36
+
37
+ :where(.unordered-list) {
38
+ @include base-list();
39
+ --#{variables.$prefix}unordered-list-gutter-y: 1rem;
40
+ --#{variables.$prefix}unordered-list-indent: 1.5rem;
41
+ gap: var(--#{variables.$prefix}unordered-list-gutter-y) 0;
42
+ > :where(.unordered-list-item) {
43
+ @include base-list-item();
44
+ margin-left: var(--#{variables.$prefix}unordered-list-indent);
15
45
  }
16
46
  }
package/src/layouts/columns.scss CHANGED
@@ -4,39 +4,39 @@
4
4
  @use "../functions/index.scss" as functions;
5
5
 
6
6
  :where(.columns) {
7
- --#{variables.$prefix}gutter-x: 0rem;
8
- --#{variables.$prefix}gutter-y: 0rem;
7
+ --#{variables.$prefix}columns-gutter-x: 0rem;
8
+ --#{variables.$prefix}columns-gutter-y: 0rem;
9
9
  @include mixins.element();
10
10
  display: flex;
11
11
  flex-direction: row;
12
12
  flex-wrap: wrap;
13
- margin-top: calc(var(--#{variables.$prefix}gutter-y) * -0.5);
14
- margin-bottom: calc(var(--#{variables.$prefix}gutter-y) * -0.5);
15
- margin-right: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
16
- margin-left: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
13
+ margin-top: calc(var(--#{variables.$prefix}columns-gutter-y) * -0.5);
14
+ margin-bottom: calc(var(--#{variables.$prefix}columns-gutter-y) * -0.5);
15
+ margin-right: calc(var(--#{variables.$prefix}columns-gutter-x) * -0.5);
16
+ margin-left: calc(var(--#{variables.$prefix}columns-gutter-x) * -0.5);
17
17
 
18
18
  @if (not variables.$is-skelton) {
19
19
  @for $p from 0 through 20 {
20
20
  $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
21
21
  &.has-gutter-#{$escapedQuarter}rem {
22
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
23
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
22
+ --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
23
+ --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
24
24
  }
25
- &.has-gutter-x-#{$escapedQuarter}rem {
26
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
25
+ &.has-columns-gutter-x-#{$escapedQuarter}rem {
26
+ --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
27
27
  }
28
- &.has-gutter-y-#{$escapedQuarter}rem {
29
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
28
+ &.has-columns-gutter-y-#{$escapedQuarter}rem {
29
+ --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
30
30
  }
31
31
  @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
32
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
33
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
32
+ --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
33
+ --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
34
34
  }
35
- @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
36
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
35
+ @include mixins.is-responsive("has-columns-gutter-x", "-#{$escapedQuarter}rem") {
36
+ --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
37
37
  }
38
- @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
39
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
38
+ @include mixins.is-responsive("has-columns-gutter-y", "-#{$escapedQuarter}rem") {
39
+ --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
40
40
  }
41
41
  }
42
42
 
package/src/layouts/container.scss CHANGED
@@ -3,13 +3,13 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  :where(.container) {
6
- --#{variables.$prefix}gutter-x: 0rem;
7
- --#{variables.$prefix}gutter-y: 0rem;
6
+ --#{variables.$prefix}container-gutter-x: 0rem;
7
+ --#{variables.$prefix}container-gutter-y: 0rem;
8
8
  @include mixins.element();
9
- padding-top: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
10
- padding-bottom: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
11
- padding-right: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
12
- padding-left: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
9
+ padding-top: calc(var(--#{variables.$prefix}container-gutter-y) * 0.5);
10
+ padding-bottom: calc(var(--#{variables.$prefix}container-gutter-y) * 0.5);
11
+ padding-right: calc(var(--#{variables.$prefix}container-gutter-x) * 0.5);
12
+ padding-left: calc(var(--#{variables.$prefix}container-gutter-x) * 0.5);
13
13
  margin-right: auto;
14
14
  margin-left: auto;
15
15
  width: auto;
@@ -18,24 +18,24 @@
18
18
  @for $p from 0 through 20 {
19
19
  $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
20
20
  &.has-gutter-#{$escapedQuarter}rem {
21
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
22
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
21
+ --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
22
+ --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
23
23
  }
24
- &.has-gutter-x-#{$escapedQuarter}rem {
25
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
24
+ &.has-container-gutter-x-#{$escapedQuarter}rem {
25
+ --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
26
26
  }
27
- &.has-gutter-y-#{$escapedQuarter}rem {
28
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
27
+ &.has-container-gutter-y-#{$escapedQuarter}rem {
28
+ --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
29
29
  }
30
30
  @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
31
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
32
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
31
+ --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
32
+ --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
33
33
  }
34
- @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
35
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
34
+ @include mixins.is-responsive("has-container-gutter-x", "-#{$escapedQuarter}rem") {
35
+ --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
36
36
  }
37
- @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
38
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
37
+ @include mixins.is-responsive("has-container-gutter-y", "-#{$escapedQuarter}rem") {
38
+ --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
39
39
  }
40
40
  }
41
41
  }
package/src/mixins/responsive.scss CHANGED
@@ -216,8 +216,8 @@
216
216
  position: relative;
217
217
  width: 100%;
218
218
  max-width: 100%;
219
- padding-top: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
220
- padding-bottom: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
221
- padding-right: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
222
- padding-left: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
219
+ padding-top: calc(var(--#{variables.$prefix}columns-gutter-y) * 0.5);
220
+ padding-bottom: calc(var(--#{variables.$prefix}columns-gutter-y) * 0.5);
221
+ padding-right: calc(var(--#{variables.$prefix}columns-gutter-x) * 0.5);
222
+ padding-left: calc(var(--#{variables.$prefix}columns-gutter-x) * 0.5);
223
223
  }