| 1 | @import "bulma/sass/components/level.sass";
|
| 2 |
|
| 3 | .cc-global-header {
|
| 4 | position: relative;
|
| 5 | background-color: $color-black;
|
| 6 | color: $color-white;
|
| 7 | z-index: 90;
|
| 8 |
|
| 9 | &.is-active {
|
| 10 | .global-header-content {
|
| 11 | max-height: 60rem;
|
| 12 | padding-top: $space-big;
|
| 13 | padding-bottom: $space-big;
|
| 14 | }
|
| 15 | }
|
| 16 | .open-tab {
|
| 17 | position: absolute;
|
| 18 | padding: 0.5rem 1rem;
|
| 19 | right: 0;
|
| 20 | bottom: -2rem;
|
| 21 | background-color: $color-black;
|
| 22 | color: $white;
|
| 23 | border-radius: 0 0 0.25rem 0.25rem;
|
| 24 | }
|
| 25 | .global-header-content {
|
| 26 | max-height: 0;
|
| 27 | padding-top: 0;
|
| 28 | padding-bottom: 0;
|
| 29 | overflow: hidden;
|
| 30 | transition: all 1s ease;
|
| 31 |
|
| 32 | .global-header-header {
|
| 33 | padding-top: $space-normal;
|
| 34 | .main-logo {
|
| 35 | svg {
|
| 36 | width: 16rem;
|
| 37 | }
|
| 38 | }
|
| 39 | }
|
| 40 | .donate-section {
|
| 41 | h5 {
|
| 42 | color: $white;
|
| 43 | }
|
| 44 | .donate {
|
| 45 | margin-top: $space-big;
|
| 46 | color: $color-black;
|
| 47 | svg {
|
| 48 | margin-right: 1rem;
|
| 49 | width: 2rem;
|
| 50 | height: 2rem;
|
| 51 | }
|
| 52 | }
|
| 53 | }
|
| 54 | .products {
|
| 55 | padding-bottom: $space-normal;
|
| 56 | .product-list {
|
| 57 | display: grid;
|
| 58 | grid-gap: 1rem;
|
| 59 | grid-template-columns: repeat(3, auto);
|
| 60 | width: 100%;
|
| 61 | .product-item {
|
| 62 | flex-direction: column;
|
| 63 | align-items: flex-start;
|
| 64 | flex-shrink: 1;
|
| 65 | color: $color-white;
|
| 66 | strong {
|
| 67 | display: flex;
|
| 68 | color: $color-dark-turquoise;
|
| 69 | line-height: 1.2rem;
|
| 70 | margin-bottom: 0.5rem;
|
| 71 | &:after {
|
| 72 | content: "";
|
| 73 | display: inline-block;
|
| 74 | width: 1.2rem;
|
| 75 | height: 1.2rem;
|
| 76 | margin-left: 0.5rem;
|
| 77 | background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 6C7.55228 6 8 5.55228 8 5C8 4.44772 7.55228 4 7 4L7 6ZM17 13C17 12.4477 16.5523 12 16 12C15.4477 12 15 12.4477 15 13H17ZM7 4L4 4L4 6L7 6L7 4ZM2 6V16H4V6H2ZM4 18H15V16H4V18ZM17 16V13H15V16H17ZM15 18C16.1046 18 17 17.1046 17 16H15H15V18ZM2 16C2 17.1046 2.89543 18 4 18V16L4 16H2ZM4 4C2.89543 4 2 4.89543 2 6H4L4 6L4 4Z' fill='%2305B5DA'/%3E%3Cpath d='M8.29289 10.2656C7.90237 10.6562 7.90237 11.2893 8.29289 11.6798C8.68342 12.0704 9.31658 12.0704 9.70711 11.6798L8.29289 10.2656ZM16.9727 3H17.9727V2H16.9727V3ZM15.9727 9C15.9727 9.55228 16.4205 10 16.9727 10C17.525 10 17.9727 9.55228 17.9727 9H15.9727ZM11 2C10.4477 2 10 2.44772 10 3C10 3.55228 10.4477 4 11 4V2ZM9.70711 11.6798L17.6799 3.70711L16.2656 2.29289L8.29289 10.2656L9.70711 11.6798ZM15.9727 3V9H17.9727V3H15.9727ZM16.9727 2H11V4H16.9727V2Z' fill='%2305B5DA'/%3E%3C/svg%3E%0A");
|
| 78 | }
|
| 79 | }
|
| 80 | &:hover {
|
| 81 | strong {
|
| 82 | text-decoration: underline;
|
| 83 | }
|
| 84 | }
|
| 85 | }
|
| 86 | }
|
| 87 | }
|
| 88 | }
|
| 89 | @include tablet() {
|
| 90 | padding: 0 $space-big;
|
| 91 | }
|
| 92 | @include mobile() {
|
| 93 | padding-right: $space-bigger;
|
| 94 | padding-left: $space-bigger;
|
| 95 | .global-header-header {
|
| 96 | .main-logo {
|
| 97 | svg {
|
| 98 | width: 14rem;
|
| 99 | }
|
| 100 | }
|
| 101 | }
|
| 102 | .global-header-header {
|
| 103 | text-align: center;
|
| 104 | }
|
| 105 | .donate-section {
|
| 106 | text-align: center;
|
| 107 | h5 {
|
| 108 | line-height: 2rem;
|
| 109 | }
|
| 110 | .donate {
|
| 111 | margin-top: $space-small;
|
| 112 | }
|
| 113 | }
|
| 114 | .products {
|
| 115 | .product-list {
|
| 116 | grid-template-columns: repeat(2, auto);
|
| 117 | }
|
| 118 | }
|
| 119 | }
|
| 120 | }
|