mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 01:33:33 +00:00
Apply Prettier (#1347)
This commit is contained in:
Oscar Hinton
GitHub
@@ -1,271 +1,294 @@
|
||||
html {
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 1010px;
|
||||
min-width: 1010px;
|
||||
|
||||
&.layout_frontend {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $darkDarkBlue2;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $white;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed('layoutFrontendColor');
|
||||
color: themed('headingColor');
|
||||
}
|
||||
&.layout_frontend {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $darkDarkBlue2;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
color: themed('textColor');
|
||||
background-color: themed("layoutFrontendColor");
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width:not(.layout_frontend) {
|
||||
.container {
|
||||
min-width: 980px;
|
||||
width: 90%;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
&.full-width:not(.layout_frontend) {
|
||||
.container {
|
||||
min-width: 980px;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: none !important;
|
||||
padding: 0;
|
||||
width: 980px;
|
||||
margin: 0 auto;
|
||||
max-width: none !important;
|
||||
padding: 0;
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
.page-header, .secondary-header {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.6rem;
|
||||
@include themify($themes) {
|
||||
border-bottom: 1px solid themed('separator');
|
||||
}
|
||||
.page-header,
|
||||
.secondary-header {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.6rem;
|
||||
@include themify($themes) {
|
||||
border-bottom: 1px solid themed("separator");
|
||||
}
|
||||
|
||||
&:not(.text-danger) {
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
&:not(.text-danger) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-header, .spaced-header {
|
||||
margin-top: 4rem;
|
||||
.secondary-header,
|
||||
.spaced-header {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
img.logo {
|
||||
display: block;
|
||||
height: 43px;
|
||||
margin: 0 auto;
|
||||
width: 284px;
|
||||
display: block;
|
||||
height: 43px;
|
||||
margin: 0 auto;
|
||||
width: 284px;
|
||||
|
||||
&.logo-themed {
|
||||
@include themify($themes) {
|
||||
content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
|
||||
}
|
||||
&.logo-themed {
|
||||
@include themify($themes) {
|
||||
content: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
padding: 40px 0 40px 0;
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed('separator');
|
||||
}
|
||||
margin-top: 40px;
|
||||
padding: 40px 0 40px 0;
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed("separator");
|
||||
}
|
||||
}
|
||||
|
||||
hr, .dropdown-divider {
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed('separatorHr');
|
||||
}
|
||||
hr,
|
||||
.dropdown-divider {
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed("separatorHr");
|
||||
}
|
||||
}
|
||||
|
||||
.min-height-fix {
|
||||
min-height: 1px;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cursor-move {
|
||||
cursor: move !important;
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
&.spaced-header {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
&.spaced-header {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include themify($themes) {
|
||||
color: themed('linkColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("linkColor");
|
||||
}
|
||||
|
||||
&.text-body {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor') !important;
|
||||
font-weight: themed('linkWeight');
|
||||
}
|
||||
&.text-body {
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor") !important;
|
||||
font-weight: themed("linkWeight");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include themify($themes) {
|
||||
color: themed('codeColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("codeColor");
|
||||
}
|
||||
}
|
||||
|
||||
.fa-icon-above-input {
|
||||
height: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: $font-size-lg;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.text-strike {
|
||||
text-decoration: line-through;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.font-weight-semibold {
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn:focus, .swal2-popup .swal2-actions button:focus, .btn.focus, .swal2-popup .swal2-actions button.focus, .form-control:focus {
|
||||
@include themify($themes) {
|
||||
box-shadow: 0 0 0 0.2rem themed('focus');
|
||||
}
|
||||
.btn:focus,
|
||||
.swal2-popup .swal2-actions button:focus,
|
||||
.btn.focus,
|
||||
.swal2-popup .swal2-actions button.focus,
|
||||
.form-control:focus {
|
||||
@include themify($themes) {
|
||||
box-shadow: 0 0 0 0.2rem themed("focus");
|
||||
}
|
||||
}
|
||||
|
||||
/* Override Bootstrap theming */
|
||||
|
||||
.bg-primary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('bgPrimaryColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("bgPrimaryColor");
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
@include themify($themes) {
|
||||
background-color: themed('bgLightColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("bgLightColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
@include themify($themes) {
|
||||
background-color: themed('success') !important;
|
||||
color: themed('successTextColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("success") !important;
|
||||
color: themed("successTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
@include themify($themes) {
|
||||
background-color: themed('warning') !important;
|
||||
color: themed('warningTextColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("warning") !important;
|
||||
color: themed("warningTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-error, .bg-danger {
|
||||
@include themify($themes) {
|
||||
background-color: themed('danger') !important;
|
||||
color: themed('dangerTextColor') !important;
|
||||
}
|
||||
.bg-error,
|
||||
.bg-danger {
|
||||
@include themify($themes) {
|
||||
background-color: themed("danger") !important;
|
||||
color: themed("dangerTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
@include themify($themes) {
|
||||
background-color: themed('info') !important;
|
||||
color: themed('infoTextColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("info") !important;
|
||||
color: themed("infoTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
@include themify($themes) {
|
||||
border-color: themed('borderPrimaryColor') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-color: themed("borderPrimaryColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-warning {
|
||||
@include themify($themes) {
|
||||
border-color: themed('warning') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-color: themed("warning") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-danger {
|
||||
@include themify($themes) {
|
||||
border-color: themed('danger') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-color: themed("danger") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-info {
|
||||
@include themify($themes) {
|
||||
border-color: themed('info') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border-color: themed("info") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-success {
|
||||
@include themify($themes) {
|
||||
color: themed("success") !important;
|
||||
}
|
||||
|
||||
& > h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@include themify($themes) {
|
||||
color: themed('success') !important;
|
||||
}
|
||||
|
||||
& > h1,h2,h3,h4 {
|
||||
@include themify($themes) {
|
||||
color: themed('success') !important;
|
||||
}
|
||||
color: themed("success") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
@include themify($themes) {
|
||||
color: themed('warning') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("warning") !important;
|
||||
}
|
||||
|
||||
& > h1,h2,h3,h4 {
|
||||
@include themify($themes) {
|
||||
color: themed('warning') !important;
|
||||
}
|
||||
& > h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@include themify($themes) {
|
||||
color: themed("warning") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
&:not(.dropdown-item) {
|
||||
@include themify($themes) {
|
||||
color: themed('danger') !important;
|
||||
}
|
||||
|
||||
& > h1,h2,h3,h4 {
|
||||
@include themify($themes) {
|
||||
color: themed('danger') !important;
|
||||
}
|
||||
}
|
||||
&:not(.dropdown-item) {
|
||||
@include themify($themes) {
|
||||
color: themed("danger") !important;
|
||||
}
|
||||
|
||||
& > h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@include themify($themes) {
|
||||
color: themed("danger") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
@include themify($themes) {
|
||||
color: themed('textMuted') !important;
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("textMuted") !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,224 +1,236 @@
|
||||
.btn-primary, .swal2-confirm {
|
||||
.btn-primary,
|
||||
.swal2-confirm {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnPrimary");
|
||||
border-color: themed("btnPrimary");
|
||||
color: themed("btnPrimaryText");
|
||||
}
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:active:not(:disabled) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnPrimary');
|
||||
border-color: themed('btnPrimary');
|
||||
color: themed('btnPrimaryText');
|
||||
background-color: themed("btnPrimaryHover");
|
||||
border-color: themed("btnPrimaryBorderHover");
|
||||
color: themed("btnPrimaryText");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:disabled), &:active:not(:disabled) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnPrimaryHover');
|
||||
border-color: themed('btnPrimaryBorderHover');
|
||||
color: themed('btnPrimaryText');
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlinePrimaryBackground');
|
||||
border-color: themed('btnOutlinePrimaryBorder');
|
||||
color: themed('btnOutlinePrimaryText');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlinePrimaryBackground");
|
||||
border-color: themed("btnOutlinePrimaryBorder");
|
||||
color: themed("btnOutlinePrimaryText");
|
||||
}
|
||||
|
||||
&:hover:not(:disabled), &:active {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlinePrimaryBackgroundHover');
|
||||
border-color: themed('btnOutlinePrimaryBorderHover');
|
||||
color: themed('btnOutlinePrimaryTextHover');
|
||||
}
|
||||
&:hover:not(:disabled),
|
||||
&:active {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlinePrimaryBackgroundHover");
|
||||
border-color: themed("btnOutlinePrimaryBorderHover");
|
||||
color: themed("btnOutlinePrimaryTextHover");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary, .swal2-cancel {
|
||||
.btn-secondary,
|
||||
.swal2-cancel {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnSecondary");
|
||||
border-color: themed("btnSecondaryBorder");
|
||||
color: themed("btnSecondaryText");
|
||||
}
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:active:not(:disabled) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnSecondary');
|
||||
border-color: themed('btnSecondaryBorder');
|
||||
color: themed('btnSecondaryText');
|
||||
background-color: themed("btnSecondaryHover");
|
||||
border-color: themed("btnSecondaryBorderHover");
|
||||
color: themed("btnSecondaryTextHover");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:disabled), &:active:not(:disabled) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnSecondaryHover');
|
||||
border-color: themed('btnSecondaryBorderHover');
|
||||
color: themed('btnSecondaryTextHover');
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
@include themify($themes) {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq(themed('primary')), themed('primary'), 15%), .5);
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
@include themify($themes) {
|
||||
box-shadow: 0 0 0 $btn-focus-width
|
||||
rgba(mix(color-yiq(themed("primary")), themed("primary"), 15%), 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlineSecondaryBackground');
|
||||
border-color: themed('btnOutlineSecondaryBorder');
|
||||
color: themed('btnOutlineSecondaryText');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlineSecondaryBackground");
|
||||
border-color: themed("btnOutlineSecondaryBorder");
|
||||
color: themed("btnOutlineSecondaryText");
|
||||
}
|
||||
|
||||
&:hover:not(:disabled), &:active {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlineSecondaryBackgroundHover');
|
||||
border-color: themed('btnOutlineSecondaryBorderHover');
|
||||
color: themed('btnOutlineSecondaryTextHover');
|
||||
}
|
||||
&:hover:not(:disabled),
|
||||
&:active {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlineSecondaryBackgroundHover");
|
||||
border-color: themed("btnOutlineSecondaryBorderHover");
|
||||
color: themed("btnOutlineSecondaryTextHover");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show > .btn-outline-secondary {
|
||||
&.dropdown-toggle, &:focus {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlineSecondaryBackground');
|
||||
border-color: themed('btnOutlineSecondaryBorder');
|
||||
color: themed('btnOutlineSecondaryText');
|
||||
}
|
||||
&.dropdown-toggle,
|
||||
&:focus {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlineSecondaryBackground");
|
||||
border-color: themed("btnOutlineSecondaryBorder");
|
||||
color: themed("btnOutlineSecondaryText");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlineSecondaryBackgroundHover');
|
||||
border-color: themed('btnOutlineSecondaryBorderHover');
|
||||
color: themed('btnOutlineSecondaryTextHover');
|
||||
}
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlineSecondaryBackgroundHover");
|
||||
border-color: themed("btnOutlineSecondaryBorderHover");
|
||||
color: themed("btnOutlineSecondaryTextHover");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger, .swal2-deny {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnDanger');
|
||||
border-color: themed('btnDanger');
|
||||
color: themed('btnDangerText');
|
||||
}
|
||||
.btn-danger,
|
||||
.swal2-deny {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnDanger");
|
||||
border-color: themed("btnDanger");
|
||||
color: themed("btnDangerText");
|
||||
}
|
||||
|
||||
&:hover:not(:disabled), &:active:not(:disabled) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnDangerHover');
|
||||
border-color: themed('btnDangerHover');
|
||||
color: themed('btnDangerText');
|
||||
}
|
||||
&:hover:not(:disabled),
|
||||
&:active:not(:disabled) {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnDangerHover");
|
||||
border-color: themed("btnDangerHover");
|
||||
color: themed("btnDangerText");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlineDangerBackground');
|
||||
border-color: themed('btnOutlineDangerBorder');
|
||||
color: themed('btnOutlineDangerText');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlineDangerBackground");
|
||||
border-color: themed("btnOutlineDangerBorder");
|
||||
color: themed("btnOutlineDangerText");
|
||||
}
|
||||
|
||||
&:hover:not(:disabled), &:active {
|
||||
@include themify($themes) {
|
||||
background-color: themed('btnOutlineDangerBackgroundHover');
|
||||
border-color: themed('btnOutlineDangerBorderHover');
|
||||
color: themed('btnOutlineDangerTextHover');
|
||||
}
|
||||
&:hover:not(:disabled),
|
||||
&:active {
|
||||
@include themify($themes) {
|
||||
background-color: themed("btnOutlineDangerBackgroundHover");
|
||||
border-color: themed("btnOutlineDangerBorderHover");
|
||||
color: themed("btnOutlineDangerTextHover");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline-color: -webkit-focus-ring-color;
|
||||
outline-offset: 1px;
|
||||
outline-style: auto;
|
||||
outline-width: 1px;
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline-color: -webkit-focus-ring-color;
|
||||
outline-offset: 1px;
|
||||
outline-style: auto;
|
||||
outline-width: 1px;
|
||||
}
|
||||
|
||||
&:not(.text-danger):not(.cursor-move) {
|
||||
@include themify($themes) {
|
||||
color: themed('btnLinkText');
|
||||
}
|
||||
&:not(.text-danger):not(.cursor-move) {
|
||||
@include themify($themes) {
|
||||
color: themed("btnLinkText");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.text-danger):not(.cursor-move) {
|
||||
@include themify($themes) {
|
||||
color: themed('btnLinkTextHover');
|
||||
}
|
||||
&:hover:not(.text-danger):not(.cursor-move) {
|
||||
@include themify($themes) {
|
||||
color: themed("btnLinkTextHover");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
.fa-spinner {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:disabled:not(.manual),
|
||||
&.loading {
|
||||
.fa-spinner {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:disabled:not(.manual), &.loading {
|
||||
.fa-spinner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('badgePrimaryBackground');
|
||||
color: themed('badgePrimaryText');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("badgePrimaryBackground");
|
||||
color: themed("badgePrimaryText");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('badgePrimaryBackgroundHover');
|
||||
color: themed('badgePrimaryText');
|
||||
}
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed("badgePrimaryBackgroundHover");
|
||||
color: themed("badgePrimaryText");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('badgeSecondaryBackground');
|
||||
color: themed('badgeSecondaryText');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("badgeSecondaryBackground");
|
||||
color: themed("badgeSecondaryText");
|
||||
}
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
@include themify($themes) {
|
||||
background-color: themed('badgeInfoBackground');
|
||||
color: themed('badgeInfoText');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("badgeInfoBackground");
|
||||
color: themed("badgeInfoText");
|
||||
}
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
@include themify($themes) {
|
||||
background-color: themed('badgeDangerBackground');
|
||||
color: themed('badgeDangerText');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("badgeDangerBackground");
|
||||
color: themed("badgeDangerText");
|
||||
}
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@include themify($themes) {
|
||||
background-color: themed('warning');
|
||||
color: themed('warningTextColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("warning");
|
||||
color: themed("warningTextColor");
|
||||
}
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@include themify($themes) {
|
||||
background-color: themed('success');
|
||||
color: themed('successTextColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("success");
|
||||
color: themed("successTextColor");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,83 +1,83 @@
|
||||
.callout {
|
||||
border-left-width: 5px !important;
|
||||
border-radius: $card-inner-border-radius;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
border-left-width: 5px !important;
|
||||
border-radius: $card-inner-border-radius;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
@include themify($themes) {
|
||||
background-color: themed("calloutBackground");
|
||||
border: 1px solid themed("borderColor");
|
||||
color: themed("calloutColor");
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3.callout-heading {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.callout-primary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('calloutBackground');
|
||||
border: 1px solid themed('borderColor');
|
||||
color: themed('calloutColor');
|
||||
border-left-color: themed("primary");
|
||||
}
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("info");
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
margin-top: 0;
|
||||
@include themify($themes) {
|
||||
color: themed("info");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-danger {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("danger");
|
||||
}
|
||||
|
||||
h3.callout-heading {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("danger");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-success {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("success");
|
||||
}
|
||||
|
||||
&.callout-primary {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('primary');
|
||||
}
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('primary');
|
||||
}
|
||||
}
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("success");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-warning {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed("warning");
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('info');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('info');
|
||||
}
|
||||
}
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed("warning");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-danger {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('danger');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('danger');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-success {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('success');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('success');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-warning {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('warning');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('warning');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enforced-policy-options ul {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.enforced-policy-options ul {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,93 +1,94 @@
|
||||
.card {
|
||||
@include themify($themes) {
|
||||
background-color: themed('foregroundColor');
|
||||
border-color: themed('borderColor');
|
||||
color: themed('textColor');
|
||||
}
|
||||
|
||||
&.text-danger {
|
||||
&.text-danger > .card-body {
|
||||
@include themify($themes) {
|
||||
color: themed('danger');
|
||||
}
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("foregroundColor");
|
||||
border-color: themed("borderColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
&.text-danger {
|
||||
&.text-danger > .card-body {
|
||||
@include themify($themes) {
|
||||
color: themed("danger");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header, .modal-header {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
.card-header,
|
||||
.modal-header {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
|
||||
small {
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
@extend .text-muted;
|
||||
}
|
||||
small {
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
@extend .text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerColor');
|
||||
color: themed('headingColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("headerColor");
|
||||
color: themed("headingColor");
|
||||
}
|
||||
|
||||
a:hover {
|
||||
&:not(.badge){
|
||||
@include themify($themes) {
|
||||
color: themed('learnMoreHover');
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
&:not(.badge) {
|
||||
@include themify($themes) {
|
||||
color: themed("learnMoreHover");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body-header {
|
||||
font-size: $font-size-lg;
|
||||
@extend .mb-4
|
||||
font-size: $font-size-lg;
|
||||
@extend .mb-4;
|
||||
}
|
||||
|
||||
.card ul.fa-ul.card-ul {
|
||||
margin-left: 1.9em;
|
||||
margin-left: 1.9em;
|
||||
|
||||
li {
|
||||
word-break: break-all;
|
||||
}
|
||||
li {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&.carets {
|
||||
margin-left: 1.1em;
|
||||
|
||||
.fa-li {
|
||||
top: 4px;
|
||||
left: -17px;
|
||||
width: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.carets {
|
||||
margin-left: 1.1em;
|
||||
|
||||
.fa-li {
|
||||
left: -17px;
|
||||
width: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.carets {
|
||||
margin-left: 0.85em;
|
||||
}
|
||||
margin-left: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-org-plans {
|
||||
h2 {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
h2 {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
&:not(.bg-light > .card-body) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('foregroundColor');
|
||||
color: themed('textColor');
|
||||
}
|
||||
&.card-body a:not(li a) {
|
||||
@include themify($themes) {
|
||||
font-weight: themed('linkWeight');
|
||||
}
|
||||
}
|
||||
&:not(.bg-light > .card-body) {
|
||||
@include themify($themes) {
|
||||
background-color: themed("foregroundColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
&.card-body a:not(li a) {
|
||||
@include themify($themes) {
|
||||
font-weight: themed("linkWeight");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import 'variables';
|
||||
@import "variables";
|
||||
|
||||
:export {
|
||||
darkInputColor: $darkInputColor;
|
||||
darkInputPlaceholderColor: $darkInputPlaceholderColor;
|
||||
lightInputColor: $lightInputColor;
|
||||
lightInputPlaceholderColor: $lightInputPlaceholderColor;
|
||||
darkInputColor: $darkInputColor;
|
||||
darkInputPlaceholderColor: $darkInputPlaceholderColor;
|
||||
lightInputColor: $lightInputColor;
|
||||
lightInputPlaceholderColor: $lightInputPlaceholderColor;
|
||||
}
|
||||
|
||||
8
src/scss/export.module.scss.d.ts
vendored
8
src/scss/export.module.scss.d.ts
vendored
@@ -1,8 +1,8 @@
|
||||
export interface ThemeVariableExport {
|
||||
lightInputColor: string;
|
||||
lightInputPlaceholderColor: string;
|
||||
darkInputColor: string;
|
||||
darkInputPlaceholderColor: string;
|
||||
lightInputColor: string;
|
||||
lightInputPlaceholderColor: string;
|
||||
darkInputColor: string;
|
||||
darkInputPlaceholderColor: string;
|
||||
}
|
||||
|
||||
export const ThemeVariables: ThemeVariableExport;
|
||||
|
||||
@@ -1,207 +1,216 @@
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed('inputPlaceholderColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("inputPlaceholderColor");
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
&:required {
|
||||
box-shadow: none;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
&:required {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance:
|
||||
-cancel-button;
|
||||
-webkit-appearance: -cancel-button;
|
||||
}
|
||||
|
||||
label:not(.form-check-label):not(.btn), label.bold {
|
||||
font-weight: 600;
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
label:not(.form-check-label):not(.btn),
|
||||
label.bold {
|
||||
font-weight: 600;
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
|
||||
label.form-check-label, .form-control-file {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
label.form-check-label,
|
||||
.form-control-file {
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-block {
|
||||
.form-check-label {
|
||||
font-weight: 600;
|
||||
.form-check-label {
|
||||
font-weight: 600;
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
@include themify($themes) {
|
||||
color: themed('textMuted');
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
@extend .mt-2;
|
||||
}
|
||||
> small {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
@include themify($themes) {
|
||||
color: themed("textMuted");
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
@extend .mt-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-block + .form-check-block {
|
||||
&:not(.mt-2) {
|
||||
@extend .mt-3;
|
||||
}
|
||||
&:not(.mt-2) {
|
||||
@extend .mt-3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-group-child-check {
|
||||
@extend .ml-4
|
||||
}
|
||||
.form-group-child-check {
|
||||
@extend .ml-4;
|
||||
}
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
input[type='datetime-local'] {
|
||||
width: 200px;
|
||||
}
|
||||
input[type="datetime-local"] {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
.form-control {
|
||||
@include themify($themes) {
|
||||
background-color: themed("inputBackgroundColor");
|
||||
border-color: themed("inputBorderColor");
|
||||
color: themed("inputTextColor");
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
@include themify($themes) {
|
||||
background-color: themed('inputBackgroundColor');
|
||||
border-color: themed('inputBorderColor');
|
||||
color: themed('inputTextColor');
|
||||
}
|
||||
|
||||
&:disabled, &[readonly] {
|
||||
@include themify($themes) {
|
||||
background-color: themed('inputDisabledBackground');
|
||||
color: themed('inputDisabledColor');
|
||||
}
|
||||
background-color: themed("inputDisabledBackground");
|
||||
color: themed("inputDisabledColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-control.stripe-form-control {
|
||||
padding-top: 0.55rem;
|
||||
padding-top: 0.55rem;
|
||||
|
||||
&.is-focused {
|
||||
outline: 0;
|
||||
@include themify($themes) {
|
||||
background-color: themed('inputBackgroundColor');
|
||||
border-color: themed('inputBorderColor');
|
||||
box-shadow: 0 0 0 $input-focus-width rgba(mix(color-yiq(themed('primary')), themed('primary'), 15%), .5);
|
||||
color: themed('inputTextColor');
|
||||
}
|
||||
|
||||
&.is-invalid {
|
||||
opacity: 0.75;
|
||||
@include themify($themes) {
|
||||
box-shadow: 0 0 0 $input-focus-width themed('danger');
|
||||
}
|
||||
}
|
||||
&.is-focused {
|
||||
outline: 0;
|
||||
@include themify($themes) {
|
||||
background-color: themed("inputBackgroundColor");
|
||||
border-color: themed("inputBorderColor");
|
||||
box-shadow: 0 0 0 $input-focus-width
|
||||
rgba(mix(color-yiq(themed("primary")), themed("primary"), 15%), 0.5);
|
||||
color: themed("inputTextColor");
|
||||
}
|
||||
|
||||
|
||||
&.is-invalid {
|
||||
@include themify($themes) {
|
||||
border-color: themed('danger');
|
||||
}
|
||||
opacity: 0.75;
|
||||
@include themify($themes) {
|
||||
box-shadow: 0 0 0 $input-focus-width themed("danger");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-invalid {
|
||||
@include themify($themes) {
|
||||
border-color: themed("danger");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu, .dropdown-item {
|
||||
@include themify($themes) {
|
||||
background-color: themed('dropdownBackground');
|
||||
color: themed('dropdownTextColor');
|
||||
}
|
||||
.dropdown-menu,
|
||||
.dropdown-item {
|
||||
@include themify($themes) {
|
||||
background-color: themed("dropdownBackground");
|
||||
color: themed("dropdownTextColor");
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@include themify($themes) {
|
||||
color: themed('dropdownTextColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("dropdownTextColor");
|
||||
}
|
||||
|
||||
&.text-danger {
|
||||
@include themify($themes) {
|
||||
color: themed('danger') !important;
|
||||
}
|
||||
&.text-danger {
|
||||
@include themify($themes) {
|
||||
color: themed("danger") !important;
|
||||
}
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('dropdownHover');
|
||||
}
|
||||
}
|
||||
&:active{
|
||||
background-color: rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed("dropdownHover");
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border: 1px solid themed('listItemBorder');
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include themify($themes) {
|
||||
border: 1px solid themed("listItemBorder");
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&:focus,
|
||||
&.focus {
|
||||
z-index: 100;
|
||||
&:focus,
|
||||
&.focus {
|
||||
z-index: 100;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("foregroundColor");
|
||||
border-color: themed("listItemBorder");
|
||||
color: themed("textColor");
|
||||
}
|
||||
> .two-factor-content {
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
> .text-col {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed('foregroundColor');
|
||||
border-color: themed('listItemBorder');
|
||||
color: themed('textColor');
|
||||
> .logo-col {
|
||||
min-width: 100px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
>.two-factor-content {
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
>.text-col {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
>.logo-col {
|
||||
min-width: 100px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
>.btn-col {
|
||||
width: 85px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
> .btn-col {
|
||||
width: 85px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item.active {
|
||||
font-weight: bold !important;
|
||||
padding-left: calc(#{$list-group-item-padding-x} - 3px);
|
||||
@include themify($themes) {
|
||||
border-color: themed('borderColor');
|
||||
border-left: 3px solid themed('borderPrimaryColor');
|
||||
color: themed('listItemActive');
|
||||
}
|
||||
font-weight: bold !important;
|
||||
padding-left: calc(#{$list-group-item-padding-x} - 3px);
|
||||
@include themify($themes) {
|
||||
border-color: themed("borderColor");
|
||||
border-left: 3px solid themed("borderPrimaryColor");
|
||||
color: themed("listItemActive");
|
||||
}
|
||||
}
|
||||
|
||||
// Browser specific icons overlayed on input fields. e.g. caps lock indicator on password field
|
||||
::-webkit-calendar-picker-indicator, input::-webkit-caps-lock-indicator, input::-webkit-credentials-auto-fill-button {
|
||||
@include themify($themes) {
|
||||
filter: themed('browserInputIconsFilter');
|
||||
}
|
||||
::-webkit-calendar-picker-indicator,
|
||||
input::-webkit-caps-lock-indicator,
|
||||
input::-webkit-credentials-auto-fill-button {
|
||||
@include themify($themes) {
|
||||
filter: themed("browserInputIconsFilter");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,161 +1,163 @@
|
||||
.modal-content {
|
||||
border: none;
|
||||
border-radius: none;
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
}
|
||||
border: none;
|
||||
border-radius: none;
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.3rem;
|
||||
width: $modal-md;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.3rem;
|
||||
width: $modal-md;
|
||||
}
|
||||
|
||||
.modal-sm {
|
||||
width: $modal-sm;
|
||||
width: $modal-sm;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
width: $modal-lg;
|
||||
.modal-lg {
|
||||
width: $modal-lg;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@include themify($themes) {
|
||||
background-color: themed('foregroundColor');
|
||||
border-bottom: 1px solid themed('separator');
|
||||
color: themed('textColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("foregroundColor");
|
||||
border-bottom: 1px solid themed("separator");
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@include themify($themes) {
|
||||
background-color: themed('foregroundColor');
|
||||
color: themed('textColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("foregroundColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
h3, .section-header > * {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
@include themify($themes) {
|
||||
color: themed('textMuted');
|
||||
}
|
||||
h3,
|
||||
.section-header > * {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
@include themify($themes) {
|
||||
color: themed("textMuted");
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal .list-group-flush {
|
||||
:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal .list-group-flush-2fa {
|
||||
div {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
div:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
div {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
div:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
justify-content: flex-start;
|
||||
@include themify($themes) {
|
||||
background-color: themed('footerBackgroundColor');
|
||||
border-top: 1px solid themed('separator');
|
||||
}
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
justify-content: flex-start;
|
||||
@include themify($themes) {
|
||||
background-color: themed("footerBackgroundColor");
|
||||
border-top: 1px solid themed("separator");
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
#totpImage {
|
||||
@include themify($themes) {
|
||||
filter: themed('imgFilter');
|
||||
}
|
||||
@include themify($themes) {
|
||||
filter: themed("imgFilter");
|
||||
}
|
||||
}
|
||||
|
||||
.totp {
|
||||
.totp-code {
|
||||
@extend .text-monospace;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.totp-countdown {
|
||||
display: block;
|
||||
margin: 3px 3px 0 0;
|
||||
user-select: none;
|
||||
|
||||
.totp-sec {
|
||||
font-size: 0.85em;
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 32px;
|
||||
transform: rotate(-90deg);
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
fill: none;
|
||||
@include themify($themes) {
|
||||
stroke: themed("primary");
|
||||
}
|
||||
|
||||
&.inner {
|
||||
stroke-dasharray: 78.6;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
&.outer {
|
||||
stroke-dasharray: 88;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .align-items-center {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
&.low {
|
||||
.totp-sec,
|
||||
.totp-code {
|
||||
@extend .text-monospace;
|
||||
font-size: 1.2rem;
|
||||
@include themify($themes) {
|
||||
color: themed("danger");
|
||||
}
|
||||
}
|
||||
|
||||
.totp-countdown {
|
||||
display: block;
|
||||
margin: 3px 3px 0 0;
|
||||
user-select: none;
|
||||
|
||||
.totp-sec {
|
||||
font-size: 0.85em;
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 32px;
|
||||
transform: rotate(-90deg);
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
fill: none;
|
||||
@include themify($themes) {
|
||||
stroke: themed('primary');
|
||||
}
|
||||
|
||||
&.inner {
|
||||
stroke-dasharray: 78.6;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
&.outer {
|
||||
stroke-dasharray: 88;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .align-items-center {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
&.low {
|
||||
.totp-sec, .totp-code {
|
||||
@include themify($themes) {
|
||||
color: themed('danger');
|
||||
}
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
@include themify($themes) {
|
||||
stroke: themed('danger');
|
||||
}
|
||||
}
|
||||
.totp-circle {
|
||||
@include themify($themes) {
|
||||
stroke: themed("danger");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
border-radius: $border-radius;
|
||||
opacity: 0.8;
|
||||
z-index: $zindex-tooltip !important;
|
||||
@include themify($themes) {
|
||||
background: themed('cdkDraggingBackground');
|
||||
}
|
||||
border-radius: $border-radius;
|
||||
opacity: 0.8;
|
||||
z-index: $zindex-tooltip !important;
|
||||
@include themify($themes) {
|
||||
background: themed("cdkDraggingBackground");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,114 +1,115 @@
|
||||
.navbar {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@include themify($themes) {
|
||||
background-color: themed("navBackground");
|
||||
}
|
||||
|
||||
&.nav-background-alt {
|
||||
@include themify($themes) {
|
||||
background-color: themed('navBackground');
|
||||
background-color: themed("navBackgroundAlt");
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-background-alt {
|
||||
@include themify($themes) {
|
||||
background-color: themed('navBackgroundAlt');
|
||||
.dropdown-menu {
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
|
||||
.dropdown-item-text {
|
||||
line-height: 1.3;
|
||||
@include themify($themes) {
|
||||
color: themed("dropdownTextColor");
|
||||
}
|
||||
|
||||
span,
|
||||
small {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&.text-muted {
|
||||
@include themify($themes) {
|
||||
color: themed("dropdownTextMuted") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
|
||||
.dropdown-item-text {
|
||||
line-height: 1.3;
|
||||
@include themify($themes) {
|
||||
color: themed('dropdownTextColor');
|
||||
}
|
||||
|
||||
span, small {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&.text-muted {
|
||||
@include themify($themes) {
|
||||
color: themed('dropdownTextMuted') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
> .nav-link {
|
||||
@include themify($themes) {
|
||||
font-weight: themed("navWeight");
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
> .nav-link {
|
||||
@include themify($themes) {
|
||||
font-weight: themed('navWeight');
|
||||
}
|
||||
}
|
||||
&.active > .nav-link {
|
||||
@include themify($themes) {
|
||||
font-weight: themed('navActiveWeight');
|
||||
}
|
||||
}
|
||||
&.active > .nav-link {
|
||||
@include themify($themes) {
|
||||
font-weight: themed("navActiveWeight");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
margin-bottom: -20px;
|
||||
margin-top: -20px;
|
||||
margin-bottom: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active {
|
||||
@include themify($themes) {
|
||||
background: themed('navActiveBackground');
|
||||
border-color: themed('borderColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background: themed("navActiveBackground");
|
||||
border-color: themed("borderColor");
|
||||
}
|
||||
}
|
||||
|
||||
.org-nav {
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
@include themify($themes) {
|
||||
background-color: themed('navOrgBackgroundColor');
|
||||
border-bottom: 1px solid themed('borderColor');
|
||||
color: themed('textColor');
|
||||
}
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
@include themify($themes) {
|
||||
background-color: themed("navOrgBackgroundColor");
|
||||
border-bottom: 1px solid themed("borderColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
|
||||
a {
|
||||
&:not(.active) {
|
||||
border-color: transparent;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
padding-top: calc(#{$nav-link-padding-y} - 2px);
|
||||
@include themify($themes) {
|
||||
border-top: 3px solid themed('primary');
|
||||
color: themed('linkColor');
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include themify($themes) {
|
||||
color: themed('inputDisabledColor');
|
||||
}
|
||||
}
|
||||
a {
|
||||
&:not(.active) {
|
||||
border-color: transparent;
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.org-name {
|
||||
line-height: 1;
|
||||
span {
|
||||
display: block;
|
||||
font-size: $font-size-lg;
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
padding-top: calc(#{$nav-link-padding-y} - 2px);
|
||||
@include themify($themes) {
|
||||
border-top: 3px solid themed("primary");
|
||||
color: themed("linkColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include themify($themes) {
|
||||
color: themed("inputDisabledColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.org-name {
|
||||
line-height: 1;
|
||||
span {
|
||||
display: block;
|
||||
font-size: $font-size-lg;
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,230 +1,235 @@
|
||||
.password-wrapper {
|
||||
min-width: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
min-width: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.password-row {
|
||||
min-width: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.password-letter {
|
||||
@include themify($themes) {
|
||||
color: themed('pwLetter');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("pwLetter");
|
||||
}
|
||||
}
|
||||
|
||||
.password-number {
|
||||
@include themify($themes) {
|
||||
color: themed('pwNumber');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("pwNumber");
|
||||
}
|
||||
}
|
||||
|
||||
.password-special {
|
||||
@include themify($themes) {
|
||||
color: themed('pwSpecial');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("pwSpecial");
|
||||
}
|
||||
}
|
||||
|
||||
app-vault-groupings, app-org-vault-groupings, .groupings {
|
||||
.card {
|
||||
#search {
|
||||
margin-bottom: 1rem;
|
||||
@include themify($themes) {
|
||||
background-color: themed('inputBackgroundColor');
|
||||
border-color: themed('inputBorderColor');
|
||||
color: themed('inputTextColor');
|
||||
}
|
||||
app-vault-groupings,
|
||||
app-org-vault-groupings,
|
||||
.groupings {
|
||||
.card {
|
||||
#search {
|
||||
margin-bottom: 1rem;
|
||||
@include themify($themes) {
|
||||
background-color: themed("inputBackgroundColor");
|
||||
border-color: themed("inputBorderColor");
|
||||
color: themed("inputTextColor");
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed('inputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
@include themify($themes) {
|
||||
color: themed('textMuted');
|
||||
}
|
||||
}
|
||||
|
||||
ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-body a {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
font-weight: themed('linkWeight');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.text-muted {
|
||||
@include themify($themes) {
|
||||
color: themed('iconHover') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
> .fa, > div > .fa {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
> .show-active, > div .show-active {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
> a:first-of-type, > div a:first-of-type {
|
||||
font-weight: bold;
|
||||
@include themify($themes) {
|
||||
color: themed('linkColor');
|
||||
}
|
||||
}
|
||||
|
||||
> .fa, > div > .fa {
|
||||
@include themify($themes) {
|
||||
color: themed('linkColor');
|
||||
}
|
||||
}
|
||||
&::placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed("inputPlaceholderColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
@include themify($themes) {
|
||||
color: themed("textMuted");
|
||||
}
|
||||
}
|
||||
|
||||
ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-body a {
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
font-weight: themed("linkWeight");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.text-muted {
|
||||
@include themify($themes) {
|
||||
color: themed("iconHover") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
> .fa,
|
||||
> div > .fa {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
> .show-active,
|
||||
> div .show-active {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
> a:first-of-type,
|
||||
> div a:first-of-type {
|
||||
font-weight: bold;
|
||||
@include themify($themes) {
|
||||
color: themed("linkColor");
|
||||
}
|
||||
}
|
||||
|
||||
> .fa,
|
||||
> div > .fa {
|
||||
@include themify($themes) {
|
||||
color: themed("linkColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app-password-generator {
|
||||
#lengthRange {
|
||||
width: 100%;
|
||||
}
|
||||
#lengthRange {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-password {
|
||||
.card-body {
|
||||
@include themify($themes) {
|
||||
background: themed('foregroundColor');
|
||||
}
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-lg;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.card-password {
|
||||
.card-body {
|
||||
@include themify($themes) {
|
||||
background: themed("foregroundColor");
|
||||
}
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-lg;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app-password-generator-history {
|
||||
.list-group-item {
|
||||
line-height: 1;
|
||||
@include themify($themes) {
|
||||
background: themed('backgroundColor');
|
||||
}
|
||||
|
||||
.password {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
.list-group-item {
|
||||
line-height: 1;
|
||||
@include themify($themes) {
|
||||
background: themed("backgroundColor");
|
||||
}
|
||||
|
||||
.password {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app-import {
|
||||
textarea {
|
||||
height: 150px;
|
||||
}
|
||||
textarea {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
app-avatar {
|
||||
img {
|
||||
@extend .rounded;
|
||||
}
|
||||
img {
|
||||
@extend .rounded;
|
||||
}
|
||||
}
|
||||
|
||||
app-user-billing {
|
||||
.progress {
|
||||
height: 20px;
|
||||
|
||||
.progress-bar {
|
||||
min-width: 50px;
|
||||
}
|
||||
.progress {
|
||||
height: 20px;
|
||||
|
||||
.progress-bar {
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app-sponsored-families {
|
||||
.inset-list {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.inset-list {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Register Layout Page */
|
||||
.layout {
|
||||
&.enterprise2 {
|
||||
header {
|
||||
background: #175DDC;
|
||||
color: #CED4DA;
|
||||
&.enterprise2 {
|
||||
header {
|
||||
background: #175ddc;
|
||||
color: #ced4da;
|
||||
|
||||
&:before {
|
||||
background: #175DDC;
|
||||
content: "";
|
||||
height: 416px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: -76px;
|
||||
transform: skewY(-3deg);
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
img.logo {
|
||||
height: 57px;
|
||||
margin: 12px 0 0;
|
||||
max-width: 284px;
|
||||
width: 284px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #FFFFFF;
|
||||
font-size: 1.8rem;
|
||||
margin: 100px 0 150px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
margin: 20px 0 40px 0;
|
||||
|
||||
&:before {
|
||||
content: "/";
|
||||
padding-right: 12px;
|
||||
}
|
||||
&:not(.highlight) {
|
||||
&:before {
|
||||
color: #1252A3;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
&:after {
|
||||
content: "⟶";
|
||||
font-size: 2rem;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1.4rem;
|
||||
margin: 20px 0 0 0;
|
||||
padding-right: 40px;
|
||||
}
|
||||
&:before {
|
||||
background: #175ddc;
|
||||
content: "";
|
||||
height: 416px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: -76px;
|
||||
transform: skewY(-3deg);
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
img.logo {
|
||||
height: 57px;
|
||||
margin: 12px 0 0;
|
||||
max-width: 284px;
|
||||
width: 284px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
font-size: 1.8rem;
|
||||
margin: 100px 0 150px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
margin: 20px 0 40px 0;
|
||||
|
||||
&:before {
|
||||
content: "/";
|
||||
padding-right: 12px;
|
||||
}
|
||||
&:not(.highlight) {
|
||||
&:before {
|
||||
color: #1252a3;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
&:after {
|
||||
content: "⟶";
|
||||
font-size: 2rem;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1.4rem;
|
||||
margin: 20px 0 0 0;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,226 +1,227 @@
|
||||
#duo-frame {
|
||||
height: 330px;
|
||||
@include themify($themes) {
|
||||
background: themed('imgLoading') 0 0 no-repeat;
|
||||
}
|
||||
height: 330px;
|
||||
@include themify($themes) {
|
||||
background: themed("imgLoading") 0 0 no-repeat;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#web-authn-frame {
|
||||
height: 290px;
|
||||
@include themify($themes) {
|
||||
background: themed('imgLoading') 0 0 no-repeat;
|
||||
}
|
||||
height: 290px;
|
||||
@include themify($themes) {
|
||||
background: themed("imgLoading") 0 0 no-repeat;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#hcaptcha_iframe {
|
||||
border: none;
|
||||
transition: height 0.25s linear;
|
||||
width: 100%;
|
||||
border: none;
|
||||
transition: height 0.25s linear;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-group-2fa {
|
||||
.logo-2fa {
|
||||
min-width: 100px;
|
||||
}
|
||||
.logo-2fa {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@each $mfaType in $mfaTypes {
|
||||
.mfaType#{$mfaType} {
|
||||
content: url('../images/two-factor/' + $mfaType + '.png');
|
||||
max-width: 100px;
|
||||
}
|
||||
.mfaType#{$mfaType} {
|
||||
content: url("../images/two-factor/" + $mfaType + ".png");
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.mfaType1 {
|
||||
@include themify($themes) {
|
||||
content: url('../images/two-factor/1' + themed('mfaLogoSuffix'));
|
||||
max-width: 100px;
|
||||
max-height: 45px;
|
||||
}
|
||||
@include themify($themes) {
|
||||
content: url("../images/two-factor/1" + themed("mfaLogoSuffix"));
|
||||
max-width: 100px;
|
||||
max-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.mfaType7 {
|
||||
@include themify($themes) {
|
||||
content: url('../images/two-factor/7' + themed('mfaLogoSuffix'));
|
||||
max-width: 100px;
|
||||
}
|
||||
@include themify($themes) {
|
||||
content: url("../images/two-factor/7" + themed("mfaLogoSuffix"));
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.recovery-code-img {
|
||||
@include themify($themes) {
|
||||
content: url('../images/two-factor/rc' + themed('mfaLogoSuffix'));
|
||||
max-width: 100px;
|
||||
max-height: 45px;
|
||||
}
|
||||
@include themify($themes) {
|
||||
content: url("../images/two-factor/rc" + themed("mfaLogoSuffix"));
|
||||
max-width: 100px;
|
||||
max-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
@include themify($themes) {
|
||||
background-color: themed('pwStrengthBackground');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("pwStrengthBackground");
|
||||
}
|
||||
}
|
||||
|
||||
// Braintree
|
||||
|
||||
#bt-dropin-container {
|
||||
min-height: 50px;
|
||||
@include themify($themes) {
|
||||
background: themed("loadingSvg") center center no-repeat;
|
||||
}
|
||||
min-height: 50px;
|
||||
@include themify($themes) {
|
||||
background: themed("loadingSvg") center center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.braintree-placeholder, .braintree-sheet__header {
|
||||
display: none;
|
||||
.braintree-placeholder,
|
||||
.braintree-sheet__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.braintree-sheet__content--button {
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.braintree-sheet__container {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.braintree-sheet {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
[data-braintree-id="upper-container"]::before {
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
.card [data-braintree-id="upper-container"]::before {
|
||||
@include themify($themes) {
|
||||
background-color: themed('foregroundColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("foregroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
[data-braintree-id="paypal-button"] {
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
.card [data-braintree-id="paypal-button"] {
|
||||
@include themify($themes) {
|
||||
background-color: themed('foregroundColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("foregroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
.paypal-button-text {
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
// SweetAlert2
|
||||
|
||||
[class*="swal2-"] {
|
||||
&:not(.swal2-container, .swal2-confirm, .swal2-cancel, .swal2-deny) {
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
color: themed('textColor');
|
||||
}
|
||||
&:not(.swal2-container, .swal2-confirm, .swal2-cancel, .swal2-deny) {
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-container {
|
||||
background-color: rgba(0,0,0,.3);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.swal2-popup {
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
border: $modal-content-border-width solid #9a9a9a;
|
||||
@include border-radius($modal-content-border-radius);
|
||||
padding: 15px 0 0;
|
||||
width: 34em; // slightly bigger than the hardcoded 478px in v1.
|
||||
|
||||
.swal2-header {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.swal2-icon {
|
||||
border: none;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
font-size: $font-size-base;
|
||||
padding-bottom: 15px;
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
color: themed('textColor');
|
||||
border-bottom: $modal-footer-border-width solid themed("separator");
|
||||
}
|
||||
border: $modal-content-border-width solid #9a9a9a;
|
||||
}
|
||||
|
||||
i.swal-custom-icon {
|
||||
display: block;
|
||||
font-size: 35px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swal2-title {
|
||||
font-size: $font-size-lg;
|
||||
margin: 0;
|
||||
padding: 10px 0 15px;
|
||||
@include themify($themes) {
|
||||
color: themed("headingColor");
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
font-size: $font-size-base;
|
||||
padding: 0 15px 15px;
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-actions {
|
||||
@include border-radius($modal-content-border-radius);
|
||||
padding: 15px 0 0;
|
||||
width: 34em; // slightly bigger than the hardcoded 478px in v1.
|
||||
|
||||
.swal2-header {
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $font-size-base;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
}
|
||||
|
||||
.swal2-icon {
|
||||
border: none;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
button {
|
||||
margin-right: 10px;
|
||||
@extend .btn;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
font-size: $font-size-base;
|
||||
padding-bottom: 15px;
|
||||
@include themify($themes) {
|
||||
border-bottom: $modal-footer-border-width solid themed('separator');
|
||||
}
|
||||
}
|
||||
|
||||
i.swal-custom-icon {
|
||||
display: block;
|
||||
font-size: 35px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swal2-title {
|
||||
font-size: $font-size-lg;
|
||||
margin: 0;
|
||||
padding: 10px 0 15px;
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
font-size: $font-size-base;
|
||||
padding: 0 15px 15px;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-actions {
|
||||
@include border-radius($modal-content-border-radius);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $font-size-base;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
@extend .btn;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-validation-message {
|
||||
margin: 0 -15px;
|
||||
}
|
||||
.swal2-validation-message {
|
||||
margin: 0 -15px;
|
||||
}
|
||||
}
|
||||
|
||||
date-input-polyfill {
|
||||
&[data-open="true"] {
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
&[data-open="true"] {
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
@import "~bootstrap/scss/_utilities";
|
||||
@import "~bootstrap/scss/_print";
|
||||
|
||||
@import '~ngx-toastr/toastr';
|
||||
@import "~ngx-toastr/toastr";
|
||||
@import "~font-awesome/scss/font-awesome.scss";
|
||||
@import "~sweetalert2/src/sweetalert2.scss";
|
||||
|
||||
|
||||
@@ -1,131 +1,135 @@
|
||||
.table {
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
& > a {
|
||||
&:not(.badge) {
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
color: themed("tableLinkColor");
|
||||
}
|
||||
|
||||
& > a {
|
||||
&:not(.badge) {
|
||||
@include themify($themes) {
|
||||
color: themed('tableLinkColor');
|
||||
}
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
color: themed('tableLinkColorHover');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reduced-lh {
|
||||
line-height: 1;
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
small, > .fa, .icon {
|
||||
@include themify($themes) {
|
||||
color: themed('textMuted');
|
||||
}
|
||||
}
|
||||
|
||||
.fa-globe {
|
||||
@include themify($themes) {
|
||||
color: themed('iconColor');
|
||||
}
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
color: themed("tableLinkColorHover");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.wrap {
|
||||
word-break: break-all;
|
||||
&.reduced-lh {
|
||||
line-height: 1;
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
td.table-list-options {
|
||||
height: 50px;
|
||||
max-width: 76px;
|
||||
text-align: right;
|
||||
width: 76px;
|
||||
|
||||
&.wider {
|
||||
max-width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
line-height: 1;
|
||||
transition: initial;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
small,
|
||||
> .fa,
|
||||
.icon {
|
||||
@include themify($themes) {
|
||||
color: themed("textMuted");
|
||||
}
|
||||
}
|
||||
|
||||
td.table-action-right {
|
||||
text-align: right;
|
||||
.fa-globe {
|
||||
@include themify($themes) {
|
||||
color: themed("iconColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.wrap {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
td.table-list-options {
|
||||
height: 50px;
|
||||
max-width: 76px;
|
||||
text-align: right;
|
||||
width: 76px;
|
||||
|
||||
&.wider {
|
||||
max-width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
tr:not(:hover) td.table-list-options {
|
||||
> .dropdown:not(.show) button:not(:focus):not(:active), > button:not(:focus):not(:active) {
|
||||
@extend .sr-only;
|
||||
}
|
||||
.btn {
|
||||
line-height: 1;
|
||||
transition: initial;
|
||||
}
|
||||
|
||||
td.table-list-icon {
|
||||
max-width: 45px;
|
||||
text-align: center;
|
||||
width: 45px;
|
||||
|
||||
img {
|
||||
@extend .rounded;
|
||||
@extend .img-fluid;
|
||||
max-height: 24px;
|
||||
}
|
||||
.dropdown-menu {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
||||
|
||||
td.table-list-checkbox {
|
||||
max-width: 35px;
|
||||
width: 35px;
|
||||
td.table-action-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
tr:not(:hover) td.table-list-options {
|
||||
> .dropdown:not(.show) button:not(:focus):not(:active),
|
||||
> button:not(:focus):not(:active) {
|
||||
@extend .sr-only;
|
||||
}
|
||||
}
|
||||
|
||||
td.table-list-strike {
|
||||
text-decoration: line-through;
|
||||
td.table-list-icon {
|
||||
max-width: 45px;
|
||||
text-align: center;
|
||||
width: 45px;
|
||||
|
||||
img {
|
||||
@extend .rounded;
|
||||
@extend .img-fluid;
|
||||
max-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
td.table-list-checkbox {
|
||||
max-width: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
td.table-list-strike {
|
||||
text-decoration: line-through;
|
||||
@include themify($themes) {
|
||||
color: themed("textMuted");
|
||||
}
|
||||
}
|
||||
|
||||
&.table-list {
|
||||
&.table td,
|
||||
.table th {
|
||||
&:not(tr:first-child td) {
|
||||
@include themify($themes) {
|
||||
color: themed('textMuted');
|
||||
border-top: 1px solid themed("tableSeparator");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-list {
|
||||
&.table td, .table th {
|
||||
&:not(tr:first-child td) {
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed('tableSeparator');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('tableRowHover');
|
||||
color: themed('tableColorHover');
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed("tableRowHover");
|
||||
color: themed("tableColorHover");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,108 +1,117 @@
|
||||
.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('danger');
|
||||
}
|
||||
|
||||
&, &:before, & .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed('dangerTextColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f0e7";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-warning {
|
||||
@include themify($themes) {
|
||||
background-color: themed('warning');
|
||||
}
|
||||
|
||||
&, &:before, & .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed('warningTextColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f071";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-info {
|
||||
@include themify($themes) {
|
||||
background-color: themed('info');
|
||||
}
|
||||
|
||||
&, &:before, & .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed('infoTextColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon i:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-success {
|
||||
@include themify($themes) {
|
||||
background-color: themed('success');
|
||||
}
|
||||
|
||||
&, &:before, & .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed('successTextColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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("danger");
|
||||
}
|
||||
|
||||
&,
|
||||
&:before,
|
||||
& .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed("dangerTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f0e7";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-warning {
|
||||
@include themify($themes) {
|
||||
background-color: themed("warning");
|
||||
}
|
||||
|
||||
&,
|
||||
&:before,
|
||||
& .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed("warningTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon i::before {
|
||||
content: "\f071";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-info {
|
||||
@include themify($themes) {
|
||||
background-color: themed("info");
|
||||
}
|
||||
|
||||
&,
|
||||
&:before,
|
||||
& .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed("infoTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon i:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-success {
|
||||
@include themify($themes) {
|
||||
background-color: themed("success");
|
||||
}
|
||||
|
||||
&,
|
||||
&:before,
|
||||
& .toast-close-button {
|
||||
@include themify($themes) {
|
||||
color: themed("successTextColor") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon i:before {
|
||||
content: "\f00C";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
$primary: #175DDC;
|
||||
$primary-accent: #1252A3;
|
||||
$secondary: #CED4DA;
|
||||
$secondary-alt: #1A3B66;
|
||||
$success: #00A65A;
|
||||
$primary: #175ddc;
|
||||
$primary-accent: #1252a3;
|
||||
$secondary: #ced4da;
|
||||
$secondary-alt: #1a3b66;
|
||||
$success: #00a65a;
|
||||
$info: #555555;
|
||||
$warning: #BF7E16;
|
||||
$danger: #DD4B39;
|
||||
$white: #FFFFFF;
|
||||
$warning: #bf7e16;
|
||||
$danger: #dd4b39;
|
||||
$white: #ffffff;
|
||||
|
||||
$theme-colors: (
|
||||
"primary-accent": $primary-accent,
|
||||
"secondary-alt": $secondary-alt,
|
||||
$theme-colors: (
|
||||
"primary-accent": $primary-accent,
|
||||
"secondary-alt": $secondary-alt,
|
||||
);
|
||||
|
||||
$body-bg: $white;
|
||||
$body-color: #333333;
|
||||
|
||||
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
|
||||
Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
$h1-font-size: 1.7rem;
|
||||
$h2-font-size: 1.3rem;
|
||||
@@ -30,35 +30,35 @@ $small-font-size: 90%;
|
||||
$font-size-lg: 1.15rem;
|
||||
$code-font-size: 100%;
|
||||
|
||||
$navbar-padding-y: .75rem;
|
||||
$navbar-padding-y: 0.75rem;
|
||||
$grid-gutter-width: 20px;
|
||||
$card-spacer-y: .6rem;
|
||||
$card-spacer-y: 0.6rem;
|
||||
|
||||
$list-group-item-padding-y: .6rem;
|
||||
$list-group-item-padding-y: 0.6rem;
|
||||
$list-group-active-color: $body-color;
|
||||
$list-group-active-bg: $white;
|
||||
$list-group-active-border-color: rgba(#000000, .125);
|
||||
$list-group-active-border-color: rgba(#000000, 0.125);
|
||||
|
||||
$dropdown-link-color: $body-color;
|
||||
$dropdown-link-hover-bg: rgba(#000000, .06);
|
||||
$dropdown-link-hover-bg: rgba(#000000, 0.06);
|
||||
$dropdown-link-active-color: $dropdown-link-color;
|
||||
$dropdown-link-active-bg: rgba(#000000, .1);
|
||||
$dropdown-link-active-bg: rgba(#000000, 0.1);
|
||||
$dropdown-item-padding-x: 1rem;
|
||||
|
||||
$navbar-brand-font-size: 35px;
|
||||
$navbar-brand-height: 35px;
|
||||
$navbar-brand-padding-y: 0;
|
||||
$navbar-dark-color: rgba($white, .7);
|
||||
$navbar-dark-hover-color: rgba($white, .9);
|
||||
$navbar-dark-color: rgba($white, 0.7);
|
||||
$navbar-dark-hover-color: rgba($white, 0.9);
|
||||
$navbar-nav-link-padding-x: 0.8rem;
|
||||
|
||||
$input-bg: #FBFBFB;
|
||||
$input-bg: #fbfbfb;
|
||||
$input-focus-bg: $white;
|
||||
$input-disabled-bg: #E0E0E0;
|
||||
$input-placeholder-color: #B4B4B4;
|
||||
$input-disabled-bg: #e0e0e0;
|
||||
$input-placeholder-color: #b4b4b4;
|
||||
|
||||
$table-accent-bg: rgba(#000000, .02);
|
||||
$table-hover-bg: rgba(#000000, .03);
|
||||
$table-accent-bg: rgba(#000000, 0.02);
|
||||
$table-hover-bg: rgba(#000000, 0.03);
|
||||
|
||||
$modal-backdrop-opacity: 0.3;
|
||||
$btn-font-weight: 600;
|
||||
@@ -69,7 +69,7 @@ $grid-breakpoints: (
|
||||
sm: 1px,
|
||||
md: 2px,
|
||||
lg: 3px,
|
||||
xl: 4px
|
||||
xl: 4px,
|
||||
);
|
||||
|
||||
$text-color: #333333;
|
||||
@@ -83,277 +83,282 @@ $mfaTypes: 0, 2, 3, 4, 6;
|
||||
|
||||
// Theme Variables
|
||||
|
||||
$lightDangerHover: #C43421;
|
||||
$lightDangerHover: #c43421;
|
||||
|
||||
$darkPrimary: #6A99F0;
|
||||
$darkPrimary-alt: #B4CCF9;
|
||||
$darkDanger: #FF8D85;
|
||||
$darkDangerHover: #FFBfBB;
|
||||
$darkSuccess: #52E07C;
|
||||
$darkWarning: #FFEB66;
|
||||
$darkInfo: #A4B0C6;
|
||||
$darkLinks: #6A99F0;
|
||||
$darkGrey1: #BAC0CE;
|
||||
$darkGrey2: #8D94A5;
|
||||
$darkBlue1: #4C525F;
|
||||
$darkBlue2: #3C424E;
|
||||
$darkDarkBlue1: #2F343D;
|
||||
$darkDarkBlue2: #1F242E;
|
||||
$darkPrimary: #6a99f0;
|
||||
$darkPrimary-alt: #b4ccf9;
|
||||
$darkDanger: #ff8d85;
|
||||
$darkDangerHover: #ffbfbb;
|
||||
$darkSuccess: #52e07c;
|
||||
$darkWarning: #ffeb66;
|
||||
$darkInfo: #a4b0c6;
|
||||
$darkLinks: #6a99f0;
|
||||
$darkGrey1: #bac0ce;
|
||||
$darkGrey2: #8d94a5;
|
||||
$darkBlue1: #4c525f;
|
||||
$darkBlue2: #3c424e;
|
||||
$darkDarkBlue1: #2f343d;
|
||||
$darkDarkBlue2: #1f242e;
|
||||
|
||||
$lightInputColor: #465057;
|
||||
$lightInputPlaceholderColor: #B6B8B8;
|
||||
$lightInputPlaceholderColor: #b6b8b8;
|
||||
$darkInputColor: $white;
|
||||
$darkInputPlaceholderColor: $darkGrey1;
|
||||
|
||||
$themes: (
|
||||
light: (
|
||||
logoSuffix: 'dark',
|
||||
primary: $primary,
|
||||
primaryAlt: $primary-accent,
|
||||
danger: $danger,
|
||||
success: $success,
|
||||
warning: $warning,
|
||||
info: #343A40,
|
||||
textColor: $text-color,
|
||||
headingColor: #333333,
|
||||
darkTextColor: #495057,
|
||||
warningTextColor: $white,
|
||||
successTextColor: $white,
|
||||
dangerTextColor: $white,
|
||||
infoTextColor: $white,
|
||||
textMuted: #6C757D,
|
||||
backgroundColor: $body-bg,
|
||||
badgeDangerBackground: $danger,
|
||||
badgeDangerText: $white,
|
||||
badgeInfoBackground: #555555,
|
||||
badgeInfoText: $white,
|
||||
badgePrimaryBackground: $primary,
|
||||
badgePrimaryBackgroundHover: #134EB9,
|
||||
badgePrimaryText: $white,
|
||||
badgeSecondaryBackground: #CED4DA,
|
||||
badgeSecondaryText: #212529,
|
||||
bgPrimaryColor: $primary,
|
||||
bgLightColor: #F8F9FA,
|
||||
borderColor: $border-color,
|
||||
borderPrimaryColor: $primary,
|
||||
btnDanger: $danger,
|
||||
btnDangerHover: $lightDangerHover,
|
||||
btnDangerText: $white,
|
||||
btnLinkTextColor: $primary,
|
||||
btnLinkTextColorHover: #104097,
|
||||
btnOutlineDangerBackground: $input-bg,
|
||||
btnOutlineDangerBackgroundHover: $danger,
|
||||
btnOutlineDangerBorder: #CED4DA,
|
||||
btnOutlineDangerBorderHover: $danger,
|
||||
btnOutlineDangerText: $danger,
|
||||
btnOutlineDangerTextHover: $white,
|
||||
btnOutlinePrimaryBackground: $input-bg,
|
||||
btnOutlinePrimaryBackgroundHover: $primary,
|
||||
btnOutlinePrimaryBorder: #CED4DA,
|
||||
btnOutlinePrimaryBorderHover: $primary,
|
||||
btnOutlinePrimaryText: $primary,
|
||||
btnOutlinePrimaryTextHover: $white,
|
||||
btnOutlineSecondaryBackground: $input-bg,
|
||||
btnOutlineSecondaryBackgroundHover: #CED4DA,
|
||||
btnOutlineSecondaryBorder: #CED4DA,
|
||||
btnOutlineSecondaryBorderHover: #CED4DA,
|
||||
btnOutlineSecondaryText: #6C757D,
|
||||
btnOutlineSecondaryTextHover: #333333,
|
||||
btnPrimary: $primary,
|
||||
btnPrimaryBorderHover: #1249AE,
|
||||
btnPrimaryHover: #134EB9,
|
||||
btnPrimaryText: $white,
|
||||
btnSecondary: $secondary,
|
||||
btnSecondaryBorder: $secondary,
|
||||
btnSecondaryBorderHover: #B1BBC4,
|
||||
btnSecondaryHover: #B8C1CA,
|
||||
btnSecondaryText: #212529,
|
||||
btnSecondaryTextHover: #212529,
|
||||
calloutBackground: #FAFAFA,
|
||||
calloutColor: #212529,
|
||||
cdkDraggingBackground: $white,
|
||||
codeColor: #E83E8C,
|
||||
dropdownBackground: $white,
|
||||
dropdownDangerHover: #C43421,
|
||||
dropdownHover: rgba(0,0,0,0.06),
|
||||
dropdownTextColor: $text-color,
|
||||
dropdownTextMuted: #6C757D,
|
||||
focus: rgb(23 93 220 / 25%),
|
||||
footerBackgroundColor: #FBFBFB,
|
||||
foregroundColor: $white,
|
||||
headerColor: rgba(0,0,0,0.03),
|
||||
iconColor: #777777,
|
||||
iconHover: $body-color,
|
||||
imgFilter: invert(0) grayscale(0),
|
||||
inputBackgroundColor: #FBFBFB,
|
||||
inputBorderColor: $border-color,
|
||||
inputDisabledBackground: #E0E0E0,
|
||||
inputDisabledColor: #6C757D,
|
||||
inputPlaceholderColor: $lightInputPlaceholderColor,
|
||||
inputTextColor: $lightInputColor,
|
||||
layoutFrontendColor: #ECF0F5,
|
||||
learnMoreHover: #104097,
|
||||
linkColor: $primary,
|
||||
linkColorHover: #104097,
|
||||
linkWeight: 400,
|
||||
listItemActive: $text-color,
|
||||
listItemBorder: rgba(0,0,0,.125),
|
||||
listItemColor: $primary,
|
||||
listItemColorHover: #104097,
|
||||
loadingSvg: url('../images/loading.svg'),
|
||||
navActiveBackground: $white,
|
||||
navActiveWeight: 600,
|
||||
navBackground: $primary,
|
||||
navBackgroundAlt: $secondary-alt,
|
||||
navOrgBackgroundColor: #FBFBFB,
|
||||
navWeight: 600,
|
||||
pwLetter: $text-color,
|
||||
pwNumber: #007FDE,
|
||||
pwSpecial: #C40800,
|
||||
pwStrengthBackground: #E9ECEF,
|
||||
registerHeadingColor: $white,
|
||||
separator: $secondary,
|
||||
separatorHr: rgb(0,0,0,0.1),
|
||||
tableColorHover: #333333,
|
||||
tableLinkColor: $primary,
|
||||
tableLinkColorHover: #104097,
|
||||
tableRowHover: rgba(0,0,0,0.03),
|
||||
tableSeparator: #DEE2E6,
|
||||
browserInputIconsFilter: invert(0),
|
||||
mfaLogoSuffix: '.png'
|
||||
),
|
||||
dark: (
|
||||
logoSuffix: 'white',
|
||||
primary: $darkPrimary,
|
||||
primaryAlt: $darkPrimary-alt,
|
||||
danger: $darkDanger,
|
||||
success: $darkSuccess,
|
||||
warning: $darkWarning,
|
||||
info: $darkInfo,
|
||||
textColor: $darkGrey1,
|
||||
headingColor: $white,
|
||||
darkTextColor: $darkDarkBlue2,
|
||||
warningTextColor: $darkDarkBlue2,
|
||||
successTextColor: $darkDarkBlue2,
|
||||
dangerTextColor: $darkDarkBlue2,
|
||||
infoTextColor: $darkDarkBlue2,
|
||||
textMuted: $darkGrey1,
|
||||
backgroundColor: $darkDarkBlue2,
|
||||
badgeDangerBackground: $darkDanger,
|
||||
badgeDangerText: $darkDarkBlue2,
|
||||
badgeInfoBackground: $darkInfo,
|
||||
badgeInfoText: $darkDarkBlue2,
|
||||
badgePrimaryBackground: $darkLinks,
|
||||
badgePrimaryBackgroundHover: $darkPrimary-alt,
|
||||
badgePrimaryText: $darkDarkBlue2,
|
||||
badgeSecondaryBackground: $darkGrey2,
|
||||
badgeSecondaryText: $darkDarkBlue2,
|
||||
bgPrimaryColor: $darkPrimary,
|
||||
bgLightColor: $darkDarkBlue2,
|
||||
borderColor: $darkBlue1,
|
||||
borderPrimaryColor: $darkPrimary,
|
||||
btnDanger: $darkDanger,
|
||||
btnDangerHover: $darkDangerHover,
|
||||
btnDangerText: $darkDarkBlue2,
|
||||
btnLinkText: $white,
|
||||
btnLinkTextHover: $darkGrey1,
|
||||
btnOutlineDangerBackground: $darkDanger,
|
||||
btnOutlineDangerBackgroundHover: $darkDangerHover,
|
||||
btnOutlineDangerBorder: $darkDanger,
|
||||
btnOutlineDangerBorderHover: $darkDangerHover,
|
||||
btnOutlineDangerText: $darkDarkBlue2,
|
||||
btnOutlineDangerTextHover: $darkDarkBlue2,
|
||||
btnOutlinePrimaryBackground: $darkPrimary,
|
||||
btnOutlinePrimaryBackgroundHover: $darkPrimary-alt,
|
||||
btnOutlinePrimaryBorder: $darkPrimary,
|
||||
btnOutlinePrimaryBorderHover: $darkPrimary-alt,
|
||||
btnOutlinePrimaryText: $darkDarkBlue2,
|
||||
btnOutlinePrimaryTextHover: $darkDarkBlue2,
|
||||
btnOutlineSecondaryBackground: transparent,
|
||||
btnOutlineSecondaryBackgroundHover: transparent,
|
||||
btnOutlineSecondaryBorder: $darkGrey1,
|
||||
btnOutlineSecondaryBorderHover: $darkGrey2,
|
||||
btnOutlineSecondaryText: $white,
|
||||
btnOutlineSecondaryTextHover: $darkGrey2,
|
||||
btnPrimary: $darkLinks,
|
||||
btnPrimaryBorderHover: $darkPrimary-alt,
|
||||
btnPrimaryHover: $darkPrimary-alt,
|
||||
btnPrimaryText: $darkDarkBlue2,
|
||||
btnSecondary: transparent,
|
||||
btnSecondaryBorder: $darkGrey1,
|
||||
btnSecondaryBorderHover: $darkGrey2,
|
||||
btnSecondaryHover: transparent,
|
||||
btnSecondaryText: $white,
|
||||
btnSecondaryTextHover: $darkGrey2,
|
||||
calloutBackground: $darkBlue2,
|
||||
calloutColor: $white,
|
||||
cdkDraggingBackground: $darkDarkBlue1,
|
||||
codeColor: #E83E8C,
|
||||
dropdownBackground: $darkDarkBlue1,
|
||||
dropdownDangerHover: $darkDangerHover,
|
||||
dropdownHover: rgba(255, 255, 255, 0.03),
|
||||
dropdownTextColor: $white,
|
||||
dropdownTextMuted: #BEC6CF,
|
||||
focus: rgb(106 153 240 / 25%),
|
||||
footerBackgroundColor: $darkBlue1,
|
||||
foregroundColor: $darkDarkBlue1,
|
||||
headerColor: $darkBlue1,
|
||||
iconColor: #777777,
|
||||
iconHover: $darkGrey2,
|
||||
imgFilter: invert(1) grayscale(1),
|
||||
inputBackgroundColor: transparent,
|
||||
inputBorderColor: $darkGrey1,
|
||||
inputDisabledBackground: $darkBlue2,
|
||||
inputDisabledColor: $darkGrey1,
|
||||
inputPlaceholderColor: $darkInputPlaceholderColor,
|
||||
inputTextColor: $darkInputColor,
|
||||
layoutFrontendColor: $darkDarkBlue2,
|
||||
learnMoreHover: $darkPrimary-alt,
|
||||
linkColor: $darkLinks,
|
||||
linkColorHover: $darkLinks,
|
||||
linkWeight: 600,
|
||||
listItemActive: $darkPrimary,
|
||||
listItemBorder: $darkBlue1,
|
||||
listItemColor: $white,
|
||||
listItemColorHover: $white,
|
||||
loadingSvg: url('../images/loading-white.svg'),
|
||||
navActiveBackground: $darkDarkBlue2,
|
||||
navActiveWeight: 600,
|
||||
navBackground: $darkDarkBlue1,
|
||||
navBackgroundAlt: $darkDarkBlue1,
|
||||
navOrgBackgroundColor: #161C26,
|
||||
navWeight: 400,
|
||||
pwLetter: $white,
|
||||
pwNumber: #52BDFB,
|
||||
pwSpecial: #FF7C70,
|
||||
pwStrengthBackground: $darkBlue2,
|
||||
registerHeadingColor: $white,
|
||||
separator: $darkBlue1,
|
||||
separatorHr: $darkBlue1,
|
||||
tableColorHover: $darkGrey1,
|
||||
tableLinkColor: $white,
|
||||
tableLinkColorHover: $white,
|
||||
tableRowHover: rgba(255, 255, 255, 0.03),
|
||||
tableSeparator: $darkBlue1,
|
||||
browserInputIconsFilter: invert(1),
|
||||
mfaLogoSuffix: '-w.png'
|
||||
),
|
||||
light: (
|
||||
logoSuffix: "dark",
|
||||
primary: $primary,
|
||||
primaryAlt: $primary-accent,
|
||||
danger: $danger,
|
||||
success: $success,
|
||||
warning: $warning,
|
||||
info: #343a40,
|
||||
textColor: $text-color,
|
||||
headingColor: #333333,
|
||||
darkTextColor: #495057,
|
||||
warningTextColor: $white,
|
||||
successTextColor: $white,
|
||||
dangerTextColor: $white,
|
||||
infoTextColor: $white,
|
||||
textMuted: #6c757d,
|
||||
backgroundColor: $body-bg,
|
||||
badgeDangerBackground: $danger,
|
||||
badgeDangerText: $white,
|
||||
badgeInfoBackground: #555555,
|
||||
badgeInfoText: $white,
|
||||
badgePrimaryBackground: $primary,
|
||||
badgePrimaryBackgroundHover: #134eb9,
|
||||
badgePrimaryText: $white,
|
||||
badgeSecondaryBackground: #ced4da,
|
||||
badgeSecondaryText: #212529,
|
||||
bgPrimaryColor: $primary,
|
||||
bgLightColor: #f8f9fa,
|
||||
borderColor: $border-color,
|
||||
borderPrimaryColor: $primary,
|
||||
btnDanger: $danger,
|
||||
btnDangerHover: $lightDangerHover,
|
||||
btnDangerText: $white,
|
||||
btnLinkTextColor: $primary,
|
||||
btnLinkTextColorHover: #104097,
|
||||
btnOutlineDangerBackground: $input-bg,
|
||||
btnOutlineDangerBackgroundHover: $danger,
|
||||
btnOutlineDangerBorder: #ced4da,
|
||||
btnOutlineDangerBorderHover: $danger,
|
||||
btnOutlineDangerText: $danger,
|
||||
btnOutlineDangerTextHover: $white,
|
||||
btnOutlinePrimaryBackground: $input-bg,
|
||||
btnOutlinePrimaryBackgroundHover: $primary,
|
||||
btnOutlinePrimaryBorder: #ced4da,
|
||||
btnOutlinePrimaryBorderHover: $primary,
|
||||
btnOutlinePrimaryText: $primary,
|
||||
btnOutlinePrimaryTextHover: $white,
|
||||
btnOutlineSecondaryBackground: $input-bg,
|
||||
btnOutlineSecondaryBackgroundHover: #ced4da,
|
||||
btnOutlineSecondaryBorder: #ced4da,
|
||||
btnOutlineSecondaryBorderHover: #ced4da,
|
||||
btnOutlineSecondaryText: #6c757d,
|
||||
btnOutlineSecondaryTextHover: #333333,
|
||||
btnPrimary: $primary,
|
||||
btnPrimaryBorderHover: #1249ae,
|
||||
btnPrimaryHover: #134eb9,
|
||||
btnPrimaryText: $white,
|
||||
btnSecondary: $secondary,
|
||||
btnSecondaryBorder: $secondary,
|
||||
btnSecondaryBorderHover: #b1bbc4,
|
||||
btnSecondaryHover: #b8c1ca,
|
||||
btnSecondaryText: #212529,
|
||||
btnSecondaryTextHover: #212529,
|
||||
calloutBackground: #fafafa,
|
||||
calloutColor: #212529,
|
||||
cdkDraggingBackground: $white,
|
||||
codeColor: #e83e8c,
|
||||
dropdownBackground: $white,
|
||||
dropdownDangerHover: #c43421,
|
||||
dropdownHover: rgba(0, 0, 0, 0.06),
|
||||
dropdownTextColor: $text-color,
|
||||
dropdownTextMuted: #6c757d,
|
||||
focus: rgb(23 93 220 / 25%),
|
||||
footerBackgroundColor: #fbfbfb,
|
||||
foregroundColor: $white,
|
||||
headerColor: rgba(0, 0, 0, 0.03),
|
||||
iconColor: #777777,
|
||||
iconHover: $body-color,
|
||||
imgFilter: invert(0) grayscale(0),
|
||||
inputBackgroundColor: #fbfbfb,
|
||||
inputBorderColor: $border-color,
|
||||
inputDisabledBackground: #e0e0e0,
|
||||
inputDisabledColor: #6c757d,
|
||||
inputPlaceholderColor: $lightInputPlaceholderColor,
|
||||
inputTextColor: $lightInputColor,
|
||||
layoutFrontendColor: #ecf0f5,
|
||||
learnMoreHover: #104097,
|
||||
linkColor: $primary,
|
||||
linkColorHover: #104097,
|
||||
linkWeight: 400,
|
||||
listItemActive: $text-color,
|
||||
listItemBorder: rgba(0, 0, 0, 0.125),
|
||||
listItemColor: $primary,
|
||||
listItemColorHover: #104097,
|
||||
loadingSvg: url("../images/loading.svg"),
|
||||
navActiveBackground: $white,
|
||||
navActiveWeight: 600,
|
||||
navBackground: $primary,
|
||||
navBackgroundAlt: $secondary-alt,
|
||||
navOrgBackgroundColor: #fbfbfb,
|
||||
navWeight: 600,
|
||||
pwLetter: $text-color,
|
||||
pwNumber: #007fde,
|
||||
pwSpecial: #c40800,
|
||||
pwStrengthBackground: #e9ecef,
|
||||
registerHeadingColor: $white,
|
||||
separator: $secondary,
|
||||
separatorHr: rgb(0, 0, 0, 0.1),
|
||||
tableColorHover: #333333,
|
||||
tableLinkColor: $primary,
|
||||
tableLinkColorHover: #104097,
|
||||
tableRowHover: rgba(0, 0, 0, 0.03),
|
||||
tableSeparator: #dee2e6,
|
||||
browserInputIconsFilter: invert(0),
|
||||
mfaLogoSuffix: ".png",
|
||||
),
|
||||
dark: (
|
||||
logoSuffix: "white",
|
||||
primary: $darkPrimary,
|
||||
primaryAlt: $darkPrimary-alt,
|
||||
danger: $darkDanger,
|
||||
success: $darkSuccess,
|
||||
warning: $darkWarning,
|
||||
info: $darkInfo,
|
||||
textColor: $darkGrey1,
|
||||
headingColor: $white,
|
||||
darkTextColor: $darkDarkBlue2,
|
||||
warningTextColor: $darkDarkBlue2,
|
||||
successTextColor: $darkDarkBlue2,
|
||||
dangerTextColor: $darkDarkBlue2,
|
||||
infoTextColor: $darkDarkBlue2,
|
||||
textMuted: $darkGrey1,
|
||||
backgroundColor: $darkDarkBlue2,
|
||||
badgeDangerBackground: $darkDanger,
|
||||
badgeDangerText: $darkDarkBlue2,
|
||||
badgeInfoBackground: $darkInfo,
|
||||
badgeInfoText: $darkDarkBlue2,
|
||||
badgePrimaryBackground: $darkLinks,
|
||||
badgePrimaryBackgroundHover: $darkPrimary-alt,
|
||||
badgePrimaryText: $darkDarkBlue2,
|
||||
badgeSecondaryBackground: $darkGrey2,
|
||||
badgeSecondaryText: $darkDarkBlue2,
|
||||
bgPrimaryColor: $darkPrimary,
|
||||
bgLightColor: $darkDarkBlue2,
|
||||
borderColor: $darkBlue1,
|
||||
borderPrimaryColor: $darkPrimary,
|
||||
btnDanger: $darkDanger,
|
||||
btnDangerHover: $darkDangerHover,
|
||||
btnDangerText: $darkDarkBlue2,
|
||||
btnLinkText: $white,
|
||||
btnLinkTextHover: $darkGrey1,
|
||||
btnOutlineDangerBackground: $darkDanger,
|
||||
btnOutlineDangerBackgroundHover: $darkDangerHover,
|
||||
btnOutlineDangerBorder: $darkDanger,
|
||||
btnOutlineDangerBorderHover: $darkDangerHover,
|
||||
btnOutlineDangerText: $darkDarkBlue2,
|
||||
btnOutlineDangerTextHover: $darkDarkBlue2,
|
||||
btnOutlinePrimaryBackground: $darkPrimary,
|
||||
btnOutlinePrimaryBackgroundHover: $darkPrimary-alt,
|
||||
btnOutlinePrimaryBorder: $darkPrimary,
|
||||
btnOutlinePrimaryBorderHover: $darkPrimary-alt,
|
||||
btnOutlinePrimaryText: $darkDarkBlue2,
|
||||
btnOutlinePrimaryTextHover: $darkDarkBlue2,
|
||||
btnOutlineSecondaryBackground: transparent,
|
||||
btnOutlineSecondaryBackgroundHover: transparent,
|
||||
btnOutlineSecondaryBorder: $darkGrey1,
|
||||
btnOutlineSecondaryBorderHover: $darkGrey2,
|
||||
btnOutlineSecondaryText: $white,
|
||||
btnOutlineSecondaryTextHover: $darkGrey2,
|
||||
btnPrimary: $darkLinks,
|
||||
btnPrimaryBorderHover: $darkPrimary-alt,
|
||||
btnPrimaryHover: $darkPrimary-alt,
|
||||
btnPrimaryText: $darkDarkBlue2,
|
||||
btnSecondary: transparent,
|
||||
btnSecondaryBorder: $darkGrey1,
|
||||
btnSecondaryBorderHover: $darkGrey2,
|
||||
btnSecondaryHover: transparent,
|
||||
btnSecondaryText: $white,
|
||||
btnSecondaryTextHover: $darkGrey2,
|
||||
calloutBackground: $darkBlue2,
|
||||
calloutColor: $white,
|
||||
cdkDraggingBackground: $darkDarkBlue1,
|
||||
codeColor: #e83e8c,
|
||||
dropdownBackground: $darkDarkBlue1,
|
||||
dropdownDangerHover: $darkDangerHover,
|
||||
dropdownHover: rgba(255, 255, 255, 0.03),
|
||||
dropdownTextColor: $white,
|
||||
dropdownTextMuted: #bec6cf,
|
||||
focus: rgb(106 153 240 / 25%),
|
||||
footerBackgroundColor: $darkBlue1,
|
||||
foregroundColor: $darkDarkBlue1,
|
||||
headerColor: $darkBlue1,
|
||||
iconColor: #777777,
|
||||
iconHover: $darkGrey2,
|
||||
imgFilter: invert(1) grayscale(1),
|
||||
inputBackgroundColor: transparent,
|
||||
inputBorderColor: $darkGrey1,
|
||||
inputDisabledBackground: $darkBlue2,
|
||||
inputDisabledColor: $darkGrey1,
|
||||
inputPlaceholderColor: $darkInputPlaceholderColor,
|
||||
inputTextColor: $darkInputColor,
|
||||
layoutFrontendColor: $darkDarkBlue2,
|
||||
learnMoreHover: $darkPrimary-alt,
|
||||
linkColor: $darkLinks,
|
||||
linkColorHover: $darkLinks,
|
||||
linkWeight: 600,
|
||||
listItemActive: $darkPrimary,
|
||||
listItemBorder: $darkBlue1,
|
||||
listItemColor: $white,
|
||||
listItemColorHover: $white,
|
||||
loadingSvg: url("../images/loading-white.svg"),
|
||||
navActiveBackground: $darkDarkBlue2,
|
||||
navActiveWeight: 600,
|
||||
navBackground: $darkDarkBlue1,
|
||||
navBackgroundAlt: $darkDarkBlue1,
|
||||
navOrgBackgroundColor: #161c26,
|
||||
navWeight: 400,
|
||||
pwLetter: $white,
|
||||
pwNumber: #52bdfb,
|
||||
pwSpecial: #ff7c70,
|
||||
pwStrengthBackground: $darkBlue2,
|
||||
registerHeadingColor: $white,
|
||||
separator: $darkBlue1,
|
||||
separatorHr: $darkBlue1,
|
||||
tableColorHover: $darkGrey1,
|
||||
tableLinkColor: $white,
|
||||
tableLinkColorHover: $white,
|
||||
tableRowHover: rgba(255, 255, 255, 0.03),
|
||||
tableSeparator: $darkBlue1,
|
||||
browserInputIconsFilter: invert(1),
|
||||
mfaLogoSuffix: "-w.png",
|
||||
),
|
||||
);
|
||||
|
||||
@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);
|
||||
} ;
|
||||
|
||||
Reference in New Issue
Block a user