$sticky-width: 60px; $sticky-height: 60px; $sticky-btn-height: 90px; $sticky-btn-width: (small: 50px, medium: 60px, large: 60px, xlarge: 80px ); $sticky-txt-width: 280px; //$sticky-btn-margin: $sticky-width - $sticky-btn-width; .o-sticky { position: fixed; @include breakpoint(small only) { bottom: 0; width: 50%; } @include breakpoint(medium) { top: 50%; transform: translateY(-50%); &:hover, &:focus { .o-sticky__txt { display: block; } } } @include m(right) { right: 0; text-align: right; @include breakpoint(medium) { @include e(btn) { border-bottom-right-radius: 0; border-top-right-radius: 0; } } } @include m(left) { left: 0; text-align: left; @include breakpoint(medium) { @include e(btn) { border-bottom-left-radius: 0; border-top-left-radius: 0; } } } @include m(disabled) { &, a { cursor: not-allowed; pointer-events: none !important; } } @include e(wrap) { flex-wrap: nowrap; height: 100%; @include breakpoint(medium) { @include flex-align($x: center, $y: middle); } @include breakpoint(small only) { @include m(right) { @include flex-align($x: right, $y: middle); } @include m(left) { @include flex-align($x: left, $y: middle); } } } @include e(btn) { @include button($background: $ub-white, $background-hover: darken($ub-white, 10%), $color: $ub-txt); @include breakpoint(medium) { @include button($background: rgba($ub-panel-bg, .7), $background-hover: rgba($ub-white, .7), $color: $ub-txt); } @include button-expand; border: 1px solid darken($ub-panel-bg, 5%); height: $sticky-btn-height; margin-bottom: 0; padding: 0 $ub-xs-padding; @include breakpoint(small only) { border-radius: 0; padding: 0; } @each $breakpoint, $btn-width in $sticky-btn-width { @include breakpoint($breakpoint) { min-width: $btn-width; } } } @include e(icon) { @include flex-grid-column(shrink, 0); } @include e(txt) { @include flex-grid-column(shrink, 0); max-width: $sticky-txt-width; text-align: left; width: auto; @include breakpoint(medium) { display: none; padding-left: $ub-xs-padding; } } @include e(arrow-header) { @include txt-element(arrow-header); } @include e(arrow-subheader) { @include txt-element(arrow-subheader); } }