Skip to content

Commit ad0ce0c

Browse files
thomaskimurathomaskimura
committed
Merge with space 1.2.0
1 parent 51c583c commit ad0ce0c

File tree

10 files changed

+196
-167
lines changed

10 files changed

+196
-167
lines changed

‎postcss.config.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎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 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;
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 border__input 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 border__input color__border-input;
8080
&:checked {
8181
@apply bg-current;
8282
}

‎src/css/utilities/animation.css‎

Lines changed: 65 additions & 33 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,61 +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 {
7296
opacity: 0.5;
73-
filter: blur(8px);
7497
animation: fadeinhalf linear both;
7598
animation-timeline: view(inline);
7699
animation-range: 2% 20%;
77100
}
101+
102+
/* fade in and out using inlined variables, used for product list */
78103
.scroll-fadeinandouthalf-dynamic {
79104
opacity: 0.1;
80105
animation: fadeinandouthalf linear both;
81106
animation-timeline: view();
82107
animation-range: var(--offset-1) var(--offset-2);
83108
}
109+
84110
}
85111

86112
}
87113

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+
88135
@keyframes pulse {
89136
0% {
90137
opacity: 0.2;
@@ -106,34 +153,21 @@
106153
}
107154
}
108155

109-
@keyframes blurin {
110-
from {
111-
opacity: 0.5;
112-
filter: blur(4px);
113-
}
114-
to {
115-
opacity: 1;
116-
filter: blur(0px);
117-
}
118-
}
119-
120156
@keyframes blurinzoom {
121157
from {
122-
opacity: 0.8;
123158
filter: blur(8px);
124159
transform: scale(1.05);
125160
}
126161
to {
127-
opacity: 1;
128162
filter: blur(0px);
129163
transform: scale(1);
130164
}
131165
}
132166

133-
@keyframes blurinandout {
167+
@keyframes blurinfadeinandout {
134168
0% {
135169
opacity: 0.5;
136-
filter: blur(4px);
170+
filter: blur(8px);
137171
}
138172
20% {
139173
opacity: 1;
@@ -145,7 +179,7 @@
145179
}
146180
100% {
147181
opacity: 0.5;
148-
filter: blur(4px);
182+
filter: blur(8px);
149183
}
150184
}
151185

@@ -161,11 +195,9 @@
161195
@keyframes fadeinhalf {
162196
from {
163197
opacity: 0.5;
164-
filter: blur(8px);
165198
}
166199
to {
167200
opacity: 1;
168-
filter: blur(0px);
169201
}
170202
}
171203

‎src/css/utilities/borders.css‎

Lines changed: 9 additions & 5 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 */
@@ -109,7 +113,7 @@
109113
/* ======= */
110114
/* input borders */
111115
.border__input {
112-
@apply border--input-width;
116+
@apply border--t-input-width border--r-input-width border--b-input-width border--l-input-width;
113117
}
114118
.border__input--focus {
115119
@apply border--focus !color__border-selected-1;

‎src/entrypoints/styles.css‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -70,22 +70,6 @@ input[type=range]::-moz-range-thumb {
7070
border-top: 2px solid;
7171
border-color: var(--color__text-light) !important;
7272
}
73-
.anglethrough {
74-
@apply relative;
75-
}
76-
.anglethrough:before {
77-
@apply absolute left-0 right-0 opacity-25;
78-
content: "";
79-
top: 50%;
80-
border-top: 2px solid;
81-
border-color: var(--color__text-light) !important;
82-
83-
-webkit-transform: rotate(-30deg);
84-
-moz-transform: rotate(-30deg);
85-
-ms-transform: rotate(-30deg);
86-
-o-transform: rotate(-30deg);
87-
transform: rotate(-30deg);
88-
}
8973

9074
/* - reset line-height */
9175
.leading-reset {
@@ -178,7 +162,6 @@ video::-webkit-media-controls-panel {
178162
.shopify-payment-button__more-options {
179163
@apply !border__button--radius overflow-hidden;
180164
}
181-
182165
.shopify-payment-button__button--unbranded {
183166
@apply !color__bg-secondary !color__secondary hover:color__bg-secondary !px-6 !py-2 hover:opacity-75;
184167
@apply !leading-normal !tracking-wide;

0 commit comments

Comments
 (0)