|
|
Linha 762: |
Linha 762: |
| /* Teste */ | | /* Teste */ |
|
| |
|
| // Animate the size, inside
| | body { |
| .fill:hover,
| | margin: 0; |
| .fill:focus {
| | min-height: 100vh; |
| box-shadow: inset 0 0 0 2em var(--hover); | | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| } | | } |
|
| |
|
| // Animate the size, outside
| | .divv{ |
| .pulse:hover,
| | height: 100px; |
| .pulse:focus {
| | width: 300px; |
| animation: pulse 1s; | | position: relative; |
| box-shadow: 0 0 0 2em transparent; | | display: flex; |
| }
| | align-items: center; |
| | | justify-content: center; |
| @keyframes pulse {
| | font: 1.5rem sans-serif; |
| 0% { box-shadow: 0 0 0 0 var(--hover); } | | cursor: pointer; |
| | will-change: transform; |
| } | | } |
|
| |
|
| // Stack multiple shadows, one from the left, the other from the right
| | .divv::before, |
| .close:hover, | | .divv::after { |
| .close:focus { | | position: absolute; |
| box-shadow: | | top: 0; |
| inset -3.5em 0 0 0 var(--hover),
| | left: 0; |
| inset 3.5em 0 0 0 var(--hover);
| | content: ''; |
| | display: block; |
| | background-color: deeppink; |
| | transition: all 250ms ease-in-out; |
| } | | } |
|
| |
|
| // Size can also be negative; see how it's smaller than the element
| | .divv::before { |
| .raise:hover, | | width: 2px; |
| .raise:focus {
| | height: 100px; |
| box-shadow: 0 0.5em 0.5em -0.4em var(--hover); | | box-shadow: 298px 0 deeppink; |
| transform: translateY(-0.25em); | |
| } | | } |
|
| |
|
| // Animating from the bottom
| | .divv::after { |
| .up:hover,
| | height: 2px; |
| .up:focus {
| | width: 300px; |
| box-shadow: inset 0 -3.25em 0 0 var(--hover); | | box-shadow: 0 98px deeppink; |
| } | | } |
|
| |
|
| // And from the left
| | .divv:hover::before { |
| .slide:hover, | | left: -10px; |
| .slide:focus {
| | box-shadow: 318px 0 deeppink; |
| box-shadow: inset 6.5em 0 0 0 var(--hover); | |
| } | | } |
|
| |
|
| // Multiple shadows, one on the outside, another on the inside
| | .divv:hover::after { |
| .offset {
| | top: -10px; |
| box-shadow:
| | box-shadow: 0 118px deeppink; |
| 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);
| |
| }
| |
| }
| |
| | |
| //=== Set button colors
| |
| // If you wonder why use Sass vars or CSS custom properties...
| |
| // Make a map with the class names and matching colors
| |
| $colors: (
| |
| fill: #a972cb,
| |
| pulse: #ef6eae,
| |
| 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 {
| |
| .#{$button} { | |
| --color: #{$color};
| |
| --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.
| |
| .buttons div{
| |
| 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;
| |
| }
| |
| | |
| // Basic button styles
| |
| .buttons div{
| |
| 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;
| |
| } | | } |