Instantly share code, notes, and snippets.
Created
April 8, 2019 13:06
-
Save brookback/66569f3dcb24fd2632f163c84dddb910 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
BUTTONS | |
----------------------------------------------------------------*/ | |
.btn { | |
--background: theme('colors.blue-60'); | |
--text: #fff; | |
--text-hover: #fff; | |
--text-active: #e4e4e4; | |
--focused: color(theme('colors.blue-70')); | |
--focused-shadow: color(theme('colors.blue-60') alpha(30%)); | |
--hover: color(theme('colors.blue-60') shade(10%)); | |
--active: theme('colors.blue-70'); | |
--disabled-bg: color(theme('colors.blue-60') tint(80%) saturation(- 60%)); | |
--disabled-color: color(theme('colors.blue-60') saturation(- 90%)); | |
@apply rounded font-bold inline-block relative; | |
background-color: var(--background); | |
color: var(--text); | |
-webkit-tap-highlight-color: transparent; | |
text-decoration: none; | |
user-select: none; | |
white-space: nowrap; | |
border: 0; | |
padding: 0.5em 1em; | |
transition: box-shadow 0.2s ease-out; | |
&:focus, | |
&:hover, | |
&:active { | |
text-decoration: none; | |
color: var(--text-hover); | |
} | |
&:focus { | |
outline: 0; | |
background-color: var(--focused); | |
box-shadow: var(--focused-shadow) 0 0 0 3px; | |
} | |
&:hover { | |
background-color: var(--hover); | |
} | |
&:active { | |
background-color: var(--active); | |
color: var(--text-active); | |
} | |
&.dark { | |
--text: theme('colors.blue-90'); | |
--background: theme('colors.blue-40'); | |
--hover: color(theme('colors.blue-40') tint(30%)); | |
--focused: theme('colors.blue-30'); | |
--active: color(theme('colors.blue-40') shade(20%)); | |
&[disabled] { | |
--disabled-color: color(theme('colors.blue-80') saturation(- 30%)); | |
--disabled-bg: color( | |
theme('colors.blue-40') saturation(- 50%) alpha(60%) | |
); | |
} | |
} | |
&[disabled] { | |
box-shadow: none; | |
cursor: default; | |
background-color: var(--disabled-bg); | |
color: var(--disabled-color); | |
pointer-events: none; | |
} | |
@media screen and (prefers-reduced-motion: reduce) { | |
transition: none; | |
} | |
} | |
.btn-secondary { | |
--text: theme('colors.blue-80'); | |
--text-hover: theme('colors.blue-80'); | |
--text-active: theme('colors.blue-80'); | |
--background: theme('colors.grey-20'); | |
--focused: theme('colors.grey-30'); | |
--focused-shadow: color(theme('colors.grey-40') alpha(10%)); | |
--hover: color(theme('colors.grey-20') shade(5%)); | |
--active: color(theme('colors.grey-30') shade(10%)); | |
--disabled-bg: color(theme('colors.grey-60') tint(80%)); | |
--disabled-color: color(theme('colors.grey-60') saturation(- 10%)); | |
&.dark { | |
--background: theme('colors.grey-30'); | |
--hover: color(theme('colors.grey-30') tint(30%)); | |
--focused: theme('colors.grey-20'); | |
--active: color(theme('colors.grey-30') shade(20%)); | |
&[disabled] { | |
--disabled-color: color(theme('colors.blue-80') saturation(- 30%)); | |
--disabled-bg: color( | |
theme('colors.grey-60') saturation(- 10%) alpha(80%) | |
); | |
} | |
} | |
} | |
.btn-primary { | |
--background: theme('colors.green-60'); | |
--focused: theme('colors.green-70'); | |
--focused-shadow: color(theme('colors.green-50') alpha(30%)); | |
--hover: color(theme('colors.green-60') shade(10%)); | |
--active: theme('colors.green-70'); | |
--disabled-bg: color(theme('colors.green-60') tint(80%) saturation(- 60%)); | |
--disabled-color: color(theme('colors.green-60') saturation(- 90%)); | |
&.dark { | |
--background: theme('colors.green-40'); | |
--hover: theme('colors.green-30'); | |
--focused: theme('colors.green-30'); | |
--active: color(theme('colors.green-40') shade(20%)); | |
&[disabled] { | |
--disabled-color: color(theme('colors.green-80') saturation(- 30%)); | |
--disabled-bg: color( | |
theme('colors.green-40') saturation(- 50%) alpha(60%) | |
); | |
} | |
} | |
} | |
.btn-danger { | |
--background: theme('colors.red-60'); | |
--focused: theme('colors.red-70'); | |
--focused-shadow: color(theme('colors.red-50') alpha(30%)); | |
--hover: color(theme('colors.red-60') shade(10%)); | |
--active: theme('colors.red-70'); | |
--disabled-bg: color(theme('colors.red-60') tint(80%) saturation(- 60%)); | |
--disabled-color: color(theme('colors.red-60') saturation(- 90%)); | |
&.dark { | |
--background: theme('colors.red-40'); | |
--hover: theme('colors.red-30'); | |
--focused: theme('colors.red-30'); | |
--active: color(theme('colors.red-40') shade(20%)); | |
&[disabled] { | |
--disabled-color: color(theme('colors.red-80') saturation(- 30%)); | |
--disabled-bg: color(theme('colors.red-40') saturation(- 50%) alpha(60%)); | |
} | |
} | |
} | |
.btn-link { | |
--background: transparent; | |
--text: theme('colors.blue-60'); | |
--text-hover: theme('colors.blue-70'); | |
--text-active: theme('colors.blue-80'); | |
--disabled-color: color(theme('colors.blue-60') saturation(- 90%)); | |
transition: none; | |
position: relative; | |
&:hover, | |
&:active, | |
&:focus { | |
background-color: transparent; | |
box-shadow: none; | |
text-decoration: underline; | |
} | |
&:active { | |
top: 1px; | |
} | |
&[disabled] { | |
background-color: transparent; | |
opacity: 0.8; | |
text-decoration: none; | |
} | |
&.btn-link--danger { | |
--text: theme('colors.red-60'); | |
--text-hover: theme('colors.red-70'); | |
--text-active: theme('colors.red-80'); | |
} | |
&.dark { | |
--text: theme('colors.blue-40'); | |
--background: transparent; | |
--text-hover: theme('colors.blue-30'); | |
&[disabled] { | |
--disabled-color: color(theme('colors.blue-40') saturation(- 90%)); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment