Skip to content

Commit

Permalink
new version
Browse files Browse the repository at this point in the history
  • Loading branch information
@romainmenke
romainmenke committed Sep 25, 2023
1 parent 803400a commit ed93c5e
Show file tree
Hide file tree
Showing 13 changed files with 146 additions and 176 deletions.
18 changes: 7 additions & 11 deletions buttons.dark.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;

transition: border-color .5s var(--ease-3) 3s
transition: border-color .5s var(--ease-3) 3s;
}
@media (prefers-reduced-motion: no-preference) {
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])),
Expand All @@ -64,27 +64,23 @@
transition:
border-color .5s var(--ease-3) 3s,
box-shadow 145ms var(--ease-4),
outline-offset 145ms var(--ease-4)
outline-offset 145ms var(--ease-4);
}
}
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) {
/* disabled */

/* pressing */

/* icons */
}
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
/* disabled */
[disabled]:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) {
--_bg: none;
--_text: var(--gray-5);
cursor: not-allowed;
box-shadow: var(--shadow-1);
}
/* pressing */
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])):where(:not(:active):hover) {
--_highlight-size: var(--size-2);
transition-delay: 0s;
transition-duration: .25s;
}
/* icons */
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) > :where(svg) {
flex-shrink: 0;
filter: drop-shadow(var(--_ink-shadow));
Expand All @@ -102,7 +98,7 @@
/* red reset */
:where([type="reset"]) {
--_text: var(--red-2);
--_border: var(--surface-3)
--_border: var(--surface-3);
}
:where([type="reset"]):focus-visible {
outline-color: var(--red-6);
Expand Down
18 changes: 7 additions & 11 deletions buttons.light.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;

transition: border-color .5s var(--ease-3) 3s
transition: border-color .5s var(--ease-3) 3s;
}
@media (prefers-reduced-motion: no-preference) {
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])),
Expand All @@ -66,27 +66,23 @@
transition:
border-color .5s var(--ease-3) 3s,
box-shadow 145ms var(--ease-4),
outline-offset 145ms var(--ease-4)
outline-offset 145ms var(--ease-4);
}
}
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) {
/* disabled */

/* pressing */

/* icons */
}
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
/* disabled */
[disabled]:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) {
--_bg: none;
--_text: var(--gray-6);
cursor: not-allowed;
box-shadow: var(--shadow-1);
}
/* pressing */
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])):where(:not(:active):hover) {
--_highlight-size: var(--size-2);
transition-delay: 0s;
transition-duration: .25s;
}
/* icons */
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) > :where(svg) {
flex-shrink: 0;
filter: drop-shadow(var(--_ink-shadow));
Expand All @@ -104,7 +100,7 @@
/* red reset */
:where([type="reset"]) {
--_text: var(--red-6);
--_border: var(--red-3)
--_border: var(--red-3);
}
:where([type="reset"]):focus-visible {
outline-color: var(--red-6);
Expand Down
28 changes: 12 additions & 16 deletions buttons.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;

transition: border-color .5s var(--ease-3) 3s
transition: border-color .5s var(--ease-3) 3s;
}
@media (prefers-color-scheme: dark) {
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])),
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
--_highlight: var(--_highlight-dark);
--_bg: var(--_bg-dark);
--_ink-shadow: var(--_ink-shadow-dark)
--_ink-shadow: var(--_ink-shadow-dark);
}
}
@media (prefers-reduced-motion: no-preference) {
Expand All @@ -82,32 +82,28 @@
transition:
border-color .5s var(--ease-3) 3s,
box-shadow 145ms var(--ease-4),
outline-offset 145ms var(--ease-4)
outline-offset 145ms var(--ease-4);
}
}
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) {
/* disabled */

/* pressing */

/* icons */
}
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
/* disabled */
[disabled]:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) {
--_bg: none;
--_text: var(--gray-6);
cursor: not-allowed;
box-shadow: var(--shadow-1)
box-shadow: var(--shadow-1);
}
@media (prefers-color-scheme: dark) {
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
--_text: var(--gray-5)
[disabled]:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) {
--_text: var(--gray-5);
}
}
/* pressing */
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])):where(:not(:active):hover) {
--_highlight-size: var(--size-2);
transition-delay: 0s;
transition-duration: .25s;
}
/* icons */
:where(.btn,button,input:is([type="button"],[type="submit"],[type="reset"])) > :where(svg) {
flex-shrink: 0;
filter: drop-shadow(var(--_ink-shadow));
Expand All @@ -125,15 +121,15 @@
/* red reset */
:where([type="reset"]) {
--_text: var(--red-6);
--_border: var(--red-3)
--_border: var(--red-3);
}
:where([type="reset"]):focus-visible {
outline-color: var(--red-6);
}
@media (prefers-color-scheme: dark) {
:where([type="reset"]) {
--_text: var(--red-2);
--_border: var(--surface-3)
--_border: var(--surface-3);
}
}
/* submit, form > button, reset matching hover border color */
Expand Down
9 changes: 6 additions & 3 deletions masks.corner-cuts.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,18 @@
conic-gradient(from -45deg at 1rem 1rem,rgba(0,0,0,0) 25%,#000 0)
-1rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 1rem calc(100% - 1rem),rgba(0,0,0,0) 25%,#000 0)
-1rem 100%/100% 51% repeat-x;
-1rem 100%/100% 51% repeat-x
;
--mask-corner-cut-angles-2:
conic-gradient(from -45deg at 2rem 2rem,rgba(0,0,0,0) 25%,#000 0)
-2rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 2rem calc(100% - 2rem),rgba(0,0,0,0) 25%,#000 0)
-2rem 100%/100% 51% repeat-x;
-2rem 100%/100% 51% repeat-x
;
--mask-corner-cut-angles-3:
conic-gradient(from -45deg at 4rem 4rem,rgba(0,0,0,0) 25%,#000 0)
-4rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 4rem calc(100% - 4rem),rgba(0,0,0,0) 25%,#000 0)
-4rem 100%/100% 51% repeat-x;
-4rem 100%/100% 51% repeat-x
;
}
45 changes: 30 additions & 15 deletions masks.edges.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,70 @@
--mask-edge-scoop-horizontal: radial-gradient(20px at 20px 50%,rgba(0,0,0,0) 97%,#000) -20px/ 100% calc(1.9 * 20px);
--mask-edge-scalloped:
radial-gradient(farthest-side,#000 97%,rgba(0,0,0,0)) 0 0 / 20px 20px round,
linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat;
linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat
;
--mask-edge-scalloped-bottom:
linear-gradient(to top,rgba(0,0,0,0) 20px,#000 0),
radial-gradient(20px at top,#000 97%,rgba(0,0,0,0)) bottom / calc(1.9 * 20px) 20px;
radial-gradient(20px at top,#000 97%,rgba(0,0,0,0)) bottom / calc(1.9 * 20px) 20px
;
--mask-edge-scalloped-top:
linear-gradient(to bottom,rgba(0,0,0,0) 20px,#000 0),
radial-gradient(20px at bottom,#000 97%,rgba(0,0,0,0)) top / calc(1.9 * 20px) 20px;
radial-gradient(20px at bottom,#000 97%,rgba(0,0,0,0)) top / calc(1.9 * 20px) 20px
;
--mask-edge-scalloped-vertical:
linear-gradient(0deg,rgba(0,0,0,0) calc(2 * 20px),#000 0) 0 20px,
radial-gradient(20px,#000 97%,rgba(0,0,0,0)) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space;
radial-gradient(20px,#000 97%,rgba(0,0,0,0)) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space
;
--mask-edge-scalloped-left:
linear-gradient(to right,rgba(0,0,0,0) 20px,#000 0),
radial-gradient(20px at right,#000 97%,rgba(0,0,0,0)) left / 20px calc(1.9 * 20px);
radial-gradient(20px at right,#000 97%,rgba(0,0,0,0)) left / 20px calc(1.9 * 20px)
;
--mask-edge-scalloped-right:
linear-gradient(to left,rgba(0,0,0,0) 20px,#000 0),
radial-gradient(20px at left,#000 97%,rgba(0,0,0,0)) right / 20px calc(1.9 * 20px);
radial-gradient(20px at left,#000 97%,rgba(0,0,0,0)) right / 20px calc(1.9 * 20px)
;
--mask-edge-scalloped-horizontal:
linear-gradient(-90deg,rgba(0,0,0,0) calc(2 * 20px),#000 0) 20px,
radial-gradient(20px,#000 97%,rgba(0,0,0,0)) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat;
radial-gradient(20px,#000 97%,rgba(0,0,0,0)) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
;
--mask-edge-drip-bottom:
radial-gradient(20px at bottom,rgba(0,0,0,0) 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,
radial-gradient(20px at 25% 50%,#000 97%,rgba(0,0,0,0)) calc(50% - 20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x;
radial-gradient(20px at 25% 50%,#000 97%,rgba(0,0,0,0)) calc(50% - 20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
;
--mask-edge-drip-top:
radial-gradient(20px at top,rgba(0,0,0,0) 97%,#000) 50% 20px / calc(2 * 20px) 100% repeat-x,
radial-gradient(20px at 25% 50%,#000 97%,rgba(0,0,0,0)) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x;
radial-gradient(20px at 25% 50%,#000 97%,rgba(0,0,0,0)) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x
;
--mask-edge-drip-vertical:
radial-gradient(20px at top ,rgba(0,0,0,0) 97%,#000) 50% 20px / calc(2 * 20px) 51% repeat-x,
radial-gradient(20px at bottom,rgba(0,0,0,0) 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 51% repeat-x,
radial-gradient(20px at 25% 50%,#000 97%,rgba(0,0,0,0)) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x,
radial-gradient(20px at 25% 50%,#000 97%,rgba(0,0,0,0)) calc(50% - 3*20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x;
radial-gradient(20px at 25% 50%,#000 97%,rgba(0,0,0,0)) calc(50% - 3*20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
;
--mask-edge-drip-left:
radial-gradient(20px at left,rgba(0,0,0,0) 97%,#000) 20px 50% / 100% calc(2 * 20px) repeat-y,
radial-gradient(20px at 50% 25%,#000 97%,rgba(0,0,0,0)) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y;
radial-gradient(20px at 50% 25%,#000 97%,rgba(0,0,0,0)) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
;
--mask-edge-drip-right:
radial-gradient(20px at right,rgba(0,0,0,0) 97%,#000) calc(100% - 20px) 50% / 100% calc(2 * 20px) repeat-y,
radial-gradient(20px at 50% 25%,#000 97%,rgba(0,0,0,0)) 99% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y;
radial-gradient(20px at 50% 25%,#000 97%,rgba(0,0,0,0)) 99% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
;
--mask-edge-drip-horizontal:
radial-gradient(20px at left ,rgba(0,0,0,0) 97%,#000) 20px 50% / 51% calc(2 * 20px) repeat-y,
radial-gradient(20px at right,rgba(0,0,0,0) 97%,#000) calc(100% - 20px) 50% / 51% calc(2 * 20px) repeat-y,
radial-gradient(20px at 50% 25%,#000 97%,rgba(0,0,0,0)) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y,
radial-gradient(20px at 50% 25%,#000 97%,rgba(0,0,0,0)) 99% calc(50% - 3*20px) / calc(2 * 20px) calc(4 * 20px) repeat-y;
radial-gradient(20px at 50% 25%,#000 97%,rgba(0,0,0,0)) 99% calc(50% - 3*20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
;
--mask-edge-zig-zag-top: conic-gradient(from 135deg at top,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) 50% / calc(2 * 20px) 100%;
--mask-edge-zig-zag-bottom: conic-gradient(from -45deg at bottom,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) 50% / calc(2 * 20px) 100%;
--mask-edge-zig-zag-left: conic-gradient(from 45deg at left,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) 50% / 100% calc(2 * 20px);
--mask-edge-zig-zag-right: conic-gradient(from -135deg at right,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) 50% / 100% calc(2 * 20px);
--mask-edge-zig-zag-horizontal:
conic-gradient(from 45deg at left ,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) left / 51% calc(2 * 20px) repeat-y,
conic-gradient(from -135deg at right,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) right / 51% calc(2 * 20px) repeat-y;
conic-gradient(from -135deg at right,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) right / 51% calc(2 * 20px) repeat-y
;
--mask-edge-zig-zag-vertical:
conic-gradient(from 135deg at top ,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) top / calc(2 * 20px) 51% repeat-x,
conic-gradient(from -45deg at bottom,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) bottom / calc(2 * 20px) 51% repeat-x;
conic-gradient(from -45deg at bottom,rgba(0,0,0,0),#000 1deg 90deg,rgba(0,0,0,0) 91deg) bottom / calc(2 * 20px) 51% repeat-x
;
}
42 changes: 21 additions & 21 deletions media.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,29 @@
@custom-media --stylus (hover: none) and (pointer: fine);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-only (min-width: 0px) and (max-width: 240px);
@custom-media --xxs-n-above (min-width: 240px);
@custom-media --xxs-n-below (max-width: 239px);
@custom-media --xxs-only (min-width: 0px) and (max-width: 240px);
@custom-media --xxs-n-above (min-width: 240px);
@custom-media --xxs-n-below (max-width: 239.98px);
@custom-media --xxs-phone (--xxs-only) and (--portrait);
@custom-media --xs-only (min-width: 240px) and (max-width: 360px);
@custom-media --xs-n-above (min-width: 360px);
@custom-media --xs-n-below (max-width: 359px);
@custom-media --xs-only (min-width: 240px) and (max-width: 360px);
@custom-media --xs-n-above (min-width: 360px);
@custom-media --xs-n-below (max-width: 359.98px);
@custom-media --xs-phone (--xs-only) and (--portrait);
@custom-media --sm-only (min-width: 360px) and (max-width: 480px);
@custom-media --sm-n-above (min-width: 480px);
@custom-media --sm-n-below (max-width: 479px);
@custom-media --sm-only (min-width: 360px) and (max-width: 480px);
@custom-media --sm-n-above (min-width: 480px);
@custom-media --sm-n-below (max-width: 479.98px);
@custom-media --sm-phone (--sm-only) and (--portrait);
@custom-media --md-only (min-width: 480px) and (max-width: 768px);
@custom-media --md-n-above (min-width: 768px);
@custom-media --md-n-below (max-width: 767px);
@custom-media --md-only (min-width: 480px) and (max-width: 768px);
@custom-media --md-n-above (min-width: 768px);
@custom-media --md-n-below (max-width: 767.98px);
@custom-media --md-phone (--md-only) and (--portrait);
@custom-media --lg-only (min-width: 768px) and (max-width: 1024px);
@custom-media --lg-n-above (min-width: 1024px);
@custom-media --lg-n-below (max-width: 1023px);
@custom-media --lg-only (min-width: 768px) and (max-width: 1024px);
@custom-media --lg-n-above (min-width: 1024px);
@custom-media --lg-n-below (max-width: 1023.98px);
@custom-media --lg-phone (--lg-only) and (--portrait);
@custom-media --xl-only (min-width: 1024px) and (max-width: 1440px);
@custom-media --xl-n-above (min-width: 1440px);
@custom-media --xl-n-below (max-width: 1439px);
@custom-media --xxl-only (min-width: 1440px) and (max-width: 1920px);
@custom-media --xxl-n-above (min-width: 1920px);
@custom-media --xxl-n-below (max-width: 1919px);
@custom-media --xl-only (min-width: 1024px) and (max-width: 1440px);
@custom-media --xl-n-above (min-width: 1440px);
@custom-media --xl-n-below (max-width: 1439.98px);
@custom-media --xxl-only (min-width: 1440px) and (max-width: 1920px);
@custom-media --xxl-n-above (min-width: 1920px);
@custom-media --xxl-n-below (max-width: 1919.98px);

0 comments on commit ed93c5e

Please sign in to comment.