mirror of
https://github.com/bitwarden/browser
synced 2025-12-22 11:13:46 +00:00
Apply Prettier (#1202)
This commit is contained in:
Oscar Hinton
GitHub
@@ -1,116 +1,132 @@
|
||||
@import "variables.scss";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
background-color: $background-color-alt2;
|
||||
color: $text-color;
|
||||
background-color: $background-color-alt2;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
background-color: themed('backgroundColorAlt2');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
background-color: themed("backgroundColorAlt2");
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-sans-serif;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-family-sans-serif;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 10px;
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("primaryColor");
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
@include themify($themes) {
|
||||
color: darken(themed('primaryColor'), 6%);
|
||||
}
|
||||
color: darken(themed("primaryColor"), 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
background-color: themed('inputBackgroundColor');
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
background-color: themed("inputBackgroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-sans-serif;
|
||||
line-height: $line-height-base;
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-sans-serif;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
div:not(.modal)::-webkit-scrollbar, .cdk-virtual-scroll-viewport::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
div:not(.modal)::-webkit-scrollbar,
|
||||
.cdk-virtual-scroll-viewport::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
div:not(.modal)::-webkit-scrollbar-track, .cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
div:not(.modal)::-webkit-scrollbar-track,
|
||||
.cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div:not(.modal)::-webkit-scrollbar-thumb, .cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
margin-right: 1px;
|
||||
div:not(.modal)::-webkit-scrollbar-thumb,
|
||||
.cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
margin-right: 1px;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("scrollbarColor");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('scrollbarColor');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('scrollbarHoverColor');
|
||||
}
|
||||
background-color: themed("scrollbarHoverColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// cdk-virtual-scroll
|
||||
.cdk-virtual-scroll-viewport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.cdk-virtual-scroll-content-wrapper {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,429 +1,447 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.box-header {
|
||||
margin: 0 10px 5px 10px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
.box-header {
|
||||
margin: 0 10px 5px 10px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
background-color: transparent;
|
||||
margin-left: 4px;
|
||||
font-size: $font-size-small;
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
|
||||
.box-content {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('boxBackgroundColor');
|
||||
}
|
||||
|
||||
&.box-content-padded {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
&.condensed .box-content-row, .box-content-row.condensed {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&.no-hover .box-content-row, .box-content-row.no-hover {
|
||||
&:hover, &:focus {
|
||||
background-color: initial;
|
||||
}
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
margin: 5px 10px;
|
||||
font-size: $font-size-small;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
.toggle {
|
||||
background-color: transparent;
|
||||
margin-left: 4px;
|
||||
font-size: $font-size-small;
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("boxBackgroundColor");
|
||||
}
|
||||
|
||||
&.box-content-padded {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
&.condensed .box-content-row,
|
||||
.box-content-row.condensed {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&.no-hover .box-content-row,
|
||||
.box-content-row.no-hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
margin: 5px 10px;
|
||||
font-size: $font-size-small;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-row {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: calc(100% - 10px);
|
||||
border-bottom: 1px solid #000000;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: calc(100% - 10px);
|
||||
border-bottom: 1px solid #000000;
|
||||
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed('boxBorderColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed("boxBorderColor");
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child, &:last-child {
|
||||
border-radius: $border-radius;
|
||||
|
||||
.progress {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:before {
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
@include themify($themes) {
|
||||
background-color: themed('boxBackgroundHoverColor');
|
||||
> * {
|
||||
background-color: themed('boxBackgroundHoverColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pre {
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&.pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.row-label, label:not(.unstyled) {
|
||||
font-size: $font-size-small;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
|
||||
.sub-label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.text, .detail {
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: $font-size-small;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
.img-right {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.row-main {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&.box-content-row-flex, .box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
|
||||
&.box-content-row-slider, &.box-content-row-multi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&.box-content-row-multi {
|
||||
width: 100%;
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input + label.sr-only + select {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> a {
|
||||
padding: 8px 8px 8px 4px;
|
||||
margin: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('dangerColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
|
||||
label, .row-label {
|
||||
font-size: $font-size-base;
|
||||
display: inline;
|
||||
width: initial;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
margin: 0 0 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-input {
|
||||
label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: right;
|
||||
width: 45px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-slider {
|
||||
input[type="range"] {
|
||||
height: 10px;
|
||||
width: 110px !important;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
text-align: right;
|
||||
width: 45px !important;
|
||||
}
|
||||
|
||||
label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
> .radio {
|
||||
margin-right: 5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]), textarea {
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed('inputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: 1px solid #000000;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@include themify($themes) {
|
||||
border-color: themed('inputBorderColor');
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
|
||||
.row-btn {
|
||||
cursor: pointer;
|
||||
padding: 10px 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('boxRowButtonColor');
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
@include themify($themes) {
|
||||
color: themed('boxRowButtonHoverColor');
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include themify($themes) {
|
||||
color: themed('disabledIconColor');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
color: themed('disabledIconColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-pad .row-btn {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.box-draggable-row) {
|
||||
.action-buttons .row-btn:last-child {
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-draggable-row {
|
||||
&.box-content-row-checkbox {
|
||||
input[type="checkbox"] + .drag-handle {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
padding: 10px 2px 10px 8px;
|
||||
user-select: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
&.cdk-drag-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('boxBackgroundColor');
|
||||
}
|
||||
}
|
||||
|
||||
select.field-type {
|
||||
margin: 5px 0 0 25px;
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
|
||||
.row-sub-icon {
|
||||
@include themify($themes) {
|
||||
color: themed('disabledIconColor');
|
||||
}
|
||||
}
|
||||
|
||||
.row-sub-label {
|
||||
margin: 0 15px;
|
||||
white-space: nowrap;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
border-radius: $border-radius;
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
height: 5px;
|
||||
overflow: hidden;
|
||||
margin: 5px -15px -10px;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
&:last-child {
|
||||
&:before {
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
@include themify($themes) {
|
||||
background-color: themed("boxBackgroundHoverColor");
|
||||
> * {
|
||||
background-color: themed("boxBackgroundHoverColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pre {
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&.pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.row-label,
|
||||
label:not(.unstyled) {
|
||||
font-size: $font-size-small;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 34px;
|
||||
height: 100%;
|
||||
margin-left: -5px;
|
||||
.sub-label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.text,
|
||||
.detail {
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: $font-size-small;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
.img-right {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.row-main {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&.box-content-row-flex,
|
||||
.box-content-row-flex,
|
||||
&.box-content-row-checkbox,
|
||||
&.box-content-row-input,
|
||||
&.box-content-row-slider,
|
||||
&.box-content-row-multi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&.box-content-row-multi {
|
||||
width: 100%;
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input + label.sr-only + select {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> a {
|
||||
padding: 8px 8px 8px 4px;
|
||||
margin: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("dangerColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-checkbox,
|
||||
&.box-content-row-input,
|
||||
&.box-content-row-slider {
|
||||
label,
|
||||
.row-label {
|
||||
font-size: $font-size-base;
|
||||
display: inline;
|
||||
width: initial;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
margin: 0 0 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-input {
|
||||
label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: right;
|
||||
width: 45px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-slider {
|
||||
input[type="range"] {
|
||||
height: 10px;
|
||||
width: 110px !important;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
text-align: right;
|
||||
width: 45px !important;
|
||||
}
|
||||
|
||||
label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
> .radio {
|
||||
margin-right: 5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
textarea {
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed("inputPlaceholderColor");
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: 1px solid #000000;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@include themify($themes) {
|
||||
border-color: themed("inputBorderColor");
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
|
||||
.row-btn {
|
||||
cursor: pointer;
|
||||
padding: 10px 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("boxRowButtonColor");
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
color: themed("boxRowButtonHoverColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include themify($themes) {
|
||||
color: themed("disabledIconColor");
|
||||
}
|
||||
|
||||
&.icon-small {
|
||||
min-width: 25px;
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
color: themed("disabledIconColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-pad .row-btn {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.box-draggable-row) {
|
||||
.action-buttons .row-btn:last-child {
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-draggable-row {
|
||||
&.box-content-row-checkbox {
|
||||
input[type="checkbox"] + .drag-handle {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
padding: 10px 2px 10px 8px;
|
||||
user-select: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.cdk-drag-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("boxBackgroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
select.field-type {
|
||||
margin: 5px 0 0 25px;
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
|
||||
.row-sub-icon {
|
||||
@include themify($themes) {
|
||||
color: themed("disabledIconColor");
|
||||
}
|
||||
}
|
||||
|
||||
.row-sub-label {
|
||||
margin: 0 15px;
|
||||
white-space: nowrap;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
height: 5px;
|
||||
overflow: hidden;
|
||||
margin: 5px -15px -10px;
|
||||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 34px;
|
||||
height: 100%;
|
||||
margin-left: -5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
|
||||
&.icon-small {
|
||||
min-width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,114 +1,117 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.btn, .vault .footer button, .modal-footer button {
|
||||
border-radius: $border-radius;
|
||||
padding: 7px 15px;
|
||||
border: 1px solid #000000;
|
||||
font-size: $font-size-base;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
.btn,
|
||||
.vault .footer button,
|
||||
.modal-footer button {
|
||||
border-radius: $border-radius;
|
||||
padding: 7px 15px;
|
||||
border: 1px solid #000000;
|
||||
font-size: $font-size-base;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("buttonBackgroundColor");
|
||||
border-color: themed("buttonBorderColor");
|
||||
color: themed("buttonColor");
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@include themify($themes) {
|
||||
color: themed("buttonPrimaryColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
@include themify($themes) {
|
||||
color: themed("buttonDangerColor");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
cursor: pointer;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('buttonBackgroundColor');
|
||||
border-color: themed('buttonBorderColor');
|
||||
color: themed('buttonColor');
|
||||
background-color: darken(themed("buttonBackgroundColor"), 1.5%);
|
||||
border-color: darken(themed("buttonBorderColor"), 17%);
|
||||
color: darken(themed("buttonColor"), 10%);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@include themify($themes) {
|
||||
color: themed('buttonPrimaryColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: darken(themed("buttonPrimaryColor"), 6%);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
@include themify($themes) {
|
||||
color: themed('buttonDangerColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: darken(themed("buttonDangerColor"), 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
cursor: pointer;
|
||||
&:focus:not([disabled]) {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: darken(themed('buttonBackgroundColor'), 1.5%);
|
||||
border-color: darken(themed('buttonBorderColor'), 17%);
|
||||
color: darken(themed('buttonColor'), 10%);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@include themify($themes) {
|
||||
color: darken(themed('buttonPrimaryColor'), 6%);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
@include themify($themes) {
|
||||
color: darken(themed('buttonDangerColor'), 6%);
|
||||
}
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: darken(themed("buttonBackgroundColor"), 6%);
|
||||
border-color: darken(themed("buttonBorderColor"), 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not([disabled]) {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
&[disabled] {
|
||||
opacity: 0.65;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: darken(themed('buttonBackgroundColor'), 6%);
|
||||
border-color: darken(themed('buttonBorderColor'), 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.65;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.link {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.link {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
.btn {
|
||||
&:focus {
|
||||
outline: auto;
|
||||
}
|
||||
.btn {
|
||||
&:focus {
|
||||
outline: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.fa-spinner {
|
||||
position: absolute;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:disabled:not(.manual),
|
||||
&.loading {
|
||||
.fa-spinner {
|
||||
position: absolute;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:disabled:not(.manual), &.loading {
|
||||
.fa-spinner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,52 +1,70 @@
|
||||
html.os_windows {
|
||||
body {
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
body {
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
&.theme_dark body {
|
||||
border-top-color: #000000;
|
||||
}
|
||||
&.theme_dark body {
|
||||
border-top-color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
html.os_macos {
|
||||
body.layout_frontend {
|
||||
-webkit-app-region: drag;
|
||||
body.layout_frontend {
|
||||
-webkit-app-region: drag;
|
||||
|
||||
button, a, i, b, span, input, p, h1, h2, h3, h4, h5, h6, img, select,
|
||||
textarea, label, .box, .modal-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
button,
|
||||
a,
|
||||
i,
|
||||
b,
|
||||
span,
|
||||
input,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
img,
|
||||
select,
|
||||
textarea,
|
||||
label,
|
||||
.box,
|
||||
.modal-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
}
|
||||
|
||||
#login-page {
|
||||
.content {
|
||||
a.settings-icon {
|
||||
position: absolute;
|
||||
left: unset;
|
||||
right: 20px;
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#login-page {
|
||||
.content {
|
||||
a.settings-icon {
|
||||
position: absolute;
|
||||
left: unset;
|
||||
right: 20px;
|
||||
.vault .header-search {
|
||||
-webkit-app-region: drag;
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
input,
|
||||
i {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
}
|
||||
|
||||
.vault .header-search {
|
||||
-webkit-app-region: drag;
|
||||
.vault .mac-bar {
|
||||
height: 48px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
input, i {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
}
|
||||
|
||||
.vault .mac-bar {
|
||||
height: 48px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.vault > .groupings > .content > .inner-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
.vault > .groupings > .content > .inner-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.row {
|
||||
display: flex;
|
||||
margin: 0 -15px;
|
||||
display: flex;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
padding: 0 15px;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
@@ -1,171 +1,172 @@
|
||||
.header {
|
||||
-webkit-app-region: drag;
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
border-bottom: 1px solid #000000;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 1fr 25%;
|
||||
grid-column-gap: 5px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
-webkit-app-region: drag;
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
border-bottom: 1px solid #000000;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 1fr 25%;
|
||||
grid-column-gap: 5px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerBackgroundColor');
|
||||
border-bottom-color: themed('headerBorderColor');
|
||||
@include themify($themes) {
|
||||
background-color: themed("headerBackgroundColor");
|
||||
border-bottom-color: themed("headerBorderColor");
|
||||
}
|
||||
|
||||
app-search {
|
||||
grid-column-start: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
app-account-switcher {
|
||||
justify-self: end;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 0 7px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
|
||||
.fa {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 15px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("headerInputPlaceholderColor");
|
||||
}
|
||||
}
|
||||
|
||||
app-search {
|
||||
grid-column-start: 2;
|
||||
width: 100%;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 5px 10px 5px 30px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
app-account-switcher {
|
||||
justify-self: end;
|
||||
height: 100%;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("headerInputBackgroundColor");
|
||||
color: themed("headerInputColor");
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 0 7px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
&:focus {
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
|
||||
.fa {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 15px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headerInputPlaceholderColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("headerInputBackgroundFocusColor");
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 5px 10px 5px 30px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerInputBackgroundColor');
|
||||
color: themed('headerInputColor');
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerInputBackgroundFocusColor');
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed('headerInputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed("headerInputPlaceholderColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-switcher {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-column-gap: 5px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-column-gap: 5px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("accountSwitcherTextColor");
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
color: themed('accountSwitcherTextColor');
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerBorderColor');
|
||||
color: themed('accountSwitcherTextColor');
|
||||
}
|
||||
background-color: themed("headerBorderColor");
|
||||
color: themed("accountSwitcherTextColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-switcher-dropdown {
|
||||
@include themify($themes) {
|
||||
background-color: themed("accountSwitcherBackgroundColor");
|
||||
}
|
||||
margin-right: 5px;
|
||||
margin-top: 1px; // Fix for border-bottom in header
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: $border-radius;
|
||||
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('accountSwitcherBackgroundColor');
|
||||
}
|
||||
margin-right: 5px;
|
||||
margin-top: 1px; // Fix for border-bottom in header
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
|
||||
border-radius: $border-radius;
|
||||
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt2');
|
||||
}
|
||||
}
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
.accounts {
|
||||
padding: 4px 0;
|
||||
|
||||
.account {
|
||||
display: grid;
|
||||
grid-column-gap: 5px;
|
||||
grid-template:
|
||||
[row1-start] "email status" [row1-end]
|
||||
[row2-start] "server server" [row2-end]
|
||||
/ 1fr auto;
|
||||
align-items: baseline;
|
||||
|
||||
.server {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.email {
|
||||
font-size: $font-size-large
|
||||
}
|
||||
|
||||
.status {
|
||||
font-style: italic;
|
||||
grid-area: status;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt2");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
@include themify($themes) {
|
||||
background: themed('borderColor');
|
||||
}
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: 1px;
|
||||
position: relative;
|
||||
}
|
||||
.accounts {
|
||||
padding: 4px 0;
|
||||
|
||||
.add {
|
||||
margin: 4px 0;
|
||||
.account {
|
||||
display: grid;
|
||||
grid-column-gap: 5px;
|
||||
grid-template:
|
||||
[row1-start] "email status" [row1-end]
|
||||
[row2-start] "server server" [row2-end]
|
||||
/ 1fr auto;
|
||||
align-items: baseline;
|
||||
|
||||
.server {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.email {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-style: italic;
|
||||
grid-area: status;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
@include themify($themes) {
|
||||
background: themed("borderColor");
|
||||
}
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,143 +1,146 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.list > a {
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
background-color: themed("listItemBackgroundColor");
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: calc(100% - 10px);
|
||||
border-bottom: 1px solid #000000;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
background-color: themed('listItemBackgroundColor');
|
||||
border-bottom-color: themed("listItemBorderColor");
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child:before {
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
@include themify($themes) {
|
||||
background-color: themed("listItemBackgroundHoverColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-left: 5px solid #000000;
|
||||
padding-left: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("primaryColor");
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.active) {
|
||||
border-left: 5px solid #000000;
|
||||
padding-left: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
.text,
|
||||
.detail {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: $font-size-small;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: left;
|
||||
height: 36px;
|
||||
width: 34px;
|
||||
margin-left: -5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: calc(100% - 10px);
|
||||
border-bottom: 1px solid #000000;
|
||||
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed('listItemBorderColor');
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child:before {
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
@include themify($themes) {
|
||||
background-color: themed('listItemBackgroundHoverColor');
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-left: 5px solid #000000;
|
||||
padding-left: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('primaryColor');
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.active) {
|
||||
border-left: 5px solid #000000;
|
||||
padding-left: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
.text, .detail {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: $font-size-small;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: left;
|
||||
height: 36px;
|
||||
width: 34px;
|
||||
margin-left: -5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: $border-radius;
|
||||
max-height: 20px;
|
||||
max-width: 20px;
|
||||
}
|
||||
img {
|
||||
border-radius: $border-radius;
|
||||
max-height: 20px;
|
||||
max-width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list > a.flex-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.item-icon {
|
||||
margin-left: -5px;
|
||||
margin-right: 4px;
|
||||
.item-icon {
|
||||
margin-left: -5px;
|
||||
margin-right: 4px;
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
.item-title {
|
||||
.title-badges {
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
.item-title {
|
||||
.title-badges {
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-details {
|
||||
font-size: $font-size-small;
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
.item-details {
|
||||
font-size: $font-size-small;
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-cipher-list-item {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.flex-cipher-list-item {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,441 +1,446 @@
|
||||
@import "variables.scss";
|
||||
|
||||
small {
|
||||
font-size: $font-size-small;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('primaryColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("primaryColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
@include themify($themes) {
|
||||
background-color: themed('successColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("successColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
@include themify($themes) {
|
||||
background-color: themed('dangerColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("dangerColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
@include themify($themes) {
|
||||
background-color: themed('infoColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("infoColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
@include themify($themes) {
|
||||
background-color: themed('warningColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("warningColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("primaryColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-success {
|
||||
@include themify($themes) {
|
||||
color: themed('successColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("successColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
@include themify($themes) {
|
||||
color: themed('dangerColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("dangerColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
@include themify($themes) {
|
||||
color: themed('warningColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("warningColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-default {
|
||||
@include themify($themes) {
|
||||
color: themed('textColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("textColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.font-weight-semibold {
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p.lead {
|
||||
font-size: $font-size-large;
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
font-size: $font-size-large;
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.monospaced {
|
||||
font-family: $font-family-monospace;
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
.show-whitespace {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.font-weight-bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
border: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.totp {
|
||||
.totp-code {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.totp-countdown {
|
||||
margin: 3px 3px 0 0;
|
||||
display: block;
|
||||
user-select: none;
|
||||
|
||||
.totp-sec {
|
||||
font-size: 0.85em;
|
||||
position: absolute;
|
||||
line-height: 32px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
fill: none;
|
||||
|
||||
@include themify($themes) {
|
||||
stroke: themed("totpStrokeColor");
|
||||
}
|
||||
|
||||
&.inner {
|
||||
stroke-width: 3;
|
||||
stroke-dasharray: 78.6;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
&.outer {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 88;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.low {
|
||||
.totp-sec,
|
||||
.totp-code {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 1.1em;
|
||||
@include themify($themes) {
|
||||
color: themed("dangerColor");
|
||||
}
|
||||
}
|
||||
|
||||
.totp-countdown {
|
||||
margin: 3px 3px 0 0;
|
||||
display: block;
|
||||
user-select: none;
|
||||
|
||||
.totp-sec {
|
||||
font-size: 0.85em;
|
||||
position: absolute;
|
||||
line-height: 32px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
fill: none;
|
||||
|
||||
@include themify($themes) {
|
||||
stroke: themed('totpStrokeColor');
|
||||
}
|
||||
|
||||
&.inner {
|
||||
stroke-width: 3;
|
||||
stroke-dasharray: 78.6;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
&.outer {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 88;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.low {
|
||||
.totp-sec, .totp-code {
|
||||
@include themify($themes) {
|
||||
color: themed('dangerColor');
|
||||
}
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
@include themify($themes) {
|
||||
stroke: themed('dangerColor');
|
||||
}
|
||||
}
|
||||
.totp-circle {
|
||||
@include themify($themes) {
|
||||
stroke: themed("dangerColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-block {
|
||||
font-size: $font-size-large;
|
||||
font-family: $font-family-monospace;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: $font-size-large;
|
||||
font-family: $font-family-monospace;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.modal-body & {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.modal-body & {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.password-wrapper {
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.password-number {
|
||||
@include themify($themes) {
|
||||
color: themed('passwordNumberColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("passwordNumberColor");
|
||||
}
|
||||
}
|
||||
|
||||
.password-special {
|
||||
@include themify($themes) {
|
||||
color: themed('passwordSpecialColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("passwordSpecialColor");
|
||||
}
|
||||
}
|
||||
|
||||
#duo-frame {
|
||||
background: url('../images/loading.svg') 0 0 no-repeat;
|
||||
height: 330px;
|
||||
margin: 0 -150px 15px -150px;
|
||||
background: url("../images/loading.svg") 0 0 no-repeat;
|
||||
height: 330px;
|
||||
margin: 0 -150px 15px -150px;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
#web-authn-frame {
|
||||
background: url('../images/loading.svg') 0 0 no-repeat;
|
||||
height: 250px;
|
||||
margin: 0 0 15px 0;
|
||||
background: url("../images/loading.svg") 0 0 no-repeat;
|
||||
height: 250px;
|
||||
margin: 0 0 15px 0;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
#hcaptcha_iframe {
|
||||
width: 100%;
|
||||
border: none;
|
||||
transition: height 0.25s linear;
|
||||
width: 100%;
|
||||
border: none;
|
||||
transition: height 0.25s linear;
|
||||
}
|
||||
|
||||
form, .form {
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
form,
|
||||
.form {
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px solid #000000;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
border-color: themed('inputBorderColor');
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text], input[type=number] {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 18px;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
margin-top: 4px;
|
||||
margin-left: -18px;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.radio {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 18px;
|
||||
margin-top: 4px;
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid #000000;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
|
||||
&.radio-mt-2 {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
margin-top: 4px;
|
||||
margin-left: -18px;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-color: themed("inputBorderColor");
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 18px;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
margin-top: 4px;
|
||||
margin-left: -18px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 18px;
|
||||
margin-top: 4px;
|
||||
|
||||
&.radio-mt-2 {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
margin-top: 4px;
|
||||
margin-left: -18px;
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app-root > #loading {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: $text-muted;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: $text-muted;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
@include themify($themes) {
|
||||
content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
|
||||
}
|
||||
@include themify($themes) {
|
||||
content: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
|
||||
}
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
cursor: move;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.callout {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #000000;
|
||||
border-left-width: 5px;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #000000;
|
||||
border-left-width: 5px;
|
||||
border-radius: 3px;
|
||||
@include themify($themes) {
|
||||
border-color: themed("calloutBorderColor");
|
||||
background-color: themed("calloutBackgroundColor");
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3.callout-heading {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.callout-primary {
|
||||
@include themify($themes) {
|
||||
border-color: themed('calloutBorderColor');
|
||||
background-color: themed('calloutBackgroundColor');
|
||||
border-left-color: themed("primaryColor");
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
margin-top: 0;
|
||||
@include themify($themes) {
|
||||
color: themed("primaryColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("infoColor");
|
||||
}
|
||||
|
||||
h3.callout-heading {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("infoColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-danger {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("dangerColor");
|
||||
}
|
||||
|
||||
&.callout-primary {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('primaryColor');
|
||||
}
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("dangerColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
}
|
||||
&.callout-success {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("successColor");
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('infoColor');
|
||||
}
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("successColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('infoColor');
|
||||
}
|
||||
}
|
||||
&.callout-warning {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("warningColor");
|
||||
}
|
||||
|
||||
&.callout-danger {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('dangerColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('dangerColor');
|
||||
}
|
||||
}
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("warningColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-success {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('successColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('successColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-warning {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('warningColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('warningColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
ul {
|
||||
padding-left: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.password-reprompt {
|
||||
text-align: left;
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.set-pin-modal {
|
||||
.box {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.box {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius:50% !important;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,13 @@ $border-radius-lg: $border-radius;
|
||||
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
|
||||
|
||||
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
$zindex-modal-backdrop: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
@@ -15,19 +21,19 @@ $zindex-modal: 1050 !default;
|
||||
// Padding applied to the modal body
|
||||
$modal-inner-padding: 10px !default;
|
||||
|
||||
$modal-dialog-margin: .5rem !default;
|
||||
$modal-dialog-margin: 0.5rem !default;
|
||||
$modal-dialog-margin-y-sm-up: 1.75rem !default;
|
||||
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
//$modal-content-bg: $background-color-alt !default;
|
||||
$modal-content-border-color: rgba($black, .2) !default;
|
||||
$modal-content-border-color: rgba($black, 0.2) !default;
|
||||
$modal-content-border-width: 1px !default;
|
||||
$modal-content-box-shadow-xs: none;
|
||||
$modal-content-box-shadow-sm-up: none;
|
||||
|
||||
$modal-backdrop-bg: $black !default;
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
$modal-backdrop-opacity: 0.5 !default;
|
||||
$modal-header-border-color: $border-color-dark !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
$modal-header-border-width: $modal-content-border-width !default;
|
||||
@@ -38,7 +44,7 @@ $modal-lg: 800px !default;
|
||||
$modal-md: 500px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
$modal-transition: transform .3s ease-out !default;
|
||||
$modal-transition: transform 0.3s ease-out !default;
|
||||
|
||||
$close-font-size: $font-size-base * 1.5 !default;
|
||||
$close-font-weight: bold !default;
|
||||
@@ -48,45 +54,44 @@ $close-text-shadow: 0 1px 0 $white !default;
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
|
||||
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Custom Added CSS animations
|
||||
|
||||
@keyframes modalshow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, -25%);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, -25%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backdropshow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
100% {
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
|
||||
@@ -96,234 +101,234 @@ $close-text-shadow: 0 1px 0 $white !default;
|
||||
// .modal-dialog - positioning shell for the actual modal
|
||||
// .modal-content - actual modal w/ bg and corners and stuff
|
||||
|
||||
|
||||
// Kill the scroll on the body
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal;
|
||||
//display: none;
|
||||
overflow: hidden;
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
.modal-open & {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal;
|
||||
//display: none;
|
||||
overflow: hidden;
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
.modal-open & {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: $modal-dialog-margin;
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
pointer-events: none;
|
||||
// When fading in the modal, animate it to slide down
|
||||
.modal.fade & {
|
||||
//@include transition($modal-transition);
|
||||
//transform: translate(0, -25%);
|
||||
animation: modalshow 0.3s ease-in;
|
||||
}
|
||||
//.modal.show & {
|
||||
// transform: translate(0, 0);
|
||||
//}
|
||||
transform: translate(0, 0);
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: $modal-dialog-margin;
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
pointer-events: none;
|
||||
// When fading in the modal, animate it to slide down
|
||||
.modal.fade & {
|
||||
//@include transition($modal-transition);
|
||||
//transform: translate(0, -25%);
|
||||
animation: modalshow 0.3s ease-in;
|
||||
}
|
||||
//.modal.show & {
|
||||
// transform: translate(0, 0);
|
||||
//}
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
||||
// counteract the pointer-events: none; in the .modal-dialog
|
||||
pointer-events: auto;
|
||||
//background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
//@include border-radius($border-radius-lg);
|
||||
//@include box-shadow($modal-content-box-shadow-xs);
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $modal-content-box-shadow-xs;
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
||||
// counteract the pointer-events: none; in the .modal-dialog
|
||||
pointer-events: auto;
|
||||
//background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
//@include border-radius($border-radius-lg);
|
||||
//@include box-shadow($modal-content-box-shadow-xs);
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $modal-content-box-shadow-xs;
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt");
|
||||
}
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
background-color: $modal-backdrop-bg;
|
||||
// Fade for backdrop
|
||||
&.fade {
|
||||
//opacity: 0;
|
||||
animation: backdropshow 0.1s ease-in;
|
||||
}
|
||||
//&.show {
|
||||
// opacity: $modal-backdrop-opacity;
|
||||
//}
|
||||
opacity: $modal-backdrop-opacity;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
background-color: $modal-backdrop-bg;
|
||||
// Fade for backdrop
|
||||
&.fade {
|
||||
//opacity: 0;
|
||||
animation: backdropshow 0.1s ease-in;
|
||||
}
|
||||
//&.show {
|
||||
// opacity: $modal-backdrop-opacity;
|
||||
//}
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start; // so the close btn always stays on the upper right corner
|
||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||
display: flex;
|
||||
align-items: flex-start; // so the close btn always stays on the upper right corner
|
||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||
padding: $modal-header-padding $modal-inner-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
//@include border-top-radius($border-radius-lg);
|
||||
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed("borderColor");
|
||||
}
|
||||
|
||||
.close {
|
||||
padding: $modal-header-padding $modal-inner-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
//@include border-top-radius($border-radius-lg);
|
||||
// auto on the left force icon to the right even when there is no .modal-title
|
||||
margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed('borderColor');
|
||||
}
|
||||
|
||||
.close {
|
||||
padding: $modal-header-padding $modal-inner-padding;
|
||||
// auto on the left force icon to the right even when there is no .modal-title
|
||||
margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $font-size-base;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
h5 {
|
||||
font-size: $font-size-base;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title text within header
|
||||
.modal-title {
|
||||
margin-bottom: 0;
|
||||
line-height: $modal-title-line-height;
|
||||
margin-bottom: 0;
|
||||
line-height: $modal-title-line-height;
|
||||
}
|
||||
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||
// when should there be a fixed height on `.modal-dialog`.
|
||||
flex: 1 1 auto;
|
||||
padding: $modal-inner-padding;
|
||||
position: relative;
|
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||
// when should there be a fixed height on `.modal-dialog`.
|
||||
flex: 1 1 auto;
|
||||
padding: $modal-inner-padding;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center; // vertically center
|
||||
//justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||
padding: $modal-inner-padding;
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||
|
||||
@include themify($themes) {
|
||||
border-top-color: themed("borderColor");
|
||||
}
|
||||
|
||||
// Easily place margin between footer elements
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center; // vertically center
|
||||
//justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||
padding: $modal-inner-padding;
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||
|
||||
@include themify($themes) {
|
||||
border-top-color: themed('borderColor');
|
||||
}
|
||||
|
||||
// Easily place margin between footer elements
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: $modal-md;
|
||||
margin: $modal-dialog-margin-y-sm-up auto;
|
||||
}
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: $modal-md;
|
||||
margin: $modal-dialog-margin-y-sm-up auto;
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
|
||||
}
|
||||
.modal-dialog-centered {
|
||||
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
//@include box-shadow($modal-content-box-shadow-sm-up);
|
||||
box-shadow: $modal-content-box-shadow-sm-up;
|
||||
}
|
||||
.modal-content {
|
||||
//@include box-shadow($modal-content-box-shadow-sm-up);
|
||||
box-shadow: $modal-content-box-shadow-sm-up;
|
||||
}
|
||||
|
||||
.modal-sm {
|
||||
max-width: $modal-sm;
|
||||
}
|
||||
.modal-sm {
|
||||
max-width: $modal-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg {
|
||||
max-width: $modal-lg;
|
||||
}
|
||||
.modal-lg {
|
||||
max-width: $modal-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: .5;
|
||||
float: right;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
opacity: .75;
|
||||
}
|
||||
// Opinionated: add "hand" cursor to non-disabled .close elements
|
||||
&:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
opacity: 0.75;
|
||||
}
|
||||
// Opinionated: add "hand" cursor to non-disabled .close elements
|
||||
&:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
@@ -333,19 +338,19 @@ $close-text-shadow: 0 1px 0 $white !default;
|
||||
|
||||
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
||||
button.close {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// stylelint-enable
|
||||
|
||||
// box
|
||||
|
||||
.modal-content .box {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,218 +1,241 @@
|
||||
@import "variables.scss";
|
||||
|
||||
#login-page, #lock-page, #sso-page, #set-password-page, #remove-password-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
#login-page,
|
||||
#lock-page,
|
||||
#sso-page,
|
||||
#set-password-page,
|
||||
#remove-password-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
@media (min-height: 500px) {
|
||||
height: calc(100% + 50px);
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
@media (min-height: 500px) {
|
||||
height: calc(100% + 50px);
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@media (min-height: 800px) {
|
||||
height: calc(100% + 300px);
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
@media (min-height: 800px) {
|
||||
height: calc(100% + 300px);
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 auto 15px;
|
||||
width: 284px;
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
margin: 0 auto 15px;
|
||||
width: 284px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#register-page, #hint-page, #two-factor-page, #update-temp-password-page, #remove-password-page {
|
||||
padding-top: 20px;
|
||||
#register-page,
|
||||
#hint-page,
|
||||
#two-factor-page,
|
||||
#update-temp-password-page,
|
||||
#remove-password-page {
|
||||
padding-top: 20px;
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
#login-page,
|
||||
#register-page,
|
||||
#hint-page,
|
||||
#two-factor-page,
|
||||
#lock-page,
|
||||
#update-temp-password-page {
|
||||
.content {
|
||||
width: 300px;
|
||||
transition: width 0.25s linear;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
p.lead,
|
||||
h1 {
|
||||
font-size: $font-size-large;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.last {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
&:not(.with-rows),
|
||||
.buttons-row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:not(.with-rows),
|
||||
.buttons-row:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-options {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#login-page, #register-page, #hint-page, #two-factor-page, #lock-page, #update-temp-password-page {
|
||||
.content {
|
||||
width: 300px;
|
||||
transition: width 0.25s linear;
|
||||
a.settings-icon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
||||
p {
|
||||
text-align: center
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
|
||||
p.lead, h1 {
|
||||
font-size: $font-size-large;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-bottom: 20px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
||||
&.last {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
&:not(.with-rows), .buttons-row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:not(.with-rows), .buttons-row:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-options {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.settings-icon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
padding: 1em;
|
||||
font-size: 1.2em;
|
||||
.environment-urls-settings-icon {
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
color: themed("primaryColor");
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
padding: 1em;
|
||||
font-size: 1.2em;
|
||||
.environment-urls-settings-icon {
|
||||
@include themify($themes) {
|
||||
color: themed("mutedColor");
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("primaryColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#sso-page {
|
||||
.content {
|
||||
width: 300px;
|
||||
.content {
|
||||
width: 300px;
|
||||
|
||||
.box {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.box {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#set-password-page, #remove-password-page {
|
||||
.content {
|
||||
width: 500px;
|
||||
#set-password-page,
|
||||
#remove-password-page {
|
||||
.content {
|
||||
width: 500px;
|
||||
|
||||
p {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
p.lead, h1 {
|
||||
font-size: $font-size-large;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
&:not(.with-rows), .buttons-row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:not(.with-rows), .buttons-row:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&.last {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.lead,
|
||||
h1 {
|
||||
font-size: $font-size-large;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
&:not(.with-rows),
|
||||
.buttons-row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:not(.with-rows),
|
||||
.buttons-row:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&.last {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#register-page, #update-temp-password-page {
|
||||
.content {
|
||||
width: 400px;
|
||||
}
|
||||
#register-page,
|
||||
#update-temp-password-page {
|
||||
.content {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
#remove-password-page {
|
||||
.content > p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content > p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,203 +1,205 @@
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
@import "~font-awesome/scss/font-awesome.scss";
|
||||
@import '~ngx-toastr/toastr';
|
||||
@import "~ngx-toastr/toastr";
|
||||
@import "~sweetalert2/src/sweetalert2.scss";
|
||||
|
||||
@import "variables.scss";
|
||||
|
||||
.toast-container {
|
||||
.toast-close-button {
|
||||
font-size: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.ngx-toastr {
|
||||
align-items: center;
|
||||
background-image: none !important;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
||||
.toast-close-button {
|
||||
font-size: 18px;
|
||||
margin-right: 4px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ngx-toastr {
|
||||
align-items: center;
|
||||
background-image: none !important;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
||||
.toast-close-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
float: left;
|
||||
font-style: normal;
|
||||
font-family: FontAwesome;
|
||||
font-size: 25px;
|
||||
line-height: 20px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-danger, &.toast-error {
|
||||
@include themify($themes) {
|
||||
background-color: themed('dangerColor');
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f0e7";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-warning {
|
||||
@include themify($themes) {
|
||||
background-color: themed('warningColor');
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f071";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-info {
|
||||
@include themify($themes) {
|
||||
background-color: themed('infoColor');
|
||||
}
|
||||
|
||||
.icon i:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-success {
|
||||
@include themify($themes) {
|
||||
background-color: themed('successColor');
|
||||
}
|
||||
|
||||
.icon i:before {
|
||||
content: "\f00C";
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
float: left;
|
||||
font-style: normal;
|
||||
font-family: FontAwesome;
|
||||
font-size: 25px;
|
||||
line-height: 20px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-danger,
|
||||
&.toast-error {
|
||||
@include themify($themes) {
|
||||
background-color: themed("dangerColor");
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f0e7";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-warning {
|
||||
@include themify($themes) {
|
||||
background-color: themed("warningColor");
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f071";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-info {
|
||||
@include themify($themes) {
|
||||
background-color: themed("infoColor");
|
||||
}
|
||||
|
||||
.icon i:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-success {
|
||||
@include themify($themes) {
|
||||
background-color: themed("successColor");
|
||||
}
|
||||
|
||||
.icon i:before {
|
||||
content: "\f00C";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SweetAlert2
|
||||
|
||||
.swal2-popup {
|
||||
padding: 15px;
|
||||
border-radius: $border-radius;
|
||||
width: 34em;
|
||||
padding: 15px;
|
||||
border-radius: $border-radius;
|
||||
width: 34em;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt");
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
.swal2-icon {
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
margin: 0;
|
||||
font-size: $font-size-base;
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: top;
|
||||
|
||||
input {
|
||||
margin: 3px 5px 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-input,
|
||||
.swal2-textarea {
|
||||
border: 1px solid #000000;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
// Inherit theme font-size
|
||||
font-size: inherit;
|
||||
|
||||
// Sweetalert 1 did not have box-shadow
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-color: themed("inputBorderColor");
|
||||
color: themed("textColor");
|
||||
background-color: themed("inputBackgroundColor");
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed("inputPlaceholderColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.swal-custom-icon {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.swal2-title {
|
||||
padding: 10px 0 15px;
|
||||
margin: 0;
|
||||
font-size: $font-size-large;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt');
|
||||
color: themed('textColor');
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-icon {
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
.swal2-text {
|
||||
text-align: left; // sweetalert1 behaviour
|
||||
font-size: $font-size-base;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
margin: 0;
|
||||
font-size: $font-size-base;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
> .swal2-text:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: top;
|
||||
.swal2-actions {
|
||||
margin: 20px auto 0;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
input {
|
||||
margin: 3px 5px 0 1px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
margin-left: 10px;
|
||||
@extend .btn;
|
||||
|
||||
.swal2-input, .swal2-textarea {
|
||||
border: 1px solid #000000;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
// Inherit theme font-size
|
||||
font-size: inherit;
|
||||
|
||||
// Sweetalert 1 did not have box-shadow
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-color: themed('inputBorderColor');
|
||||
color: themed('textColor');
|
||||
background-color: themed('inputBackgroundColor');
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed('inputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
&.swal2-confirm {
|
||||
@extend .btn, .primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.swal-custom-icon {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.swal2-title {
|
||||
padding: 10px 0 15px;
|
||||
margin: 0;
|
||||
font-size: $font-size-large;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-text {
|
||||
text-align: left; // sweetalert1 behaviour
|
||||
font-size: $font-size-base;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
> .swal2-text:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.swal2-actions {
|
||||
margin: 20px auto 0;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
@extend .btn;
|
||||
|
||||
&.swal2-confirm {
|
||||
@extend .btn, .primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-validation-message {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.swal2-validation-message {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import "../../jslib/angular/src/scss/webfonts.css";
|
||||
@import '~@angular/cdk/overlay-prebuilt.css';
|
||||
@import "~@angular/cdk/overlay-prebuilt.css";
|
||||
@import "variables.scss";
|
||||
@import "base.scss";
|
||||
@import "grid.scss";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import '~nord/src/sass/nord.scss';
|
||||
@import "~nord/src/sass/nord.scss";
|
||||
|
||||
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
$font-size-base: 14px;
|
||||
$font-size-large: 18px;
|
||||
@@ -17,12 +17,12 @@ $gray: #555;
|
||||
$gray-light: #777;
|
||||
$text-muted: $gray-light;
|
||||
|
||||
$brand-primary: #175DDC;
|
||||
$brand-primary: #175ddc;
|
||||
$brand-danger: #dd4b39;
|
||||
$brand-success: #00a65a;
|
||||
$brand-info: #555555;
|
||||
$brand-warning: #bf7e16;
|
||||
$brand-primary-accent: #1252A3;
|
||||
$brand-primary-accent: #1252a3;
|
||||
|
||||
$background-color: white;
|
||||
$background-color-alt: #f9f9f9;
|
||||
@@ -39,178 +39,183 @@ $button-color-primary: darken($brand-primary, 8%);
|
||||
$button-color-danger: darken($brand-danger, 10%);
|
||||
|
||||
$themes: (
|
||||
light: (
|
||||
textColor: $text-color,
|
||||
borderColor: $border-color-dark,
|
||||
backgroundColor: $background-color,
|
||||
backgroundColorAlt: $background-color-alt,
|
||||
backgroundColorAlt2: $background-color-alt2,
|
||||
scrollbarColor: rgba(100,100,100,.2),
|
||||
scrollbarHoverColor: rgba(100,100,100,.4),
|
||||
boxBackgroundColor: $box-background-color,
|
||||
boxBackgroundHoverColor: $box-background-hover-color,
|
||||
boxBorderColor: $box-border-color,
|
||||
headerBackgroundColor: $brand-primary,
|
||||
headerBorderColor: darken($brand-primary, 7%),
|
||||
headerInputBackgroundColor: darken($brand-primary, 8%),
|
||||
headerInputBackgroundFocusColor: darken($brand-primary, 10%),
|
||||
headerInputColor: #ffffff,
|
||||
headerInputPlaceholderColor: lighten($brand-primary, 35%),
|
||||
listItemBackgroundColor: $background-color,
|
||||
listItemBackgroundHoverColor: $list-item-hover,
|
||||
listItemBorderColor: $border-color,
|
||||
groupingsActiveColor: darken($background-color-alt, 5%),
|
||||
disabledIconColor: $list-icon-color,
|
||||
headingColor: $gray-light,
|
||||
headingButtonColor: lighten($gray-light, 30%),
|
||||
headingButtonHoverColor: $gray-light,
|
||||
labelColor: $gray-light,
|
||||
mutedColor: $text-muted,
|
||||
totpStrokeColor: $brand-primary,
|
||||
boxRowButtonColor: $brand-primary,
|
||||
boxRowButtonHoverColor: darken($brand-primary, 10%),
|
||||
inputBorderColor: darken($border-color-dark, 7%),
|
||||
inputBackgroundColor: #ffffff,
|
||||
inputPlaceholderColor: lighten($gray-light, 35%),
|
||||
buttonBackgroundColor: $button-background-color,
|
||||
buttonBorderColor: $button-border-color,
|
||||
buttonColor: $button-color,
|
||||
buttonPrimaryColor: $button-color-primary,
|
||||
buttonDangerColor: $button-color-danger,
|
||||
primaryColor: $brand-primary,
|
||||
primaryAccentColor: $brand-primary-accent,
|
||||
dangerColor: $brand-danger,
|
||||
successColor: $brand-success,
|
||||
infoColor: $brand-info,
|
||||
warningColor: $brand-warning,
|
||||
logoSuffix: 'dark',
|
||||
passwordNumberColor: #007fde,
|
||||
passwordSpecialColor: #c40800,
|
||||
calloutBorderColor: $border-color-dark,
|
||||
calloutBackgroundColor: $background-color,
|
||||
acccountSwitcherBackgroundColor: $background-color,
|
||||
accountSwitcherTextColor: #ffffff,
|
||||
),
|
||||
dark: (
|
||||
textColor: #ffffff,
|
||||
borderColor: #2f2f2f,
|
||||
backgroundColor: #363636,
|
||||
backgroundColorAlt: #3d3d3d,
|
||||
backgroundColorAlt2: #222222,
|
||||
scrollbarColor: #4d4d4d,
|
||||
scrollbarHoverColor: #5f5f5f,
|
||||
boxBackgroundColor: #363636,
|
||||
boxBackgroundHoverColor: #3f3f3f,
|
||||
boxBorderColor: #2f2f2f,
|
||||
headerBackgroundColor: #363636,
|
||||
headerBorderColor: #272727,
|
||||
headerInputBackgroundColor: #222222,
|
||||
headerInputBackgroundFocusColor: #1d1d1d,
|
||||
headerInputColor: #ffffff,
|
||||
headerInputPlaceholderColor: #707070,
|
||||
listItemBackgroundColor: #363636,
|
||||
listItemBackgroundHoverColor: #3c3c3c,
|
||||
listItemBorderColor: #2f2f2f,
|
||||
groupingsActiveColor: #292929,
|
||||
disabledIconColor: #c7c7cd,
|
||||
headingColor: #a3a3a3,
|
||||
headingButtonColor: #a3a3a3,
|
||||
headingButtonHoverColor: #ffffff,
|
||||
labelColor: #a3a3a3,
|
||||
mutedColor: #a3a3a3,
|
||||
totpStrokeColor: #cacaca,
|
||||
boxRowButtonColor: #cacaca,
|
||||
boxRowButtonHoverColor: #ffffff,
|
||||
inputBorderColor: #222222,
|
||||
inputBackgroundColor: #363636,
|
||||
inputPlaceholderColor: #707070,
|
||||
buttonBackgroundColor: #363636,
|
||||
buttonBorderColor: #1f1f1f,
|
||||
buttonColor: #e0e0e0,
|
||||
buttonPrimaryColor: #46ace7,
|
||||
buttonDangerColor: #ff3e24,
|
||||
primaryColor: #52bdfb,
|
||||
primaryAccentColor: #3ea1da,
|
||||
dangerColor: #ff3e24,
|
||||
successColor: $brand-success,
|
||||
infoColor: $brand-info,
|
||||
warningColor: $brand-warning,
|
||||
logoSuffix: 'white',
|
||||
passwordNumberColor: #52bdfb,
|
||||
passwordSpecialColor: #ff7c70,
|
||||
calloutBorderColor: #2f2f2f,
|
||||
calloutBackgroundColor: #363636,
|
||||
accountSwitcherBackgroundColor: #2f2f2f,
|
||||
accountSwitcherTextColor: #ffffff,
|
||||
),
|
||||
nord: (
|
||||
textColor: $nord5,
|
||||
borderColor: $nord0,
|
||||
backgroundColor: $nord2,
|
||||
backgroundColorAlt: $nord1,
|
||||
backgroundColorAlt2: $nord1,
|
||||
scrollbarColor: $nord4,
|
||||
scrollbarHoverColor: $nord6,
|
||||
boxBackgroundColor: $nord2,
|
||||
boxBackgroundHoverColor: $nord3,
|
||||
boxBorderColor: $nord1,
|
||||
headerBackgroundColor: $nord2,
|
||||
headerBorderColor: $nord0,
|
||||
headerInputBackgroundColor: $nord6,
|
||||
headerInputBackgroundFocusColor: $nord5,
|
||||
headerInputColor: $nord2,
|
||||
headerInputPlaceholderColor: $nord3,
|
||||
listItemBackgroundColor: $nord2,
|
||||
listItemBackgroundHoverColor: $nord3,
|
||||
listItemBorderColor: $nord1,
|
||||
groupingsActiveColor: $nord3,
|
||||
disabledIconColor: $nord5,
|
||||
headingColor: $nord4,
|
||||
headingButtonColor: $nord5,
|
||||
headingButtonHoverColor: $nord6,
|
||||
labelColor: $nord4,
|
||||
mutedColor: $nord4,
|
||||
totpStrokeColor: $nord4,
|
||||
boxRowButtonColor: $nord4,
|
||||
boxRowButtonHoverColor: $nord6,
|
||||
inputBorderColor: $nord0,
|
||||
inputBackgroundColor: $nord2,
|
||||
inputPlaceholderColor: lighten($nord3, 20%),
|
||||
buttonBackgroundColor: $nord3,
|
||||
buttonBorderColor: $nord0,
|
||||
buttonColor: $nord5,
|
||||
buttonPrimaryColor: $nord8,
|
||||
buttonDangerColor: $nord11,
|
||||
primaryColor: $nord9,
|
||||
primaryAccentColor: $nord8,
|
||||
dangerColor: $nord11,
|
||||
successColor: $nord14,
|
||||
infoColor: $nord9,
|
||||
warningColor: $nord12,
|
||||
logoSuffix: 'white',
|
||||
passwordNumberColor: $nord8,
|
||||
passwordSpecialColor: $nord12,
|
||||
calloutBorderColor: $nord1,
|
||||
calloutBackgroundColor: $nord2,
|
||||
accountSwitcherBackgroundColor: $nord0,
|
||||
accountSwitcherTextColor: $nord5,
|
||||
),
|
||||
light: (
|
||||
textColor: $text-color,
|
||||
borderColor: $border-color-dark,
|
||||
backgroundColor: $background-color,
|
||||
backgroundColorAlt: $background-color-alt,
|
||||
backgroundColorAlt2: $background-color-alt2,
|
||||
scrollbarColor: rgba(100, 100, 100, 0.2),
|
||||
scrollbarHoverColor: rgba(100, 100, 100, 0.4),
|
||||
boxBackgroundColor: $box-background-color,
|
||||
boxBackgroundHoverColor: $box-background-hover-color,
|
||||
boxBorderColor: $box-border-color,
|
||||
headerBackgroundColor: $brand-primary,
|
||||
headerBorderColor: darken($brand-primary, 7%),
|
||||
headerInputBackgroundColor: darken($brand-primary, 8%),
|
||||
headerInputBackgroundFocusColor: darken($brand-primary, 10%),
|
||||
headerInputColor: #ffffff,
|
||||
headerInputPlaceholderColor: lighten($brand-primary, 35%),
|
||||
listItemBackgroundColor: $background-color,
|
||||
listItemBackgroundHoverColor: $list-item-hover,
|
||||
listItemBorderColor: $border-color,
|
||||
groupingsActiveColor: darken($background-color-alt, 5%),
|
||||
disabledIconColor: $list-icon-color,
|
||||
headingColor: $gray-light,
|
||||
headingButtonColor: lighten($gray-light, 30%),
|
||||
headingButtonHoverColor: $gray-light,
|
||||
labelColor: $gray-light,
|
||||
mutedColor: $text-muted,
|
||||
totpStrokeColor: $brand-primary,
|
||||
boxRowButtonColor: $brand-primary,
|
||||
boxRowButtonHoverColor: darken($brand-primary, 10%),
|
||||
inputBorderColor: darken($border-color-dark, 7%),
|
||||
inputBackgroundColor: #ffffff,
|
||||
inputPlaceholderColor: lighten($gray-light, 35%),
|
||||
buttonBackgroundColor: $button-background-color,
|
||||
buttonBorderColor: $button-border-color,
|
||||
buttonColor: $button-color,
|
||||
buttonPrimaryColor: $button-color-primary,
|
||||
buttonDangerColor: $button-color-danger,
|
||||
primaryColor: $brand-primary,
|
||||
primaryAccentColor: $brand-primary-accent,
|
||||
dangerColor: $brand-danger,
|
||||
successColor: $brand-success,
|
||||
infoColor: $brand-info,
|
||||
warningColor: $brand-warning,
|
||||
logoSuffix: "dark",
|
||||
passwordNumberColor: #007fde,
|
||||
passwordSpecialColor: #c40800,
|
||||
calloutBorderColor: $border-color-dark,
|
||||
calloutBackgroundColor: $background-color,
|
||||
acccountSwitcherBackgroundColor: $background-color,
|
||||
accountSwitcherTextColor: #ffffff,
|
||||
),
|
||||
dark: (
|
||||
textColor: #ffffff,
|
||||
borderColor: #2f2f2f,
|
||||
backgroundColor: #363636,
|
||||
backgroundColorAlt: #3d3d3d,
|
||||
backgroundColorAlt2: #222222,
|
||||
scrollbarColor: #4d4d4d,
|
||||
scrollbarHoverColor: #5f5f5f,
|
||||
boxBackgroundColor: #363636,
|
||||
boxBackgroundHoverColor: #3f3f3f,
|
||||
boxBorderColor: #2f2f2f,
|
||||
headerBackgroundColor: #363636,
|
||||
headerBorderColor: #272727,
|
||||
headerInputBackgroundColor: #222222,
|
||||
headerInputBackgroundFocusColor: #1d1d1d,
|
||||
headerInputColor: #ffffff,
|
||||
headerInputPlaceholderColor: #707070,
|
||||
listItemBackgroundColor: #363636,
|
||||
listItemBackgroundHoverColor: #3c3c3c,
|
||||
listItemBorderColor: #2f2f2f,
|
||||
groupingsActiveColor: #292929,
|
||||
disabledIconColor: #c7c7cd,
|
||||
headingColor: #a3a3a3,
|
||||
headingButtonColor: #a3a3a3,
|
||||
headingButtonHoverColor: #ffffff,
|
||||
labelColor: #a3a3a3,
|
||||
mutedColor: #a3a3a3,
|
||||
totpStrokeColor: #cacaca,
|
||||
boxRowButtonColor: #cacaca,
|
||||
boxRowButtonHoverColor: #ffffff,
|
||||
inputBorderColor: #222222,
|
||||
inputBackgroundColor: #363636,
|
||||
inputPlaceholderColor: #707070,
|
||||
buttonBackgroundColor: #363636,
|
||||
buttonBorderColor: #1f1f1f,
|
||||
buttonColor: #e0e0e0,
|
||||
buttonPrimaryColor: #46ace7,
|
||||
buttonDangerColor: #ff3e24,
|
||||
primaryColor: #52bdfb,
|
||||
primaryAccentColor: #3ea1da,
|
||||
dangerColor: #ff3e24,
|
||||
successColor: $brand-success,
|
||||
infoColor: $brand-info,
|
||||
warningColor: $brand-warning,
|
||||
logoSuffix: "white",
|
||||
passwordNumberColor: #52bdfb,
|
||||
passwordSpecialColor: #ff7c70,
|
||||
calloutBorderColor: #2f2f2f,
|
||||
calloutBackgroundColor: #363636,
|
||||
accountSwitcherBackgroundColor: #2f2f2f,
|
||||
accountSwitcherTextColor: #ffffff,
|
||||
),
|
||||
nord: (
|
||||
textColor: $nord5,
|
||||
borderColor: $nord0,
|
||||
backgroundColor: $nord2,
|
||||
backgroundColorAlt: $nord1,
|
||||
backgroundColorAlt2: $nord1,
|
||||
scrollbarColor: $nord4,
|
||||
scrollbarHoverColor: $nord6,
|
||||
boxBackgroundColor: $nord2,
|
||||
boxBackgroundHoverColor: $nord3,
|
||||
boxBorderColor: $nord1,
|
||||
headerBackgroundColor: $nord2,
|
||||
headerBorderColor: $nord0,
|
||||
headerInputBackgroundColor: $nord6,
|
||||
headerInputBackgroundFocusColor: $nord5,
|
||||
headerInputColor: $nord2,
|
||||
headerInputPlaceholderColor: $nord3,
|
||||
listItemBackgroundColor: $nord2,
|
||||
listItemBackgroundHoverColor: $nord3,
|
||||
listItemBorderColor: $nord1,
|
||||
groupingsActiveColor: $nord3,
|
||||
disabledIconColor: $nord5,
|
||||
headingColor: $nord4,
|
||||
headingButtonColor: $nord5,
|
||||
headingButtonHoverColor: $nord6,
|
||||
labelColor: $nord4,
|
||||
mutedColor: $nord4,
|
||||
totpStrokeColor: $nord4,
|
||||
boxRowButtonColor: $nord4,
|
||||
boxRowButtonHoverColor: $nord6,
|
||||
inputBorderColor: $nord0,
|
||||
inputBackgroundColor: $nord2,
|
||||
inputPlaceholderColor: lighten($nord3, 20%),
|
||||
buttonBackgroundColor: $nord3,
|
||||
buttonBorderColor: $nord0,
|
||||
buttonColor: $nord5,
|
||||
buttonPrimaryColor: $nord8,
|
||||
buttonDangerColor: $nord11,
|
||||
primaryColor: $nord9,
|
||||
primaryAccentColor: $nord8,
|
||||
dangerColor: $nord11,
|
||||
successColor: $nord14,
|
||||
infoColor: $nord9,
|
||||
warningColor: $nord12,
|
||||
logoSuffix: "white",
|
||||
passwordNumberColor: $nord8,
|
||||
passwordSpecialColor: $nord12,
|
||||
calloutBorderColor: $nord1,
|
||||
calloutBackgroundColor: $nord2,
|
||||
accountSwitcherBackgroundColor: $nord0,
|
||||
accountSwitcherTextColor: $nord5,
|
||||
),
|
||||
);
|
||||
|
||||
@mixin themify($themes: $themes) {
|
||||
@each $theme, $map in $themes {
|
||||
html.theme_#{$theme} & {
|
||||
$theme-map: () !global;
|
||||
@each $key, $submap in $map {
|
||||
$value: map-get(map-get($themes, $theme), '#{$key}');
|
||||
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
||||
}
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
@each $theme, $map in $themes {
|
||||
html.theme_#{$theme} & {
|
||||
$theme-map: () !global;
|
||||
@each $key, $submap in $map {
|
||||
$value: map-get(map-get($themes, $theme), "#{$key}");
|
||||
$theme-map: map-merge(
|
||||
$theme-map,
|
||||
(
|
||||
$key: $value,
|
||||
)
|
||||
) !global;
|
||||
}
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function themed($key) {
|
||||
@return map-get($theme-map, $key);
|
||||
@return map-get($theme-map, $key);
|
||||
}
|
||||
|
||||
@@ -1,430 +1,437 @@
|
||||
@import "variables.scss";
|
||||
|
||||
app-root {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vault {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
> .groupings,
|
||||
> .items,
|
||||
> .details,
|
||||
> .logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> .groupings, > .items, > .details, > .logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.inner-content {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.inner-content {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
> .groupings {
|
||||
width: 22%;
|
||||
min-width: 175px;
|
||||
max-width: 250px;
|
||||
border-right: 1px solid #000000;
|
||||
> .groupings {
|
||||
width: 22%;
|
||||
min-width: 175px;
|
||||
max-width: 250px;
|
||||
border-right: 1px solid #000000;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt');
|
||||
border-right-color: themed('borderColor');
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
|
||||
.footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding-bottom: 0;
|
||||
padding-right: 5px;
|
||||
user-select: none;
|
||||
|
||||
> ul, > div > ul {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-size: $font-size-base;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
@include themify($themes) {
|
||||
color: themed('headingButtonColor');
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
cursor: pointer;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headingButtonHoverColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul:not(.fa-ul) {
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul.fa-ul {
|
||||
li {
|
||||
word-break: break-all;
|
||||
|
||||
.fa-li {
|
||||
top: 8px;
|
||||
width: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nested indentions
|
||||
ul.fa-ul {
|
||||
// Level 1
|
||||
li {
|
||||
> a {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 2
|
||||
ul li {
|
||||
> a {
|
||||
padding-left: 23px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 3
|
||||
ul ul li {
|
||||
> a {
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 4
|
||||
ul ul ul li {
|
||||
> a {
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 29px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 5
|
||||
ul ul ul ul li {
|
||||
> a {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 6
|
||||
ul ul ul ul ul li {
|
||||
> a {
|
||||
padding-left: 67px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 51px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 7
|
||||
ul ul ul ul ul ul li {
|
||||
> a {
|
||||
padding-left: 78px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 62px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
margin-left: auto;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headingButtonColor');
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
@include themify($themes) {
|
||||
color: themed('headingButtonHoverColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
span {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
margin-left: -15px;
|
||||
margin-right: -5px;
|
||||
padding-left: 15px;
|
||||
padding-right: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('groupingsActiveColor');
|
||||
}
|
||||
|
||||
ul {
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt');
|
||||
}
|
||||
|
||||
margin-left: -15px;
|
||||
margin-right: -5px;
|
||||
padding-left: 15px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .items {
|
||||
width: 28%;
|
||||
min-width: 200px;
|
||||
max-width: 350px;
|
||||
border-right: 1px solid #000000;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
border-right-color: themed('borderColor');
|
||||
}
|
||||
|
||||
.no-items {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.fa {
|
||||
margin-bottom: 10px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('disabledIconColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt2');
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-width: 550px;
|
||||
margin: 30px auto 0 auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .logo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.content {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
min-width: 320px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 284px;
|
||||
opacity: 0.3;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt");
|
||||
border-right-color: themed("borderColor");
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
|
||||
.footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding-bottom: 0;
|
||||
padding-right: 5px;
|
||||
user-select: none;
|
||||
|
||||
> ul,
|
||||
> div > ul {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 55px;
|
||||
flex: 0 0 auto;
|
||||
border-top: 1px solid #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-size: $font-size-base;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
@include themify($themes) {
|
||||
color: themed("headingButtonColor");
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("headingButtonHoverColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul:not(.fa-ul) {
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul.fa-ul {
|
||||
li {
|
||||
word-break: break-all;
|
||||
|
||||
.fa-li {
|
||||
top: 8px;
|
||||
width: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nested indentions
|
||||
ul.fa-ul {
|
||||
// Level 1
|
||||
li {
|
||||
> a {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 2
|
||||
ul li {
|
||||
> a {
|
||||
padding-left: 23px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 3
|
||||
ul ul li {
|
||||
> a {
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 4
|
||||
ul ul ul li {
|
||||
> a {
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 29px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 5
|
||||
ul ul ul ul li {
|
||||
> a {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 6
|
||||
ul ul ul ul ul li {
|
||||
> a {
|
||||
padding-left: 67px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 51px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
// Level 7
|
||||
ul ul ul ul ul ul li {
|
||||
> a {
|
||||
padding-left: 78px;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: 62px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
margin-left: auto;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("headingButtonColor");
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include themify($themes) {
|
||||
color: themed("headingButtonHoverColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
span {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
margin-left: -15px;
|
||||
margin-right: -5px;
|
||||
padding-left: 15px;
|
||||
padding-right: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("groupingsActiveColor");
|
||||
}
|
||||
|
||||
ul {
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt");
|
||||
}
|
||||
|
||||
margin-left: -15px;
|
||||
margin-right: -5px;
|
||||
padding-left: 15px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .items {
|
||||
width: 28%;
|
||||
min-width: 200px;
|
||||
max-width: 350px;
|
||||
border-right: 1px solid #000000;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
border-right-color: themed("borderColor");
|
||||
}
|
||||
|
||||
.no-items {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.fa {
|
||||
margin-bottom: 10px;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt');
|
||||
border-top-color: themed('borderColor');
|
||||
color: themed("disabledIconColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
> .details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt2");
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 100%;
|
||||
font-size: $font-size-base * 0.8;
|
||||
flex: 1;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-bottom: 4px;
|
||||
|
||||
&:not(.active) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt');
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $font-size-base * 1.5;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.inner-content {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-width: 550px;
|
||||
margin: 30px auto 0 auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .logo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.content {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
min-width: 320px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 284px;
|
||||
opacity: 0.3;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 55px;
|
||||
flex: 0 0 auto;
|
||||
border-top: 1px solid #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt");
|
||||
border-top-color: themed("borderColor");
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 100%;
|
||||
font-size: $font-size-base * 0.8;
|
||||
flex: 1;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-bottom: 4px;
|
||||
|
||||
&:not(.active) {
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColorAlt");
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $font-size-base * 1.5;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user