_main.scss (2631B)
1 /// 2 /// Dimension by HTML5 UP 3 /// html5up.net | @ajlkn 4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 /// 6 7 /* Main */ 8 9 #main { 10 @include vendor('flex-grow', '1'); 11 @include vendor('flex-shrink', '1'); 12 @include vendor('display', 'flex'); 13 @include vendor('align-items', 'center'); 14 @include vendor('justify-content', 'center'); 15 @include vendor('flex-direction', 'column'); 16 position: relative; 17 max-width: 100%; 18 z-index: 3; 19 20 article { 21 @include vendor('transform', 'translateY(0.25rem)'); 22 @include vendor('transition', ( 23 'opacity #{_duration(article)} ease-in-out', 24 'transform #{_duration(article)} ease-in-out' 25 )); 26 @include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0)); 27 position: relative; 28 width: 40rem; 29 max-width: 100%; 30 background-color: transparentize(_palette(bg), 0.15); 31 border-radius: _size(border-radius); 32 opacity: 0; 33 34 &.active { 35 @include vendor('transform', 'translateY(0)'); 36 opacity: 1; 37 } 38 39 .close { 40 display: block; 41 position: absolute; 42 top: 0; 43 right: 0; 44 width: 4rem; 45 height: 4rem; 46 cursor: pointer; 47 text-indent: 4rem; 48 overflow: hidden; 49 white-space: nowrap; 50 51 &:before { 52 @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); 53 content: ''; 54 display: block; 55 position: absolute; 56 top: 0.75rem; 57 left: 0.75rem; 58 width: 2.5rem; 59 height: 2.5rem; 60 border-radius: 100%; 61 background-position: center; 62 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(border)}; stroke-width: 1; }</style><line x1="2" y1="2" x2="18" y2="18" /><line x1="18" y1="2" x2="2" y2="18" /></svg>'); 63 background-size: 20px 20px; 64 background-repeat: no-repeat; 65 } 66 67 &:hover { 68 &:before { 69 background-color: _palette(border-bg); 70 } 71 } 72 73 &:active { 74 &:before { 75 background-color: _palette(border-bg-alt); 76 } 77 } 78 } 79 } 80 81 @include breakpoint('<=small') { 82 article { 83 @include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0)); 84 85 .close { 86 &:before { 87 top: 0.875rem; 88 left: 0.875rem; 89 width: 2.25rem; 90 height: 2.25rem; 91 background-size: 14px 14px; 92 } 93 } 94 } 95 } 96 97 @include breakpoint('<=xsmall') { 98 article { 99 @include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0)); 100 } 101 } 102 }