// Google Expando Config
$google_expando_radius: 2px; $google_expando_whsp: 48px; $google_materialshadow_ambient: ( shadow1: 0 1px 1.5px rgba(0, 0, 0, 0.12), shadow2: 0 1px 1px rgba(0, 0, 0, 0.24) ); $google_materialshadow: ( ambient: map-values($google_materialshadow_ambient) ); $google_expando_proportions: ( icon_size: 24px, card_size: 340px ); $google_expando_transition: ( transition_one: 0.2s all cubic-bezier(0.4, 0, 0.2, 1) ); // Google Expando Styles !Required! .google-expando { display: flex; flex-direction: column; align-items: center; justify-content: center; &--wrap { position: relative; width: 100%; } } .google-expando__icon { border-radius: 90%; /*box-shadow: map-get($google_materialshadow, ambient);*/ height: 24px;/*map-get($google_expando_proportions, icon_size);*/ width: 24px;/*map-get($google_expando_proportions, icon_size);*/ padding: /*$google_expando_whsp*/6px; transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1)/*map-values($google_expando_transition)*/; z-index: 2; text-align: center; background: #224687; color: white; svg { height: 24px;/*map-get($google_expando_proportions, icon_size);*/ vertical-align: text-bottom; width: 24px;/*map-get($google_expando_proportions, icon_size);*/ fill: #FFFFFF; } &:hover { cursor: pointer; } } .google-expando__card { border-radius: 2px;/*$google_expando_radius;*/ /*box-shadow: map-get($google_materialshadow, ambient);*/ height: auto; max-width: 340px;/*map-get($google_expando_proportions, card_size);*/ margin: 0 auto; position: absolute; top: 16px; left: 0; right: 0; transform: scale(0) translateZ(0); transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);/*map-values($google_expando_transition);*/ transform-origin: top center; z-index: 1; background: white; opacity: 0; } // Google Expando State .google-expando__icon.active { transform: rotate(45deg); } .google-expando__card.active { height: auto; padding: 48px;/*$google_expando_whsp;*/ transform: scale(1) translateZ(0); opacity: 1; } // Google Expando Utility Helpers .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
Made on
Tilda