Skip to content

Commit aa1db86

Browse files
thomaskimurathomaskimura
committed
Update with space 2.0.0
1 parent 7ca638d commit aa1db86

File tree

21 files changed

+862
-592
lines changed

21 files changed

+862
-592
lines changed

‎src/.DS_Store‎

-6 KB
Binary file not shown.

‎src/css/.DS_Store‎

-6 KB
Binary file not shown.

‎src/css/base/forms.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
select,
2121
select[multiple],
2222
textarea {
23-
@apply animation-300 border__input min-h-[44px] w-full appearance-none py-1.5;
23+
@apply animation-300 border__input min-h-[44px] w-full appearance-none py-1.5 color__border-input color__bg-input color__input border--input-padding;
2424
&:hover {
2525
@apply border__input--hover;
2626
}
2727
&:focus-visible {
28-
@apply border__input--focus color__bg-body;
28+
@apply border__input--focus color__bg-body color__text;
2929
}
3030
}
3131

@@ -64,7 +64,7 @@
6464

6565
/* checkboxes and radios */
6666
input[type="checkbox"] {
67-
@apply cursor-pointer color__link border__input;
67+
@apply cursor-pointer color__link color__border-input;
6868
&:checked {
6969
@apply bg-current;
7070
}
@@ -76,7 +76,7 @@
7676
}
7777
}
7878
input[type="radio"] {
79-
@apply rounded-full cursor-pointer color__link border__input;
79+
@apply rounded-full cursor-pointer color__link color__border-input;
8080
&:checked {
8181
@apply bg-current;
8282
}

‎src/css/base/typography.css‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,15 +83,27 @@
8383
@apply underline md:opacity-75;
8484
}
8585

86-
&:focus-visible {
87-
@apply border--focus;
86+
@media (max-width:1024px) {
87+
&:focus {
88+
@apply border--focus-simple;
89+
}
90+
}
91+
@media (min-width:1024px) {
92+
&:focus-visible {
93+
@apply border--focus;
94+
}
8895
}
8996
}
9097

9198
/* spacing */
92-
.rte {
99+
.rte, #product-description {
93100
@apply space-y-4;
94101
}
102+
.rte {
103+
p:empty {
104+
@apply pt-4;
105+
}
106+
}
95107
ul {
96108
@apply pl-4 list-disc;
97109
}
@@ -109,4 +121,5 @@
109121
background: none;
110122
font-weight: bold;
111123
}
124+
112125
}

‎src/css/components/buttons.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,12 @@
6363
&--plain {
6464
@apply color__button-plain;
6565
}
66+
&--shade {
67+
@apply color__button-shade;
68+
}
69+
&--unshade {
70+
@apply color__button-unshade backdrop-blur-sm;
71+
}
6672
&--diff{
6773
background-color: #fff;
6874
border-color: #fff;

‎src/css/components/windows.css‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,40 @@
44
@layer components {
55
/* standard containers */
66
.window--narrow {
7-
@apply m-auto px-4 md:max-w-2xl lg:max-w-3xl xl:max-w-4xl;
7+
@apply px-4 md:px-[8vw] lg:px-[16vw] xl:px-[24vw];
88
}
99
.window {
10-
@apply m-auto px-4 md:max-w-screen-xl;
10+
@apply px-4 md:px-[4vw] lg:px-[8vw] xl:px-[12vw];
1111
}
1212
.window--wide {
13-
@apply m-auto px-4 md:max-w-screen-2xl;
13+
@apply px-4 md:px-[2vw] lg:px-[4vw] xl:px-[6vw];
1414
}
1515
.window--full {
16-
@apply m-auto pl-[10px] pr-[10px];
16+
@apply px-4;
1717
}
18-
.md\:window--narrow {
19-
@apply md:m-auto md:px-4 md:max-w-2xl lg:max-w-3xl xl:max-w-4xl;
18+
19+
/* max containers */
20+
.max--narrow {
21+
@apply md:max-w-[84vw] lg:max-w-[68vw] xl:max-w-[52vw];
22+
}
23+
.max {
24+
@apply md:max-w-[92vw] lg:max-w-[84vw] xl:max-w-[76vw];
25+
}
26+
.max--wide {
27+
@apply md:max-w-[96vw] lg:max-w-[92vw] xl:max-w-[88vw];
28+
}
29+
30+
/* scroll containers */
31+
.scrollwindow--narrow {
32+
@apply scroll-px-4 px-4 m-auto md:scroll-px-[8vw] lg:scroll-px-[16vw] xl:scroll-px-[24vw] md:px-[8vw] lg:px-[16vw] xl:px-[24vw];
2033
}
21-
.md\:window {
22-
@apply md:m-auto md:px-4 md:max-w-screen-xl;
34+
.scrollwindow {
35+
@apply scroll-px-4 px-4 m-auto md:scroll-px-[4vw] lg:scroll-px-[8vw] xl:scroll-px-[12vw] md:px-[4vw] lg:px-[8vw] xl:px-[12vw];
2336
}
24-
.md\:window--wide {
25-
@apply md:m-auto md:px-4 md:max-w-screen-2xl;
37+
.scrollwindow--wide {
38+
@apply scroll-px-4 px-4 m-auto md:scroll-px-[2vw] lg:scroll-px-[4vw] xl:scroll-px-[6vw] md:px-[2vw] lg:px-[4vw] xl:px-[6vw];
2639
}
27-
.md\:window--full {
28-
@apply md:m-auto md:pl-[10px] md:pr-[10px];
40+
.scrollwindow--full {
41+
@apply scroll-px-4 px-4 m-auto;
2942
}
3043
}

‎src/css/utilities/animation.css‎

Lines changed: 67 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44

55
@layer utilities {
66

7+
/* animation timing */
8+
/* - add classes to any element to enable animation at set duration */
9+
/* - add --all to transition all properties, using class without --all will only transition default css values */
710
.animation-100 {
811
@apply transition duration-100;
912
}
@@ -30,60 +33,105 @@
3033
@apply transition-all;
3134
transition-duration: 5000ms;
3235
}
36+
37+
/* animation effects */
38+
/* - pulse loading state */
3339
.animate-pulse {
3440
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
3541
}
42+
/* - horizontal scroll, used in marquee */
3643
.animate-xscroll {
3744
animation: xscroll 10s linear infinite;
3845
}
46+
/* - spin, used for loading spinners */
47+
.animate-spin-slow {
48+
animation: spin 3s linear infinite;
49+
}
50+
/* - hop, used for chat indicators */
51+
.animate-hop {
52+
animation: hop 1.2s ease-in 0.2s infinite;
53+
}
54+
.animate-hop-1 {
55+
animation: hop 1.2s ease-in 0.2s infinite;
56+
}
57+
.animate-hop-2 {
58+
animation: hop 1.2s ease-in 0.4s infinite;
59+
}
60+
.animate-hop-3 {
61+
animation: hop 1.2s ease-in 0.6s infinite;
62+
}
3963

40-
41-
64+
/* scroll animations */
65+
/* - will only work where animation-range supports a percentage */
4266
@supports (animation-range: 10%) {
43-
.scroll-blurin-2-20 {
44-
opacity: 0.5;
45-
filter: blur(4px);
46-
animation: blurin linear both;
47-
animation-timeline: view();
48-
animation-range: 2% 20%;
49-
}
67+
68+
/* blur and zoom in animation, used in banners */
5069
.scroll-blurinzoom-2-20 {
51-
opacity: 0.8;
5270
filter: blur(8px);
5371
transform: scale(1.05);
5472
animation: blurinzoom linear both;
5573
animation-timeline: view();
5674
animation-range: 2% 20%;
5775
}
58-
.scroll-blurinandout-5-100 {
76+
77+
/* blur text in and out, used in banners */
78+
.scroll-blurinfadeinandout-1-100 {
5979
opacity: 0.5;
60-
filter: blur(4px);
61-
animation: blurinandout linear both;
80+
filter: blur(8px);
81+
animation: blurinfadeinandout linear both;
6282
animation-timeline: view();
63-
animation-range: 5% 100%;
83+
animation-range: 1% 100%;
6484
}
85+
86+
/* simple opacity fade in, used throughout the theme */
6587
.scroll-fadein-2-20 {
6688
opacity: 0;
6789
animation: fadein linear both;
6890
animation-timeline: view();
6991
animation-range: 2% 20%;
7092
}
93+
94+
/* fade in from 0.5 opacity, used for horizontal sliders */
7195
.scroll-fadeinhalf-inline-2-20 {
72-
opacity: 0.2;
96+
opacity: 0.5;
7397
animation: fadeinhalf linear both;
7498
animation-timeline: view(inline);
7599
animation-range: 2% 20%;
76100
}
101+
102+
/* fade in and out using inlined variables, used for product list */
77103
.scroll-fadeinandouthalf-dynamic {
78104
opacity: 0.1;
79105
animation: fadeinandouthalf linear both;
80106
animation-timeline: view();
81107
animation-range: var(--offset-1) var(--offset-2);
82108
}
109+
83110
}
84111

85112
}
86113

114+
@keyframes spin {
115+
from {
116+
transform: rotate(0deg);
117+
}
118+
to {
119+
transform: rotate(360deg);
120+
}
121+
}
122+
123+
@keyframes hop {
124+
0% {
125+
transform: 'translateY(0)'
126+
}
127+
50% {
128+
transform: 'translateY(-50%)'
129+
}
130+
100% {
131+
transform: 'translateY(0)'
132+
}
133+
}
134+
87135
@keyframes pulse {
88136
0% {
89137
opacity: 0.2;
@@ -105,34 +153,21 @@
105153
}
106154
}
107155

108-
@keyframes blurin {
109-
from {
110-
opacity: 0.5;
111-
filter: blur(4px);
112-
}
113-
to {
114-
opacity: 1;
115-
filter: blur(0px);
116-
}
117-
}
118-
119156
@keyframes blurinzoom {
120157
from {
121-
opacity: 0.8;
122158
filter: blur(8px);
123159
transform: scale(1.05);
124160
}
125161
to {
126-
opacity: 1;
127162
filter: blur(0px);
128163
transform: scale(1);
129164
}
130165
}
131166

132-
@keyframes blurinandout {
167+
@keyframes blurinfadeinandout {
133168
0% {
134169
opacity: 0.5;
135-
filter: blur(4px);
170+
filter: blur(8px);
136171
}
137172
20% {
138173
opacity: 1;
@@ -144,7 +179,7 @@
144179
}
145180
100% {
146181
opacity: 0.5;
147-
filter: blur(4px);
182+
filter: blur(8px);
148183
}
149184
}
150185

@@ -159,7 +194,7 @@
159194

160195
@keyframes fadeinhalf {
161196
from {
162-
opacity: 0.2;
197+
opacity: 0.5;
163198
}
164199
to {
165200
opacity: 1;

‎src/css/utilities/borders.css‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,20 @@
4545
border-width: var(--sizes__border-input-width);
4646
}
4747
.border--t-input-width {
48-
border-top-width: var(--sizes__border-input-width);
48+
border-top-width: var(--sizes__border-input-width-top);
4949
}
5050
.border--r-input-width {
51-
border-right-width: var(--sizes__border-input-width);
51+
border-right-width: var(--sizes__border-input-width-right);
5252
}
5353
.border--b-input-width {
54-
border-bottom-width: var(--sizes__border-input-width);
54+
border-bottom-width: var(--sizes__border-input-width-bottom);
5555
}
5656
.border--l-input-width {
57-
border-left-width: var(--sizes__border-input-width);
57+
border-left-width: var(--sizes__border-input-width-left);
58+
}
59+
.border--input-padding {
60+
padding-left: var(--sizes__border-input-padding-left);
61+
padding-right: var(--sizes__border-input-padding-right);
5862
}
5963

6064
/* - default border raidus */
@@ -74,23 +78,21 @@
7478
}
7579
}
7680

77-
/* - default focus border */
81+
/* - default focus borders */
7882
.border--focus {
7983
@apply !no-underline;
80-
outline: 2px solid transparent;
81-
outline-offset: 2px;
82-
box-shadow: var(--color__background-body) 0px 0px 0px 2px, var(--color__border-selected-1) 0px 0px 0px 4px;
84+
outline: 0px solid transparent;
85+
box-shadow: var(--color__background-body) 0px 0px 0px 3px, var(--color__border-selected-2) 0px 0px 0px 4px;
8386
}
8487
.border--focus--inset {
8588
box-shadow: none;
8689
outline: 2px solid var(--color__background-body);
87-
outline-offset: -4px;
88-
border: 2px solid var(--color__border-selected-1) !important;
90+
outline-offset: -2px;
91+
box-shadow: var(--color__border-selected-1) 0px 0px 0px 1px;
8992
}
9093
.border--focus-simple {
9194
@apply !underline;
92-
outline: 2px solid transparent;
93-
outline-offset: 2px;
95+
outline: 0px solid transparent;
9496
box-shadow: none;
9597
}
9698

@@ -109,10 +111,10 @@
109111
/* ======= */
110112
/* input borders */
111113
.border__input {
112-
@apply border--input-width;
114+
@apply border--t-input-width border--r-input-width border--b-input-width border--l-input-width;
113115
}
114116
.border__input--focus {
115-
@apply border--focus !color__border-selected-1;
117+
@apply border--focus--inset !color__border-selected-1;
116118
}
117119
.border__input--hover {
118120
@apply !color__border-selected-1;

0 commit comments

Comments
 (0)