@iroco/ui 0.20.0 → 0.50.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.
- package/Alert.svelte +72 -0
- package/Alert.svelte.d.ts +18 -0
- package/{lib/iroco.css → Button.svelte} +69 -88
- package/Button.svelte.d.ts +43 -0
- package/DataTable.svelte +94 -0
- package/DataTable.svelte.d.ts +27 -0
- package/{src/IconBurger.svelte → IconBurger.svelte} +2 -3
- package/IconBurger.svelte.d.ts +17 -0
- package/{src/IconClose.svelte → IconClose.svelte} +2 -3
- package/IconClose.svelte.d.ts +17 -0
- package/{src/IconFloppyDisk.svelte → IconFloppyDisk.svelte} +3 -4
- package/IconFloppyDisk.svelte.d.ts +18 -0
- package/{src/IconInfo.svelte → IconInfo.svelte} +2 -3
- package/IconInfo.svelte.d.ts +17 -0
- package/{src/IconIrocoLogo.svelte → IconIrocoLogo.svelte} +2 -3
- package/IconIrocoLogo.svelte.d.ts +17 -0
- package/IconMastodon.svelte +19 -0
- package/IconMastodon.svelte.d.ts +18 -0
- package/{src/IconMoreSign.svelte → IconMoreSign.svelte} +2 -3
- package/IconMoreSign.svelte.d.ts +17 -0
- package/{src/IconTrashCan.svelte → IconTrashCan.svelte} +4 -11
- package/IconTrashCan.svelte.d.ts +18 -0
- package/IrocoLogo.svelte +49 -0
- package/IrocoLogo.svelte.d.ts +19 -0
- package/{src/Loader.svelte → Loader.svelte} +1 -2
- package/Loader.svelte.d.ts +14 -0
- package/NavBar.svelte +669 -0
- package/NavBar.svelte.d.ts +21 -0
- package/Navigation.svelte +325 -0
- package/Navigation.svelte.d.ts +19 -0
- package/NumberInput.svelte +117 -0
- package/NumberInput.svelte.d.ts +25 -0
- package/NumberInputSized.svelte +4 -0
- package/NumberInputSized.svelte.d.ts +14 -0
- package/README.md +21 -31
- package/RadioButton.svelte +93 -0
- package/RadioButton.svelte.d.ts +23 -0
- package/RadioButtonTest.svelte +10 -0
- package/RadioButtonTest.svelte.d.ts +19 -0
- package/SlottedComponentWrapper.svelte +7 -0
- package/SlottedComponentWrapper.svelte.d.ts +23 -0
- package/TextInput.svelte +148 -0
- package/TextInput.svelte.d.ts +30 -0
- package/{src/TopBar.svelte → TopBar.svelte} +0 -0
- package/TopBar.svelte.d.ts +23 -0
- package/definition.d.ts +28 -0
- package/definition.js +35 -0
- package/index.d.ts +18 -0
- package/index.js +18 -0
- package/package.json +71 -113
- package/scss/button.scss +57 -55
- package/scss/check.scss +45 -46
- package/scss/colors.scss +39 -17
- package/scss/constants.scss +1 -1
- package/scss/containers.scss +126 -130
- package/scss/fields/_checkbox.scss +37 -42
- package/scss/fields/_input.scss +160 -169
- package/scss/fonts.scss +7 -7
- package/scss/forms.scss +53 -55
- package/scss/iroco.scss +22 -22
- package/scss/layouts.scss +21 -7
- package/scss/loader.scss +18 -16
- package/scss/style.scss +5 -5
- package/lib/button.scss +0 -61
- package/lib/check.scss +0 -48
- package/lib/colors.scss +0 -23
- package/lib/constants.scss +0 -1
- package/lib/containers.scss +0 -226
- package/lib/fields/_checkbox.scss +0 -44
- package/lib/fields/_input.scss +0 -171
- package/lib/fields/_style.scss +0 -2
- package/lib/fonts.scss +0 -11
- package/lib/forms.scss +0 -67
- package/lib/index.js +0 -5807
- package/lib/index.min.js +0 -330
- package/lib/index.mjs +0 -5780
- package/lib/index.mjs.css +0 -906
- package/lib/iroco.css.map +0 -1
- package/lib/iroco.scss +0 -37
- package/lib/layouts.scss +0 -7
- package/lib/loader.scss +0 -20
- package/lib/style.scss +0 -5
- package/src/Alert.svelte +0 -34
- package/src/Button.svelte +0 -24
- package/src/DataTable.svelte +0 -72
- package/src/Icon.svelte +0 -29
- package/src/IconMastodon.svelte +0 -13
- package/src/IrocoLogo.svelte +0 -45
- package/src/NavBar.svelte +0 -154
- package/src/Navigation.svelte +0 -107
- package/src/NumberInput.svelte +0 -23
- package/src/RadioButton.svelte +0 -56
- package/src/TextInput.svelte +0 -119
- package/src/definition.ts +0 -30
- package/src/index.ts +0 -21
package/scss/button.scss
CHANGED
|
@@ -1,61 +1,63 @@
|
|
|
1
|
-
@use '
|
|
2
|
-
@use '
|
|
3
|
-
@use '
|
|
4
|
-
@use '
|
|
1
|
+
@use './colors';
|
|
2
|
+
@use './fonts';
|
|
3
|
+
@use './containers';
|
|
4
|
+
@use './constants';
|
|
5
5
|
|
|
6
6
|
.iroco-ui-button {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
-webkit-touch-callout: none;
|
|
9
|
+
-webkit-user-select: none;
|
|
10
|
+
-khtml-user-select: none;
|
|
11
|
+
-moz-user-select: none;
|
|
12
|
+
-ms-user-select: none;
|
|
13
|
+
user-select: none;
|
|
14
|
+
border: none;
|
|
15
|
+
flex-shrink: 0;
|
|
16
|
+
margin: 1em 0em;
|
|
17
|
+
position: relative;
|
|
18
|
+
text-transform: uppercase;
|
|
19
|
+
border-radius: constants.$border-radius;
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
21
|
+
&--basic {
|
|
22
|
+
background: colors.$beige;
|
|
23
|
+
border: 1px solid colors.$nightBlue;
|
|
24
|
+
}
|
|
25
|
+
&--dark {
|
|
26
|
+
background: colors.$nightBlue;
|
|
27
|
+
color: colors.$beige;
|
|
28
|
+
}
|
|
29
|
+
&--success {
|
|
30
|
+
background: colors.$green;
|
|
31
|
+
color: colors.$nightBlue;
|
|
32
|
+
}
|
|
33
|
+
&--danger {
|
|
34
|
+
background: colors.$red;
|
|
35
|
+
}
|
|
36
|
+
&--regular {
|
|
37
|
+
padding: 1em 2em;
|
|
38
|
+
}
|
|
39
|
+
&--small {
|
|
40
|
+
padding: 0.5em 1em;
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
&--basic:hover,
|
|
44
|
+
&--success:hover,
|
|
45
|
+
&--danger:hover {
|
|
46
|
+
box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
|
|
47
|
+
}
|
|
48
|
+
&--dark:hover {
|
|
49
|
+
box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
|
|
50
|
+
}
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
&:active {
|
|
53
|
+
box-shadow: none;
|
|
54
|
+
}
|
|
53
55
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
56
|
+
&.disabled {
|
|
57
|
+
background-color: colors.$lightGrey;
|
|
58
|
+
cursor: default;
|
|
59
|
+
&:hover {
|
|
60
|
+
box-shadow: none;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
package/scss/check.scss
CHANGED
|
@@ -1,48 +1,47 @@
|
|
|
1
1
|
.ui-check {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
2
|
+
width: 30px;
|
|
3
|
+
min-width: 30px;
|
|
4
|
+
height: 30px;
|
|
5
|
+
min-height: 30px;
|
|
6
|
+
background: rgba($darkBeige, 0.1);
|
|
7
|
+
border: solid rgba($darkBeige, 0.4) 1px;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
outline: none;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
position: relative;
|
|
14
|
+
transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
|
|
15
|
+
border-radius: 2px;
|
|
16
|
+
|
|
17
|
+
&.tag {
|
|
18
|
+
width: auto;
|
|
19
|
+
padding: 0 10px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:focus {
|
|
23
|
+
outline: none;
|
|
24
|
+
box-shadow: 0 0 5px rgba($blue, 0.3);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
> svg {
|
|
28
|
+
stroke-dashoffset: 100;
|
|
29
|
+
transition: stroke-dashoffset cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
> span {
|
|
33
|
+
@include Arial(1em, $darkBeige);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&[aria-pressed='true'] {
|
|
37
|
+
border: solid $blue 1px;
|
|
38
|
+
|
|
39
|
+
> svg {
|
|
40
|
+
stroke-dashoffset: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
> span {
|
|
44
|
+
color: $blue;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
48
47
|
}
|
package/scss/colors.scss
CHANGED
|
@@ -1,23 +1,45 @@
|
|
|
1
|
-
$blue: #
|
|
2
|
-
$darkBlue: #
|
|
3
|
-
$nightBlue: #
|
|
4
|
-
$green: #
|
|
1
|
+
$blue: #00b9ff;
|
|
2
|
+
$darkBlue: #211d28;
|
|
3
|
+
$nightBlue: #18151e;
|
|
4
|
+
$green: #00d692;
|
|
5
5
|
$red: #ff504d;
|
|
6
|
-
$yellow: #
|
|
6
|
+
$yellow: #ffe032;
|
|
7
7
|
$beige: #f2ebe3;
|
|
8
8
|
$darkBeige: #a9a29e;
|
|
9
|
-
$mediumGrey
|
|
9
|
+
$mediumGrey: #464452;
|
|
10
10
|
$darkGrey: #33323a;
|
|
11
11
|
$lightGrey: #f5f5f5;
|
|
12
12
|
|
|
13
|
-
.font-color-blue {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
.font-color-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
.font-color-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.font-color-
|
|
23
|
-
|
|
13
|
+
.font-color-blue {
|
|
14
|
+
color: $blue;
|
|
15
|
+
}
|
|
16
|
+
.font-color-darkBlue {
|
|
17
|
+
color: $darkBlue;
|
|
18
|
+
}
|
|
19
|
+
.font-color-nightBlue {
|
|
20
|
+
color: $nightBlue;
|
|
21
|
+
}
|
|
22
|
+
.font-color-green {
|
|
23
|
+
color: $green;
|
|
24
|
+
}
|
|
25
|
+
.font-color-red {
|
|
26
|
+
color: $red;
|
|
27
|
+
}
|
|
28
|
+
.font-color-yellow {
|
|
29
|
+
color: $yellow;
|
|
30
|
+
}
|
|
31
|
+
.font-color-beige {
|
|
32
|
+
color: $beige;
|
|
33
|
+
}
|
|
34
|
+
.font-color-darkBeige {
|
|
35
|
+
color: $darkBeige;
|
|
36
|
+
}
|
|
37
|
+
.font-color-mediumGrey {
|
|
38
|
+
color: $mediumGrey;
|
|
39
|
+
}
|
|
40
|
+
.font-color-darkGrey {
|
|
41
|
+
color: $darkGrey;
|
|
42
|
+
}
|
|
43
|
+
.font-color-lightGrey {
|
|
44
|
+
color: $lightGrey;
|
|
45
|
+
}
|
package/scss/constants.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
$border-radius: 0.3em
|
|
1
|
+
$border-radius: 0.3em;
|
package/scss/containers.scss
CHANGED
|
@@ -20,207 +20,203 @@ $width-mobile-M: calc(100% - 40px);
|
|
|
20
20
|
$width-mobile-S: calc(100% - 20px);
|
|
21
21
|
|
|
22
22
|
@mixin screen-4K() {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
@media all and (max-width: $break-point-4K) {
|
|
24
|
+
@content;
|
|
25
|
+
}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
@mixin screen-desktop() {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
@media all and (max-width: $break-point-desktop) {
|
|
30
|
+
@content;
|
|
31
|
+
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
@mixin screen-laptop-L() {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
@media all and (max-width: $break-point-laptop-L) {
|
|
36
|
+
@content;
|
|
37
|
+
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
@mixin screen-laptop() {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
@media all and (max-width: $break-point-laptop) {
|
|
42
|
+
@content;
|
|
43
|
+
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
@mixin screen-tablet() {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
@media all and (max-width: $break-point-tablet) {
|
|
48
|
+
@content;
|
|
49
|
+
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
@mixin screen-tablet-S() {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
@media all and (max-width: $break-point-tablet-S) {
|
|
54
|
+
@content;
|
|
55
|
+
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
@mixin screen-mobile-L() {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
@media all and (max-width: $break-point-mobile-L) {
|
|
60
|
+
@content;
|
|
61
|
+
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
@mixin screen-mobile-M() {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
@media all and (max-width: $break-point-mobile-M) {
|
|
66
|
+
@content;
|
|
67
|
+
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
@mixin screen-mobile-S() {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
@media all and (max-width: $break-point-mobile-S) {
|
|
72
|
+
@content;
|
|
73
|
+
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
@mixin container-wide() {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
width: $width-mobile-S;
|
|
78
|
+
max-width: $width;
|
|
79
|
+
margin-left: auto;
|
|
80
|
+
margin-right: auto;
|
|
81
|
+
transition: max-width ease-out 200ms;
|
|
82
82
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
@include screen-4K() {
|
|
84
|
+
max-width: $width-4k;
|
|
85
|
+
}
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
@include screen-desktop() {
|
|
88
|
+
max-width: $width-desktop;
|
|
89
|
+
}
|
|
90
90
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
@include screen-laptop-L() {
|
|
92
|
+
max-width: $width-laptop-L;
|
|
93
|
+
}
|
|
94
94
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
95
|
+
@include screen-laptop() {
|
|
96
|
+
max-width: $width-laptop;
|
|
97
|
+
}
|
|
98
98
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
99
|
+
@include screen-tablet() {
|
|
100
|
+
max-width: $width-tablet;
|
|
101
|
+
}
|
|
102
102
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
@include screen-tablet-S() {
|
|
104
|
+
max-width: $width-tablet-S;
|
|
105
|
+
}
|
|
106
106
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
@include screen-mobile-L() {
|
|
108
|
+
max-width: $width-mobile-L;
|
|
109
|
+
}
|
|
110
110
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
@include screen-mobile-S() {
|
|
116
|
-
max-width: $width-mobile-S;
|
|
117
|
-
}
|
|
111
|
+
@include screen-mobile-M() {
|
|
112
|
+
max-width: $width-mobile-M;
|
|
113
|
+
}
|
|
118
114
|
|
|
115
|
+
@include screen-mobile-S() {
|
|
116
|
+
max-width: $width-mobile-S;
|
|
117
|
+
}
|
|
119
118
|
}
|
|
120
119
|
|
|
121
120
|
@mixin container-large() {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
@include screen-laptop-L() {
|
|
129
|
-
max-width: $width-laptop-L;
|
|
130
|
-
}
|
|
121
|
+
width: $width-mobile-S;
|
|
122
|
+
max-width: $width-desktop;
|
|
123
|
+
margin-left: auto;
|
|
124
|
+
margin-right: auto;
|
|
125
|
+
transition: max-width ease-out 200ms;
|
|
131
126
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
127
|
+
@include screen-laptop-L() {
|
|
128
|
+
max-width: $width-laptop-L;
|
|
129
|
+
}
|
|
135
130
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
131
|
+
@include screen-laptop() {
|
|
132
|
+
max-width: $width-laptop;
|
|
133
|
+
}
|
|
139
134
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
135
|
+
@include screen-tablet() {
|
|
136
|
+
max-width: $width-tablet;
|
|
137
|
+
}
|
|
143
138
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
139
|
+
@include screen-tablet-S() {
|
|
140
|
+
max-width: $width-tablet-S;
|
|
141
|
+
}
|
|
147
142
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
143
|
+
@include screen-mobile-L() {
|
|
144
|
+
max-width: $width-mobile-L;
|
|
145
|
+
}
|
|
151
146
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
147
|
+
@include screen-mobile-M() {
|
|
148
|
+
max-width: $width-mobile-M;
|
|
149
|
+
}
|
|
155
150
|
|
|
151
|
+
@include screen-mobile-S() {
|
|
152
|
+
max-width: $width-mobile-S;
|
|
153
|
+
}
|
|
156
154
|
}
|
|
157
155
|
|
|
158
156
|
@mixin container-medium() {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
157
|
+
width: $width-mobile-S;
|
|
158
|
+
max-width: $width-laptop-L;
|
|
159
|
+
margin-left: auto;
|
|
160
|
+
margin-right: auto;
|
|
161
|
+
transition: max-width ease-out 200ms;
|
|
164
162
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
163
|
+
@include screen-laptop() {
|
|
164
|
+
max-width: $width-laptop;
|
|
165
|
+
}
|
|
168
166
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
167
|
+
@include screen-tablet() {
|
|
168
|
+
max-width: $width-tablet;
|
|
169
|
+
}
|
|
172
170
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
171
|
+
@include screen-tablet-S() {
|
|
172
|
+
max-width: $width-tablet-S;
|
|
173
|
+
}
|
|
176
174
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
175
|
+
@include screen-mobile-L() {
|
|
176
|
+
max-width: $width-mobile-L;
|
|
177
|
+
}
|
|
180
178
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
@include screen-mobile-S() {
|
|
186
|
-
max-width: $width-mobile-S;
|
|
187
|
-
}
|
|
179
|
+
@include screen-mobile-M() {
|
|
180
|
+
max-width: $width-mobile-M;
|
|
181
|
+
}
|
|
188
182
|
|
|
183
|
+
@include screen-mobile-S() {
|
|
184
|
+
max-width: $width-mobile-S;
|
|
185
|
+
}
|
|
189
186
|
}
|
|
190
187
|
|
|
191
188
|
@mixin container-small() {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
@include screen-mobile-L() {
|
|
199
|
-
max-width: $width-mobile-L;
|
|
200
|
-
}
|
|
189
|
+
width: $width-mobile-S;
|
|
190
|
+
max-width: $width-tablet;
|
|
191
|
+
margin-left: auto;
|
|
192
|
+
margin-right: auto;
|
|
193
|
+
transition: max-width ease-out 200ms;
|
|
201
194
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
195
|
+
@include screen-mobile-L() {
|
|
196
|
+
max-width: $width-mobile-L;
|
|
197
|
+
}
|
|
205
198
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
199
|
+
@include screen-mobile-M() {
|
|
200
|
+
max-width: $width-mobile-M;
|
|
201
|
+
}
|
|
209
202
|
|
|
203
|
+
@include screen-mobile-S() {
|
|
204
|
+
max-width: $width-mobile-S;
|
|
205
|
+
}
|
|
210
206
|
}
|
|
211
207
|
|
|
212
208
|
.container-wide {
|
|
213
|
-
|
|
209
|
+
@include container-wide();
|
|
214
210
|
}
|
|
215
211
|
|
|
216
212
|
.container-large {
|
|
217
|
-
|
|
213
|
+
@include container-large();
|
|
218
214
|
}
|
|
219
215
|
|
|
220
216
|
.container-medium {
|
|
221
|
-
|
|
217
|
+
@include container-medium();
|
|
222
218
|
}
|
|
223
219
|
|
|
224
220
|
.container-small {
|
|
225
|
-
|
|
221
|
+
@include container-small();
|
|
226
222
|
}
|