yummacss 1.1.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,72 +0,0 @@
1
- // base colors
2
- $base-colors: (
3
- "red": rgb(242, 109, 80),
4
- "orange": rgb(246, 142, 85),
5
- "yellow": rgb(255, 244, 103),
6
- "green": rgb(59, 184, 120),
7
- "teal": rgb(26, 187, 180),
8
- "aqua": rgb(0, 191, 243),
9
- "blue": rgb(67, 140, 202),
10
- "violet": rgb(133, 95, 168),
11
- "magenta": rgb(168, 99, 168),
12
- "pink": rgb(240, 110, 169),
13
- "gray": rgb(153, 153, 153),
14
- "lead": rgb(63, 63, 78),
15
- "black": black,
16
- "white": white
17
- ) !default;
18
-
19
- //borders & background
20
- $base-border: 1px !default;
21
- $base-border-radius: 8px !default;
22
- $base-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1) !default;
23
-
24
- // box model
25
- $base-height: 0.25rem !default;
26
- $base-width: 0.25rem !default;
27
- $base-padding: 0.75rem !default;
28
- $base-margin: 0.75rem !default;
29
- $base-flex-basis: 1rem !default;
30
- $base-flex-grow: 1 !default;
31
- $base-flex-shrink: 1 !default;
32
-
33
- // flexbox & grid
34
- $base-column-gap: 0.25rem !default;
35
- $base-flex: 1 !default;
36
- $base-template-columns: 0.25rem !default;
37
- $base-template-rows: 0.25rem !default;
38
- $base-row-gap: 0.25rem !default;
39
-
40
- // positioning
41
- $base-columns: 1 !default;
42
- $base-direction: 1px !default;
43
-
44
- // typography & text
45
- $base-font-size: 1rem !default;
46
- $base-font-weight: 500 !default;
47
- $base-font-size-xs: $base-font-size * 0.6 !default;
48
- $base-font-size-sm: $base-font-size * 0.75 !default;
49
- $base-font-size-md: $base-font-size * 1.75 !default;
50
- $base-font-size-lg: $base-font-size * 2 !default;
51
- $base-font-size-xl: $base-font-size * 3 !default;
52
- $base-system-fonts: system-ui, sans-serif;
53
- $base-charter-fonts: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
54
- $base-inter-fonts: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
55
- $base-monospace-fonts: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
56
-
57
- // custom values
58
- $custom-values: (
59
- "auto": auto,
60
- "full": 100%,
61
- "half": 50%
62
- );
63
-
64
- $custom-height-values: (
65
- "1\\/1": 100vh,
66
- "1\\/2": 50vh
67
- );
68
-
69
- $custom-width-values: (
70
- "1\\/1": 100vw,
71
- "2\\/1": 50vw
72
- );
@@ -1,33 +0,0 @@
1
- @use "sass:math";
2
-
3
- @mixin badge($bg-color: map-get($base-colors, "white")) {
4
- border-radius: $base-border-radius * 4;
5
- background-color: $bg-color;
6
- padding: math.div($base-padding, 4) math.div($base-padding, 2);
7
- font-size: $base-font-size-sm;
8
- font-weight: normal;
9
- }
10
-
11
- .badge {
12
- @include badge;
13
- }
14
-
15
- @each $k, $v in $base-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,66 +0,0 @@
1
- @mixin btn($bg-color: #e2e2e2) {
2
- text-decoration: none;
3
- display: inline-block;
4
- border: 0;
5
- padding: $base-padding $base-padding * 2;
6
- border-radius: $base-border-radius;
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,
17
- $v in $base-colors {
18
- .btn-#{$k} {
19
- @include btn($v);
20
-
21
- &:hover {
22
- background-color: lighten($v, 5);
23
- }
24
- }
25
-
26
- @if($v !=black and $v !=white) {
27
- @for $i from 1 through 6 {
28
- .btn-l-#{$k}-#{$i} {
29
- @include btn(mix(white, $v, $i * 10%));
30
-
31
- &:hover {
32
- background-color: lighten($v, 25%);
33
- }
34
- }
35
- }
36
-
37
- @for $i from 1 through 6 {
38
- .btn-d-#{$k}-#{$i} {
39
- @include btn(mix(black, $v, $i * 10%));
40
-
41
- &:hover {
42
- background-color: darken($v, 25%);
43
- }
44
- }
45
- }
46
- }
47
-
48
- .btn-otl-#{$k} {
49
- @include btn(#fff);
50
- border: $base-border solid $v;
51
-
52
- &:hover {
53
- background-color: $v;
54
- }
55
- }
56
-
57
- .btn-cmp-#{$k} {
58
- @include btn($v);
59
- color: light-comp($v);
60
-
61
- &:hover {
62
- color: $v;
63
- background-color: light-comp($v);
64
- }
65
- }
66
- }
@@ -1,23 +0,0 @@
1
- @use 'sass:math';
2
-
3
- .card {
4
- display: block;
5
- padding: $base-padding;
6
- border: $base-border solid #ddd;
7
- box-shadow: $base-box-shadow;
8
- border-radius: math.div($base-border-radius, 2);
9
-
10
- .card-t {
11
- font-size: $base-font-size;
12
- padding-bottom: $base-padding;
13
- font-weight: bold;
14
- }
15
-
16
- .card-b {
17
- font-size: $base-font-size;
18
- }
19
-
20
- a {
21
- text-decoration: underline;
22
- }
23
- }
@@ -1,25 +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: $base-padding $base-padding * 2;
12
- box-shadow: $base-box-shadow;
13
-
14
- .cnn {
15
- @extend %flex-layout;
16
- }
17
- }
18
-
19
- @each $k, $v in $base-colors {
20
- .nav-#{$k} {
21
- @extend .nav;
22
- background-color: $v;
23
- }
24
- }
25
-
@@ -1,22 +0,0 @@
1
- // functions & variables
2
- @import "functions";
3
- @import "variables";
4
-
5
- // base, layouts & breakpoints
6
- @import "base";
7
- @import "breakpoints";
8
- @import "grid";
9
- @import "layout";
10
-
11
- // colors
12
- @import "colors";
13
-
14
- // components
15
- @import "components/card";
16
- @import "components/button";
17
- @import "components/navbar";
18
- @import "components/badge";
19
-
20
- // utilities
21
- @import "utils";
22
- @import "fonts";