MyCrypto/common/sass/mixins.scss

107 lines
2.0 KiB
SCSS

@import './variables';
@import '~bootstrap-sass/assets/stylesheets/bootstrap/mixins';
@mixin bg-gradient {
background: $ether-navy;
background: linear-gradient(149deg, #132a45, #143a56, #21a4ce, #19b4ad);
}
@mixin reset-button {
margin: 0;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
@mixin clearfix {
&:after {
content: '';
display: table;
clear: both;
}
}
@mixin mono {
font-family: $font-family-monospace;
font-weight: normal;
letter-spacing: 0.02em;
}
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Alpha agreement, noscript, bad browser, etc.
@mixin cover-message {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: $brand-info;
z-index: $zindex-top;
&-content {
max-width: 580px;
padding: 20px;
margin: 0 auto;
color: #fff;
text-shadow: 1px 1px 1px rgba(#000, 0.12);
overflow: auto;
h2 {
font-size: 40px;
margin-bottom: 20px;
}
p {
font-size: 20px;
margin-bottom: 15px;
a {
color: #fff;
text-decoration: underline;
}
}
}
}
@mixin triangle($size, $color, $direction) {
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: $size / 2;
@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
}
}
@mixin show-tooltip-on-hover {
&:hover .Tooltip {
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%) translateY(-8px);
transition-delay: 400ms, 400ms, 300ms;
}
}
@mixin input-shadow($color) {
box-shadow: inset 0 1px 1px rgba(black, 0.075), 0 0 1px rgba($color, 0.5);
}
@mixin input-focus-shadow($color) {
box-shadow: inset 0 1px 2px rgba(black, 0.125), 0 0 1px rgba($color, 0.5);
}