File size: 1,982 Bytes
271613e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
@use './variable' as *;
@mixin absolute($width: 100%, $height: 100%) {
position: absolute;
width: $width;
height: $height;
left: 0;
top: 0;
}
@mixin overflow-auto($direction: 'both') {
@if $direction == 'both' {
overflow: auto;
} @else {
overflow-#{$direction}: auto;
}
-webkit-overflow-scrolling: touch;
}
@mixin safe-area($prop, $value, $pos: 'bottom') {
#{$prop}: calc(#{$value} + env(safe-area-inset-#{$pos}));
}
@mixin breadcrumb {
background: var(--darker-background);
color: var(--primary);
user-select: text;
margin-bottom: 10px;
word-break: break-all;
padding: $padding;
font-size: $font-size-l;
min-height: 40px;
border-bottom: 1px solid var(--border);
}
@mixin control {
@include absolute(100%, 40px);
cursor: default;
font-size: 0;
background: var(--darker-background);
color: var(--primary);
line-height: 20px;
border-bottom: 1px solid var(--border);
[class^='eruda-icon-'],
[class*=' icon-'] {
display: inline-block;
padding: 10px;
font-size: $font-size-l;
position: absolute;
top: 0;
cursor: pointer;
transition: color $anim-duration;
&:active,
&.active {
color: var(--accent);
}
}
}
@mixin clear-float {
&:after {
content: '';
display: block;
clear: both;
}
}
@mixin right-btn {
.btn {
margin-left: 5px;
float: right;
color: var(--primary);
width: 18px;
height: 18px;
font-size: $font-size-l;
cursor: pointer;
transition: color $anim-duration;
&.filter-text {
width: auto;
max-width: 80px;
font-size: $font-size;
overflow: hidden;
font-weight: normal;
text-overflow: ellipsis;
display: inline-block;
}
&:active {
color: var(--accent);
}
&.btn-disabled {
color: inherit !important;
cursor: default !important;
pointer-events: none;
opacity: 0.5;
* {
pointer-events: none;
}
}
}
}
|