open-vault/ui/app/styles/utils/mixins.scss
madalynrose 2b41283a91
UI console (#4631)
* adding columnify and ember-cli-cjs-transform

* add yargs-parser

* remove vendored yargs-parser tokenizer and use cjs transform to import it from actual yargs-parser

* add clear command that clears the log, but maintains history

* make codemirror have no gutter and be auto-height when rendered in the console output log

* add fullscreen command and hook up fullscreen toggle button

* hook up copy button
2018-05-25 16:33:22 -04:00

63 lines
1.6 KiB
SCSS

@mixin css-arrow($vertical-direction, $size, $color, $border-width, $border-color, $left: 50%, $left-offset: 0px) {
& {
border: 1px solid $border-color;
}
&:after,
&:before {
@if ($vertical-direction == 'top') {
bottom: 100%;
} @else {
top: 100%;
}
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba($color, 0);
border-bottom-color: $color;
border-width: $size;
left: calc(#{$left} + #{$left-offset});
margin-left: -$size;
}
&:before {
border-color: rgba($border-color, 0);
border-bottom-color: $border-color;
border-width: $size + round(1.41421356 * $border-width);
left: calc(#{$left} + #{$left-offset});
margin-left: -($size + round(1.41421356 * $border-width));
}
&:before,
&:after {
@if ($vertical-direction == 'bottom') {
transform: rotate(180deg);
}
}
@at-root .ember-basic-dropdown-content--left#{&} {
&:after,
&:before {
left: auto;
right: calc(#{$left} + #{$left-offset} - #{$size});
}
}
}
@mixin css-top-arrow($size, $color, $border-width, $border-color, $left: 50%, $left-offset: 0px) {
@include css-arrow('top', $size, $color, $border-width, $border-color, $left, $left-offset);
}
@mixin css-bottom-arrow($size, $color, $border-width, $border-color, $left: 50%, $left-offset: 0px) {
@include css-arrow('bottom', $size, $color, $border-width, $border-color, $left, $left-offset);
}
@mixin vault-block {
&:not(:last-child) {
margin-bottom: (5/14) + 0rem;
}
}