|
|
Linha 809: |
Linha 809: |
|
| |
|
| /* Test 2 */ | | /* Test 2 */ |
| | |
| | body { |
| | color: #fff; |
| | background: hsl(227, 10%, 10%); |
| | font: 300 1em 'Fira Sans', sans-serif; |
| | justify-content: center; |
| | align-content: center; |
| | align-items: center; |
| | text-align: center; |
| | min-height: 100vh; |
| | display: flex; |
| | } |
| | |
| | .buttons { |
| | text-align: center; |
| | } |
| | |
| | h1 { |
| | font-weight: 400; |
| | } |
| | |
| | code { |
| | color: #e4cb58; |
| | font: inherit; |
| | } |
| | |
| | .buttons div { |
| | background: none; |
| | border: 2px solid; |
| | font: inherit; |
| | line-height: 1; |
| | margin: 0.5em; |
| | padding: 1em 2em; |
| | display: inline-block; |
| | } |
|
| |
|
| .fill:hover, | | .fill:hover, |
| .fill:focus { | | .fill:focus { |
| box-shadow: inset 0 0 0 2em var(--hover);
| | box-shadow: inset 0 0 0 2em var(--hover); |
| } | | } |
|
| |
|
| // Animate the size, outside
| | .pulse:hover, |
| .pulse:hover, | |
| .pulse:focus { | | .pulse:focus { |
| animation: pulse 1s;
| | animation: pulse 1s; |
| box-shadow: 0 0 0 2em transparent;
| | box-shadow: 0 0 0 2em transparent; |
| } | | } |
|
| |
|
| @keyframes pulse { | | @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 var(--hover); }
| | 0% { |
| | box-shadow: 0 0 0 0 var(--hover); |
| | } |
| } | | } |
|
| |
|
| // Stack multiple shadows, one from the left, the other from the right
| |
| .close:hover, | | .close:hover, |
| .close:focus { | | .close:focus { |
| box-shadow:
| | box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover); |
| inset -3.5em 0 0 0 var(--hover),
| |
| inset 3.5em 0 0 0 var(--hover);
| |
| } | | } |
|
| |
|
| // Size can also be negative; see how it's smaller than the element
| |
| .raise:hover, | | .raise:hover, |
| .raise:focus { | | .raise:focus { |
| box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
| | box-shadow: 0 0.5em 0.5em -0.4em var(--hover); |
| transform: translateY(-0.25em);
| | transform: translateY(-0.25em); |
| } | | } |
|
| |
|
| // Animating from the bottom
| |
| .up:hover, | | .up:hover, |
| .up:focus { | | .up:focus { |
| box-shadow: inset 0 -3.25em 0 0 var(--hover);
| | box-shadow: inset 0 -3.25em 0 0 var(--hover); |
| } | | } |
|
| |
|
| // And from the left
| |
| .slide:hover, | | .slide:hover, |
| .slide:focus { | | .slide:focus { |
| box-shadow: inset 6.5em 0 0 0 var(--hover);
| | box-shadow: inset 6.5em 0 0 0 var(--hover); |
| } | | } |
|
| |
|
| // Multiple shadows, one on the outside, another on the inside
| | .offset { |
| .offset { | | box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color); |
| box-shadow:
| |
| 0.3em 0.3em 0 0 var(--color),
| |
| inset 0.3em 0.3em 0 0 var(--color);
| |
|
| |
| &:hover,
| |
| &:focus {
| |
| box-shadow:
| |
| 0 0 0 0 var(--hover),
| |
| inset 6em 3.5em 0 0 var(--hover);
| |
| }
| |
| } | | } |
|
| |
|
| $colors: (
| | .offset:hover, |
| fill: #a972cb,
| | .offset:focus { |
| pulse: #ef6eae,
| | box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover); |
| close: #ff7f82,
| | } |
| raise: #ffa260,
| |
| up: #e4cb58,
| |
| slide: #8fc866,
| |
| offset: #19bc8b
| |
| ); | |
|
| |
|
| // Sass variables compile to a static string; CSS variables are dynamic and inherited
| |
| // Loop through the map and set CSS custom properties using Sass variables
| |
| @each $button, $color in $colors { | | @each $button, $color in $colors { |
| .#{$button} {
| | .#{$button} { |
| --color: #{$color};
| | --color: #{$color}; |
| --hover: #{adjust-hue($color, 45deg)};
| | --hover: #{adjust-hue($color, 45deg)}; |
| }
| |
| }
| |
| | |
| // Now every button will have different colors as set above. We get to use the same structure, only changing the custom properties.
| |
| .fill, .pulse, .close, .raise, .up, .slide, .offset{
| |
| color: var(--color);
| |
| transition: 0.25s;
| |
|
| |
| &:hover,
| |
| &:focus {
| |
| border-color: var(--hover);
| |
| color: #fff;
| |
| }
| |
| } | | } |
|
| |
| //=== Pen styling, ignore
| |
| body {
| |
| color: #fff;
| |
| background: hsl(227, 10%, 10%);
| |
| font: 300 1em 'Fira Sans', sans-serif;
| |
|
| |
| // Center everything ever
| |
| justify-content: center;
| |
| align-content: center;
| |
| align-items: center;
| |
| text-align: center;
| |
| min-height: 100vh;
| |
| display: flex;
| |
| }
| |
|
| |
| .fill, .pulse, .close, .raise, .up, .slide, .offset{
| |
| background: none;
| |
| border: 2px solid;
| |
| font: inherit;
| |
| line-height: 1;
| |
| margin: 0.5em;
| |
| padding: 1em 2em;
| |
| }
| |
|
| |
| h1 { font-weight: 400; }
| |
|
| |
| code {
| |
| color: #e4cb58;
| |
| font: inherit;
| |
| } | | } |