yummacss 1.2.0 → 2.0.0

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.
@@ -1,94 +0,0 @@
1
- // colors
2
- $ym-colors-red: rgb(215, 61, 61);
3
- $ym-colors-orange: rgb(224, 104, 20);
4
- $ym-colors-yellow: rgb(211, 161, 7);
5
- $ym-colors-green: rgb(31, 177, 85);
6
- $ym-colors-teal: rgb(18, 166, 149);
7
- $ym-colors-cyan: rgb(5, 164, 191);
8
- $ym-colors-blue: rgb(53, 117, 221);
9
- $ym-colors-indigo: rgb(89, 92, 217);
10
- $ym-colors-violet: rgb(125, 83, 221);
11
- $ym-colors-pink: rgb(212, 65, 138);
12
- $ym-colors-gray: rgb(96, 103, 115);
13
- $ym-colors-lead: rgb(63, 63, 78);
14
- $ym-colors-black: rgb(0, 0, 0);
15
- $ym-colors-white: rgb(255, 255, 255);
16
- $ym-colors-transparent: rgba(255, 255, 255, 0);
17
-
18
- // borders & background
19
- $yma-border: 1px;
20
- $yma-border-radius: 4px;
21
- $yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
22
-
23
- // box model
24
- $yma-height: 0.25rem;
25
- $yma-width: 0.25rem;
26
- $yma-padding: 0.75rem;
27
- $yma-margin: 0.75rem;
28
- $yma-flex-basis: 1rem;
29
- $yma-flex-grow: 1;
30
- $yma-flex-shrink: 1;
31
-
32
- // flexbox & grid
33
- $yma-column-gap: 0.25rem;
34
- $yma-flex: 1;
35
- $yma-row-gap: 0.25rem;
36
-
37
- // positioning
38
- $yma-columns: 1;
39
- $yma-direction: 1px;
40
-
41
- // typography & text
42
- $yma-font-size: 16px;
43
- $yma-font-weight: 500;
44
- $yma-font-size-xs: $yma-font-size * 0.75;
45
- $yma-font-size-sm: $yma-font-size * 0.9;
46
- $yma-font-size-md: $yma-font-size;
47
- $yma-font-size-lg: $yma-font-size * 1.2;
48
- $yma-font-size-xl: $yma-font-size * 1.44;
49
- $yma-font-size-2xl: $yma-font-size * 1.88;
50
- $yma-font-size-3xl: $yma-font-size * 2.22;
51
- $yma-font-size-6xl: $yma-font-size * 3.66;
52
-
53
- $yma-system-fonts: system-ui, sans-serif;
54
- $yma-charter-fonts: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
55
- $yma-inter-fonts: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
56
- $yma-monospace-fonts: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
57
-
58
- // additional values map
59
- $additional-classes: (
60
- "auto": auto,
61
- "fc": fit-content,
62
- "full": 100%,
63
- "half": 50%
64
- );
65
-
66
- //dynamic values map
67
- $dynamic-height-values: (
68
- "1\\/1": 100dvh,
69
- "1\\/2": 50dvh
70
- );
71
-
72
- $dynamic-width-values: (
73
- "1\\/1": 100dvw,
74
- "2\\/1": 50dvw
75
- );
76
-
77
- // colors map
78
- $yma-colors: (
79
- "red": $ym-colors-red,
80
- "orange": $ym-colors-orange,
81
- "yellow": $ym-colors-yellow,
82
- "green": $ym-colors-green,
83
- "teal": $ym-colors-teal,
84
- "cyan": $ym-colors-cyan,
85
- "blue": $ym-colors-blue,
86
- "indigo": $ym-colors-indigo,
87
- "violet": $ym-colors-violet,
88
- "pink": $ym-colors-pink,
89
- "gray": $ym-colors-gray,
90
- "lead": $ym-colors-lead,
91
- "black": $ym-colors-black,
92
- "white": $ym-colors-white,
93
- "transparent": $ym-colors-transparent
94
- );
@@ -1,33 +0,0 @@
1
- @use "sass:math";
2
-
3
- @mixin badge($bg-color: map-get($yma-colors, "white")) {
4
- border-radius: $yma-border-radius * 4;
5
- background-color: $bg-color;
6
- padding: math.div($yma-padding, 4) math.div($yma-padding, 2);
7
- font-size: $yma-font-size-sm;
8
- font-weight: normal;
9
- }
10
-
11
- .badge {
12
- @include badge;
13
- }
14
-
15
- @each $k, $v in $yma-colors {
16
- .badge-#{$k} {
17
- @include badge($v);
18
- }
19
-
20
- @if ($v !=black and $v !=white) {
21
- @for $i from 1 through 6 {
22
- .badge-l-#{$k}-#{$i} {
23
- @include badge(mix(white, $v, $i * 10%));
24
- }
25
- }
26
-
27
- @for $i from 1 through 6 {
28
- .badge-d-#{$k}-#{$i} {
29
- @include badge(mix(black, $v, $i * 10%));
30
- }
31
- }
32
- }
33
- }
@@ -1,55 +0,0 @@
1
- @mixin btn($bg-color: #e2e2e2) {
2
- text-decoration: none;
3
- display: inline-block;
4
- border: 0;
5
- padding: 0.625rem 0.875rem;
6
- border-radius: $yma-border-radius * 2;
7
- background-color: $bg-color;
8
- transition: background-color 0.3s ease;
9
- cursor: pointer;
10
- }
11
-
12
- .btn {
13
- @include btn;
14
- }
15
-
16
- @each $k, $v in $yma-colors {
17
- .btn-#{$k} {
18
- @include btn($v);
19
-
20
- &:hover {
21
- background-color: lighten($v, 5);
22
- }
23
- }
24
-
25
- @if ($v !=black and $v !=white) {
26
- @for $i from 1 through 6 {
27
- .btn-l-#{$k}-#{$i} {
28
- @include btn(mix(white, $v, $i * 10%));
29
-
30
- &:hover {
31
- background-color: lighten($v, 25%);
32
- }
33
- }
34
- }
35
-
36
- @for $i from 1 through 6 {
37
- .btn-d-#{$k}-#{$i} {
38
- @include btn(mix(black, $v, $i * 10%));
39
-
40
- &:hover {
41
- background-color: darken($v, 25%);
42
- }
43
- }
44
- }
45
- }
46
-
47
- .btn-otl-#{$k} {
48
- @include btn(#fff);
49
- border: $yma-border solid $v;
50
-
51
- &:hover {
52
- background-color: $v;
53
- }
54
- }
55
- }
@@ -1,23 +0,0 @@
1
- @use "sass:math";
2
-
3
- .card {
4
- display: block;
5
- padding: $yma-padding;
6
- border: $yma-border solid #ddd;
7
- box-shadow: $yma-box-shadow;
8
- border-radius: math.div($yma-border-radius, 2);
9
-
10
- .card-t {
11
- font-size: $yma-font-size;
12
- padding-bottom: $yma-padding;
13
- font-weight: bold;
14
- }
15
-
16
- .card-b {
17
- font-size: $yma-font-size;
18
- }
19
-
20
- a {
21
- text-decoration: underline;
22
- }
23
- }
@@ -1,23 +0,0 @@
1
- %flex-layout {
2
- width: 100%;
3
- display: flex;
4
- align-items: center;
5
- justify-content: space-between;
6
- box-sizing: border-box;
7
- }
8
-
9
- .nav {
10
- @extend %flex-layout;
11
- padding: $yma-padding $yma-padding * 2;
12
-
13
- .cnn {
14
- @extend %flex-layout;
15
- }
16
- }
17
-
18
- @each $k, $v in $yma-colors {
19
- .nav-#{$k} {
20
- @extend .nav;
21
- background-color: $v;
22
- }
23
- }
@@ -1,21 +0,0 @@
1
- // variables
2
- @import "variables";
3
-
4
- // base, layouts & breakpoints
5
- @import "base";
6
- @import "breakpoints";
7
- @import "grid";
8
- @import "layout";
9
-
10
- // colors
11
- @import "colors";
12
-
13
- // components
14
- @import "components/card";
15
- @import "components/button";
16
- @import "components/navbar";
17
- @import "components/badge";
18
-
19
- // utilities
20
- @import "utils";
21
- @import "fonts";