mirror of
https://github.com/bitwarden/browser
synced 2025-12-21 18:53:29 +00:00
[CL-434] Swap extension to use tailwind preflight (#17054)
Co-authored-by: Vicki League <vleague@bitwarden.com>
This commit is contained in:
Oscar Hinton
GitHub
@@ -2,7 +2,7 @@
|
|||||||
<button
|
<button
|
||||||
*ngIf="currentAccount$ | async as currentAccount; else defaultButton"
|
*ngIf="currentAccount$ | async as currentAccount; else defaultButton"
|
||||||
type="button"
|
type="button"
|
||||||
class="tw-rounded-full hover:tw-outline hover:tw-outline-1 hover:tw-outline-offset-1 hover:tw-outline-primary-600"
|
class="tw-rounded-full hover:tw-outline hover:tw-outline-1 hover:tw-outline-primary-600"
|
||||||
(click)="currentAccountClicked()"
|
(click)="currentAccountClicked()"
|
||||||
>
|
>
|
||||||
<span class="tw-sr-only"> {{ "bitwardenAccount" | i18n }} {{ currentAccount.email }}</span>
|
<span class="tw-sr-only"> {{ "bitwardenAccount" | i18n }} {{ currentAccount.email }}</span>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export type NavButton = {
|
|||||||
templateUrl: "popup-tab-navigation.component.html",
|
templateUrl: "popup-tab-navigation.component.html",
|
||||||
imports: [CommonModule, LinkModule, RouterModule, JslibModule, IconModule],
|
imports: [CommonModule, LinkModule, RouterModule, JslibModule, IconModule],
|
||||||
host: {
|
host: {
|
||||||
class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col",
|
class: "tw-block tw-size-full tw-flex tw-flex-col",
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export class PopupTabNavigationComponent {
|
export class PopupTabNavigationComponent {
|
||||||
|
|||||||
@@ -13,8 +13,11 @@
|
|||||||
</bit-callout>
|
</bit-callout>
|
||||||
</div>
|
</div>
|
||||||
} @else {
|
} @else {
|
||||||
<div [@routerTransition]="getRouteElevation(outlet)">
|
<!-- eslint-disable-next-line -->
|
||||||
|
<div class="tw-h-screen tw-w-screen">
|
||||||
|
<div [@routerTransition]="getRouteElevation(outlet)" class="tw-size-full">
|
||||||
<router-outlet #outlet="outlet"></router-outlet>
|
<router-outlet #outlet="outlet"></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
<bit-toast-container></bit-toast-container>
|
<bit-toast-container></bit-toast-container>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,453 +0,0 @@
|
|||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 600px;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&.body-sm {
|
|
||||||
min-height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.body-xs {
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.body-xxs {
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.body-3xs {
|
|
||||||
min-height: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.body-full {
|
|
||||||
min-height: unset;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
& body {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
font-family: $font-family-sans-serif;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
line-height: $line-height-base;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
width: 380px;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
min-height: inherit;
|
|
||||||
overflow: hidden;
|
|
||||||
color: $text-color;
|
|
||||||
background-color: $background-color;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor");
|
|
||||||
background-color: themed("backgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: $font-family-sans-serif;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not(popup-page a, popup-tab-navigation a) {
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("primaryColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: darken(themed("primaryColor"), 6%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not(bit-form-field input, bit-search input, input[bitcheckbox]),
|
|
||||||
select:not(bit-form-field select),
|
|
||||||
textarea:not(bit-form-field textarea) {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor");
|
|
||||||
background-color: themed("inputBackgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not(input[bitcheckbox]),
|
|
||||||
select,
|
|
||||||
textarea,
|
|
||||||
button:not(bit-chip-select button) {
|
|
||||||
font-size: $font-size-base;
|
|
||||||
font-family: $font-family-sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type*="date"] {
|
|
||||||
@include themify($themes) {
|
|
||||||
color-scheme: themed("dateInputColorScheme");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-calendar-picker-indicator {
|
|
||||||
@include themify($themes) {
|
|
||||||
filter: themed("webkitCalendarPickerFilter");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-calendar-picker-indicator:hover {
|
|
||||||
@include themify($themes) {
|
|
||||||
filter: themed("webkitCalendarPickerHoverFilter");
|
|
||||||
}
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
app-root > div {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
main::-webkit-scrollbar,
|
|
||||||
cdk-virtual-scroll-viewport::-webkit-scrollbar,
|
|
||||||
.vault-select::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main::-webkit-scrollbar-track,
|
|
||||||
.vault-select::-webkit-scrollbar-track {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main::-webkit-scrollbar-thumb,
|
|
||||||
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb,
|
|
||||||
.vault-select::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-right: 1px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("scrollbarColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("scrollbarHoverColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header:not(bit-callout header, bit-dialog header, popup-page header) {
|
|
||||||
height: 44px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&:not(.no-theme) {
|
|
||||||
border-bottom: 1px solid #000000;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headerColor");
|
|
||||||
background-color: themed("headerBackgroundColor");
|
|
||||||
border-bottom-color: themed("headerBorderColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content {
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content > .right,
|
|
||||||
.header-content > .right > .right {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
min-width: -webkit-min-content; /* Workaround to Chrome bug */
|
|
||||||
.header-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
app-avatar {
|
|
||||||
max-height: 30px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-center {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
app-pop-out > button,
|
|
||||||
div > button:not(app-current-account button):not(.home-acc-switcher-btn),
|
|
||||||
div > a {
|
|
||||||
border: none;
|
|
||||||
padding: 0 10px;
|
|
||||||
text-decoration: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
white-space: pre;
|
|
||||||
|
|
||||||
&:not(.home-acc-switcher-btn):hover,
|
|
||||||
&:not(.home-acc-switcher-btn):focus {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("headerBackgroundHoverColor");
|
|
||||||
color: themed("headerColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
opacity: 0.65;
|
|
||||||
cursor: default !important;
|
|
||||||
background-color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
i + span {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
app-pop-out {
|
|
||||||
display: flex;
|
|
||||||
padding-right: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: bold;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
padding: 7px 10px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.bwi {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 20px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headerInputPlaceholderColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not(bit-form-field input) {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
padding: 5px 10px 5px 30px;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("headerInputBackgroundColor");
|
|
||||||
color: themed("headerInputColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&::selection {
|
|
||||||
@include themify($themes) {
|
|
||||||
// explicitly set text selection to invert foreground/background
|
|
||||||
background-color: themed("headerInputColor");
|
|
||||||
color: themed("headerInputBackgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("headerInputBackgroundFocusColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-input-placeholder {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headerInputPlaceholderColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/** make the cancel button visible in both dark/light themes **/
|
|
||||||
&[type="search"]::-webkit-search-cancel-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
height: 15px;
|
|
||||||
width: 15px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
mask-image: url("../images/close-button-white.svg");
|
|
||||||
-webkit-mask-image: url("../images/close-button-white.svg");
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("headerInputColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.left + .search,
|
|
||||||
.left + .sr-only + .search {
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
.bwi {
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search + .right {
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 15px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
app-root {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main:not(popup-page main):not(auth-anon-layout main) {
|
|
||||||
position: absolute;
|
|
||||||
top: 44px;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&.no-header {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.flex {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
height: calc(100% - 44px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-content,
|
|
||||||
.no-items,
|
|
||||||
.full-loading-spinner {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-items,
|
|
||||||
.full-loading-spinner {
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
.no-items-image {
|
|
||||||
@include themify($themes) {
|
|
||||||
content: url("../images/search-desktop" + themed("svgSuffix"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("disabledIconColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// cdk-virtual-scroll
|
|
||||||
.cdk-virtual-scroll-viewport {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cdk-virtual-scroll-content-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@@ -1,620 +0,0 @@
|
|||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&.first {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-header {
|
|
||||||
margin: 0 10px 5px 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headingColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-content {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColor");
|
|
||||||
border-color: themed("borderColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-padded {
|
|
||||||
padding: 10px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.condensed .box-content-row,
|
|
||||||
.box-content-row.condensed {
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.no-hover .box-content-row,
|
|
||||||
.box-content-row.no-hover {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("boxBackgroundColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.single-line .box-content-row,
|
|
||||||
.box-content-row.single-line {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.row-top-padding {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-footer {
|
|
||||||
margin: 0 5px 5px 5px;
|
|
||||||
padding: 0 10px 5px 10px;
|
|
||||||
font-size: $font-size-small;
|
|
||||||
|
|
||||||
button.btn {
|
|
||||||
font-size: $font-size-small;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.btn.primary {
|
|
||||||
font-size: $font-size-base;
|
|
||||||
padding: 7px 15px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include themify($themes) {
|
|
||||||
border-color: themed("borderHoverColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.list {
|
|
||||||
margin: 10px 0 20px 0;
|
|
||||||
.box-content {
|
|
||||||
.virtual-scroll-item {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-content-row {
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
// background-color: $background-color;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor");
|
|
||||||
background-color: themed("boxBackgroundColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&.padded {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.no-hover {
|
|
||||||
&:hover {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("boxBackgroundColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&.active {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("listItemBackgroundHoverColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-left: 5px solid #000000;
|
|
||||||
padding-left: 5px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
border-left-color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
.row-btn {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text:not(.no-ellipsis),
|
|
||||||
.detail {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-main {
|
|
||||||
display: flex;
|
|
||||||
min-width: 0;
|
|
||||||
align-items: normal;
|
|
||||||
|
|
||||||
.row-main-content {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.single-line {
|
|
||||||
.box-content-row {
|
|
||||||
display: flex;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin: 5px;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-content-row {
|
|
||||||
display: block;
|
|
||||||
padding: 5px 10px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
margin: 3px 5px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("boxBackgroundColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
&:before {
|
|
||||||
border: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.override-last:last-child:before {
|
|
||||||
border-bottom: 1px solid #000000;
|
|
||||||
@include themify($themes) {
|
|
||||||
border-bottom-color: themed("boxBorderColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.last:last-child:before {
|
|
||||||
border-bottom: 1px solid #000000;
|
|
||||||
@include themify($themes) {
|
|
||||||
border-bottom-color: themed("boxBorderColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&.active {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("boxBackgroundHoverColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pre {
|
|
||||||
white-space: pre;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pre-wrap {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-label,
|
|
||||||
label {
|
|
||||||
font-size: $font-size-small;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-label {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-label {
|
|
||||||
font-size: $font-size-small;
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
> a {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text,
|
|
||||||
.detail {
|
|
||||||
display: block;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail {
|
|
||||||
font-size: $font-size-small;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-right,
|
|
||||||
.txt-right {
|
|
||||||
float: right;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-main {
|
|
||||||
flex-grow: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-flex,
|
|
||||||
.box-content-row-flex,
|
|
||||||
&.box-content-row-checkbox,
|
|
||||||
&.box-content-row-link,
|
|
||||||
&.box-content-row-input,
|
|
||||||
&.box-content-row-slider,
|
|
||||||
&.box-content-row-multi {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
&.box-content-row-word-break {
|
|
||||||
word-break: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-multi {
|
|
||||||
input:not([type="checkbox"]) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input + label.sr-only + select {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> a,
|
|
||||||
> button {
|
|
||||||
padding: 8px 8px 8px 4px;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("dangerColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-multi,
|
|
||||||
&.box-content-row-newmulti {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-newmulti {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("primaryColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-checkbox,
|
|
||||||
&.box-content-row-link,
|
|
||||||
&.box-content-row-input,
|
|
||||||
&.box-content-row-slider {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin: 5px;
|
|
||||||
|
|
||||||
label,
|
|
||||||
.row-label {
|
|
||||||
font-size: $font-size-base;
|
|
||||||
display: block;
|
|
||||||
width: initial;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> span {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> input {
|
|
||||||
margin: 0 0 0 auto;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin-right: 15px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-checkbox-left {
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
> input {
|
|
||||||
margin: 0 15px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-input {
|
|
||||||
label {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
&[type="number"] {
|
|
||||||
max-width: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-content-row-slider {
|
|
||||||
input[type="range"] {
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"] {
|
|
||||||
width: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]),
|
|
||||||
textarea {
|
|
||||||
border: none;
|
|
||||||
width: 100%;
|
|
||||||
background-color: transparent !important;
|
|
||||||
|
|
||||||
&::-webkit-input-placeholder {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("inputPlaceholderColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not([type="file"]):focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #000000;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
padding: 7px 4px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
border-color: themed("inputBorderColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 5px;
|
|
||||||
|
|
||||||
&.action-buttons-fixed {
|
|
||||||
align-self: start;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-btn {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 10px 8px;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("boxRowButtonColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("boxRowButtonHoverColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled,
|
|
||||||
&[disabled] {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("disabledIconColor");
|
|
||||||
opacity: themed("disabledBoxOpacity");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("disabledIconColor");
|
|
||||||
opacity: themed("disabledBoxOpacity");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
cursor: default !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.no-pad .row-btn {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.box-draggable-row) {
|
|
||||||
.action-buttons .row-btn:last-child {
|
|
||||||
margin-right: -3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.box-draggable-row {
|
|
||||||
&.box-content-row-checkbox {
|
|
||||||
input[type="checkbox"] + .drag-handle {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drag-handle {
|
|
||||||
cursor: move;
|
|
||||||
padding: 10px 2px 10px 8px;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cdk-drag-preview {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0.8;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("boxBackgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select.field-type {
|
|
||||||
margin: 5px 0 0 25px;
|
|
||||||
width: calc(100% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 34px;
|
|
||||||
margin-left: -5px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&.icon-small {
|
|
||||||
min-width: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
max-height: 20px;
|
|
||||||
max-width: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
display: flex;
|
|
||||||
height: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 5px -15px -10px;
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: $brand-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-group {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin: 0 0 0 5px;
|
|
||||||
flex-grow: 1;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.align-start {
|
|
||||||
align-items: start;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin-top: -4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.truncate {
|
|
||||||
display: inline-block;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
.box {
|
|
||||||
.box-content {
|
|
||||||
.box-content-row {
|
|
||||||
&.no-hover {
|
|
||||||
&:hover {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("transparentColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
padding: 7px 15px;
|
|
||||||
border: 1px solid #000000;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("buttonBackgroundColor");
|
|
||||||
border-color: themed("buttonBorderColor");
|
|
||||||
color: themed("buttonColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&.primary {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("buttonPrimaryColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("buttonDangerColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.callout-half {
|
|
||||||
font-weight: bold;
|
|
||||||
max-width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not([disabled]) {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: darken(themed("buttonBackgroundColor"), 1.5%);
|
|
||||||
border-color: darken(themed("buttonBorderColor"), 17%);
|
|
||||||
color: darken(themed("buttonColor"), 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.primary {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: darken(themed("buttonPrimaryColor"), 6%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: darken(themed("buttonDangerColor"), 6%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:not([disabled]) {
|
|
||||||
cursor: pointer;
|
|
||||||
outline: 0;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: darken(themed("buttonBackgroundColor"), 6%);
|
|
||||||
border-color: darken(themed("buttonBorderColor"), 25%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
opacity: 0.65;
|
|
||||||
cursor: default !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.block {
|
|
||||||
display: block;
|
|
||||||
width: calc(100% - 10px);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.link,
|
|
||||||
&.neutral {
|
|
||||||
border: none !important;
|
|
||||||
background: none !important;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
.btn {
|
|
||||||
&:focus {
|
|
||||||
outline: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button.box-content-row {
|
|
||||||
display: block;
|
|
||||||
width: calc(100% - 10px);
|
|
||||||
text-align: left;
|
|
||||||
border-color: none;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("boxBackgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-buttons {
|
|
||||||
.btn.block {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
html.browser_safari {
|
|
||||||
&.safari_height_fix {
|
|
||||||
body {
|
|
||||||
height: 360px !important;
|
|
||||||
|
|
||||||
&.body-xs {
|
|
||||||
height: 300px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.body-full {
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
.search .bwi {
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left + .search .bwi {
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
&.login-page {
|
|
||||||
padding-top: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
app-root {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.theme_light app-root {
|
|
||||||
border-color: #777777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
margin: 0 -15px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
|
||||||
flex-basis: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
@@ -1,348 +0,0 @@
|
|||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
small,
|
|
||||||
.small {
|
|
||||||
font-size: $font-size-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-primary {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("primaryColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-success {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("successColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-danger {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("dangerColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-info {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("infoColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-warning {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("warningColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-primary {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("primaryColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-success {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("successColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-muted {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-default {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-danger {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("dangerColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-info {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("infoColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-warning {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("warningColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-weight-semibold {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.lead {
|
|
||||||
font-size: $font-size-large;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-right {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-bottom {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-margin {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-block {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monospaced {
|
|
||||||
font-family: $font-family-monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-whitespace {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-responsive {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-rounded {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-index-top {
|
|
||||||
position: relative;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sr-only {
|
|
||||||
position: absolute !important;
|
|
||||||
width: 1px !important;
|
|
||||||
height: 1px !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: -1px !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
clip: rect(0, 0, 0, 0) !important;
|
|
||||||
border: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(:focus) > .exists-only-on-parent-focus {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-wrapper {
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-number {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("passwordNumberColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-special {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("passwordSpecialColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-character {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 30px;
|
|
||||||
height: 36px;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
&:nth-child(odd) {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-count {
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 8px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("passwordCountText") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#duo-frame {
|
|
||||||
background: url("../images/loading.svg") 0 0 no-repeat;
|
|
||||||
width: 100%;
|
|
||||||
height: 470px;
|
|
||||||
margin-bottom: -10px;
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#web-authn-frame {
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
border: none;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.linux-webauthn {
|
|
||||||
width: 485px !important;
|
|
||||||
#web-authn-frame {
|
|
||||||
iframe {
|
|
||||||
width: 375px;
|
|
||||||
margin: 0 55px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
app-root > #loading {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
color: $text-muted;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
app-vault-icon,
|
|
||||||
.app-vault-icon {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-image {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 142px;
|
|
||||||
height: 21px;
|
|
||||||
background-size: 142px 21px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
@include themify($themes) {
|
|
||||||
background-image: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
|
|
||||||
}
|
|
||||||
@media (min-width: 219px) {
|
|
||||||
width: 189px;
|
|
||||||
height: 28px;
|
|
||||||
background-size: 189px 28px;
|
|
||||||
}
|
|
||||||
@media (min-width: 314px) {
|
|
||||||
width: 284px;
|
|
||||||
height: 43px;
|
|
||||||
background-size: 284px 43px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="password"]::-ms-reveal {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&.flex-grow {
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text selection styles
|
|
||||||
// Set explicit selection styles (assumes primary accent color has sufficient
|
|
||||||
// contrast against the background, so its inversion is also still readable)
|
|
||||||
// and suppress user selection for most elements (to make it more app-like)
|
|
||||||
|
|
||||||
:not(bit-form-field input)::selection {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("backgroundColor");
|
|
||||||
background-color: themed("primaryAccentColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
label,
|
|
||||||
a,
|
|
||||||
button,
|
|
||||||
p,
|
|
||||||
img,
|
|
||||||
.box-header,
|
|
||||||
.box-footer,
|
|
||||||
.callout,
|
|
||||||
.row-label,
|
|
||||||
.modal-title,
|
|
||||||
.overlay-container {
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&.user-select {
|
|
||||||
user-select: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tweak for inconsistent line heights in cipher view */
|
|
||||||
.box-footer button,
|
|
||||||
.box-footer a {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Workaround for slow performance on external monitors on Chrome + MacOS
|
|
||||||
// See: https://bugs.chromium.org/p/chromium/issues/detail?id=971701#c64
|
|
||||||
@keyframes redraw {
|
|
||||||
0% {
|
|
||||||
opacity: 0.99;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
html.force_redraw {
|
|
||||||
animation: redraw 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* override for vault icon in browser (pre extension refresh) */
|
|
||||||
app-vault-icon:not(app-vault-list-items-container app-vault-icon) > div {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
float: left;
|
|
||||||
height: 36px;
|
|
||||||
width: 34px;
|
|
||||||
margin-left: -5px;
|
|
||||||
}
|
|
||||||
@@ -1,144 +0,0 @@
|
|||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
app-home {
|
|
||||||
position: fixed;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.center-content {
|
|
||||||
margin-top: -50px;
|
|
||||||
height: calc(100% + 50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 284px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.lead {
|
|
||||||
margin: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn + .btn {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.settings-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("mutedColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:hover):not(:focus) {
|
|
||||||
span {
|
|
||||||
clip: rect(0 0 0 0);
|
|
||||||
clip-path: inset(50%);
|
|
||||||
height: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
white-space: nowrap;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("primaryColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.body-sm,
|
|
||||||
body.body-xs {
|
|
||||||
app-home {
|
|
||||||
.center-content {
|
|
||||||
margin-top: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.lead {
|
|
||||||
margin: 15px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.body-full {
|
|
||||||
app-home {
|
|
||||||
.center-content {
|
|
||||||
margin-top: -80px;
|
|
||||||
height: calc(100% + 80px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.createAccountLink {
|
|
||||||
padding: 30px 10px 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.remember-email-check {
|
|
||||||
padding-top: 18px;
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-buttons > button {
|
|
||||||
margin: 15px 0 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.useBrowserlink {
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: $font-size-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fido2-browser-selector-dropdown {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("boxBackgroundColor");
|
|
||||||
}
|
|
||||||
padding: 8px;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow:
|
|
||||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
|
||||||
0 3px 1px -2px rgba(0, 0, 0, 0.12),
|
|
||||||
0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fido2-browser-selector-dropdown-item {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor") !important;
|
|
||||||
}
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
padding: 0px 15px 0px 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("listItemBackgroundHoverColor") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Temporary fix for avatar, will not be required once we migrate to tailwind preflight **/
|
|
||||||
bit-avatar svg {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
@each $mfaType in $mfaTypes {
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mfaType7 {
|
|
||||||
@include themify($themes) {
|
|
||||||
content: url("../images/two-factor/7" + themed("mfaLogoSuffix"));
|
|
||||||
max-width: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,13 +1,50 @@
|
|||||||
@import "../../../../../libs/angular/src/scss/bwicons/styles/style.scss";
|
@import "../../../../../libs/angular/src/scss/bwicons/styles/style.scss";
|
||||||
@import "variables.scss";
|
@import "variables.scss";
|
||||||
@import "../../../../../libs/angular/src/scss/icons.scss";
|
@import "../../../../../libs/angular/src/scss/icons.scss";
|
||||||
@import "base.scss";
|
|
||||||
@import "grid.scss";
|
|
||||||
@import "box.scss";
|
|
||||||
@import "buttons.scss";
|
|
||||||
@import "misc.scss";
|
|
||||||
@import "environment.scss";
|
|
||||||
@import "pages.scss";
|
|
||||||
@import "plugins.scss";
|
|
||||||
@import "@angular/cdk/overlay-prebuilt.css";
|
@import "@angular/cdk/overlay-prebuilt.css";
|
||||||
@import "../../../../../libs/components/src/multi-select/scss/bw.theme";
|
@import "../../../../../libs/components/src/multi-select/scss/bw.theme";
|
||||||
|
|
||||||
|
.cdk-virtual-scroll-content-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// MFA Types for logo styling with no dark theme alternative
|
||||||
|
$mfaTypes: 0, 2, 3, 4, 6;
|
||||||
|
|
||||||
|
@each $mfaType in $mfaTypes {
|
||||||
|
.mfaType#{$mfaType} {
|
||||||
|
content: url("../images/two-factor/" + $mfaType + ".png");
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mfaType0 {
|
||||||
|
content: url("../images/two-factor/0.png");
|
||||||
|
max-width: 100px;
|
||||||
|
max-height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mfaType1 {
|
||||||
|
max-width: 100px;
|
||||||
|
max-height: 45px;
|
||||||
|
|
||||||
|
&:is(.theme_light *) {
|
||||||
|
content: url("../images/two-factor/1.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is(.theme_dark *) {
|
||||||
|
content: url("../images/two-factor/1-w.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mfaType7 {
|
||||||
|
max-width: 100px;
|
||||||
|
|
||||||
|
&:is(.theme_light *) {
|
||||||
|
content: url("../images/two-factor/7.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is(.theme_dark *) {
|
||||||
|
content: url("../images/two-factor/7-w.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,104 @@
|
|||||||
@import "../../../../../libs/components/src/tw-theme.css";
|
@import "../../../../../libs/components/src/tw-theme-preflight.css";
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html {
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 600px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&.body-sm {
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.body-xs {
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.body-xxs {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.body-3xs {
|
||||||
|
min-height: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.body-full {
|
||||||
|
min-height: unset;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
& body {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html.browser_safari {
|
||||||
|
&.safari_height_fix {
|
||||||
|
body {
|
||||||
|
height: 360px !important;
|
||||||
|
|
||||||
|
&.body-xs {
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.body-full {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
app-root {
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.theme_light app-root {
|
||||||
|
border-color: #777777;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 380px;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
min-height: inherit;
|
||||||
|
overflow: hidden;
|
||||||
|
@apply tw-bg-background-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Workaround for slow performance on external monitors on Chrome + MacOS
|
||||||
|
* See: https://bugs.chromium.org/p/chromium/issues/detail?id=971701#c64
|
||||||
|
*/
|
||||||
|
@keyframes redraw {
|
||||||
|
0% {
|
||||||
|
opacity: 0.99;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html.force_redraw {
|
||||||
|
animation: redraw 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Text selection style:
|
||||||
|
* suppress user selection for most elements (to make it more app-like)
|
||||||
|
*/
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
label,
|
||||||
|
a,
|
||||||
|
button,
|
||||||
|
p,
|
||||||
|
img {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
/** Safari Support */
|
/** Safari Support */
|
||||||
@@ -19,4 +119,59 @@
|
|||||||
html:not(.browser_safari) .tw-styled-scrollbar {
|
html:not(.browser_safari) .tw-styled-scrollbar {
|
||||||
scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
|
scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#duo-frame {
|
||||||
|
background: url("../images/loading.svg") 0 0 no-repeat;
|
||||||
|
width: 100%;
|
||||||
|
height: 470px;
|
||||||
|
margin-bottom: -10px;
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#web-authn-frame {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.linux-webauthn {
|
||||||
|
width: 485px !important;
|
||||||
|
#web-authn-frame {
|
||||||
|
iframe {
|
||||||
|
width: 375px;
|
||||||
|
margin: 0 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
app-root > #loading {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@apply tw-text-muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Text selection style:
|
||||||
|
* Set explicit selection styles (assumes primary accent color has sufficient
|
||||||
|
* contrast against the background, so its inversion is also still readable)
|
||||||
|
*/
|
||||||
|
:not(bit-form-field input)::selection {
|
||||||
|
@apply tw-text-contrast;
|
||||||
|
@apply tw-bg-primary-700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,178 +1,42 @@
|
|||||||
$dark-icon-themes: "theme_dark";
|
/**
|
||||||
|
* DEPRECATED: DO NOT MODIFY OR USE!
|
||||||
|
*/
|
||||||
|
|
||||||
|
$dark-icon-themes: "theme_dark";
|
||||||
|
|
||||||
$font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
$font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
$font-size-base: 16px;
|
|
||||||
$font-size-large: 18px;
|
|
||||||
$font-size-xlarge: 22px;
|
|
||||||
$font-size-xxlarge: 28px;
|
|
||||||
$font-size-small: 12px;
|
|
||||||
$text-color: #000000;
|
$text-color: #000000;
|
||||||
$border-color: #f0f0f0;
|
|
||||||
$border-color-dark: #ddd;
|
$border-color-dark: #ddd;
|
||||||
$list-item-hover: #fbfbfb;
|
|
||||||
$list-icon-color: #767679;
|
|
||||||
$disabled-box-opacity: 1;
|
|
||||||
$border-radius: 6px;
|
|
||||||
$line-height-base: 1.42857143;
|
|
||||||
$icon-hover-color: lighten($text-color, 50%);
|
|
||||||
|
|
||||||
$mfaTypes: 0, 2, 3, 4, 6;
|
|
||||||
|
|
||||||
$gray: #555;
|
|
||||||
$gray-light: #777;
|
|
||||||
$text-muted: $gray-light;
|
|
||||||
|
|
||||||
$brand-primary: #175ddc;
|
$brand-primary: #175ddc;
|
||||||
$brand-danger: #c83522;
|
|
||||||
$brand-success: #017e45;
|
$brand-success: #017e45;
|
||||||
$brand-info: #555555;
|
|
||||||
$brand-warning: #8b6609;
|
|
||||||
$brand-primary-accent: #1252a3;
|
|
||||||
|
|
||||||
$background-color: #f0f0f0;
|
$background-color: #f0f0f0;
|
||||||
|
|
||||||
$box-background-color: white;
|
|
||||||
$box-background-hover-color: $list-item-hover;
|
|
||||||
$box-border-color: $border-color;
|
|
||||||
$border-color-alt: #c3c5c7;
|
|
||||||
|
|
||||||
$button-border-color: darken($border-color-dark, 12%);
|
|
||||||
$button-background-color: white;
|
|
||||||
$button-color: lighten($text-color, 40%);
|
|
||||||
$button-color-primary: darken($brand-primary, 8%);
|
$button-color-primary: darken($brand-primary, 8%);
|
||||||
$button-color-danger: darken($brand-danger, 10%);
|
|
||||||
|
|
||||||
$code-color: #c01176;
|
|
||||||
$code-color-dark: #f08dc7;
|
|
||||||
|
|
||||||
$themes: (
|
$themes: (
|
||||||
light: (
|
light: (
|
||||||
textColor: $text-color,
|
textColor: $text-color,
|
||||||
hoverColorTransparent: rgba($text-color, 0.15),
|
|
||||||
borderColor: $border-color-dark,
|
borderColor: $border-color-dark,
|
||||||
backgroundColor: $background-color,
|
backgroundColor: $background-color,
|
||||||
borderColorAlt: $border-color-alt,
|
|
||||||
backgroundColorAlt: #ffffff,
|
|
||||||
scrollbarColor: rgba(100, 100, 100, 0.2),
|
|
||||||
scrollbarHoverColor: rgba(100, 100, 100, 0.4),
|
|
||||||
boxBackgroundColor: $box-background-color,
|
|
||||||
boxBackgroundHoverColor: $box-background-hover-color,
|
|
||||||
boxBorderColor: $box-border-color,
|
|
||||||
tabBackgroundColor: #ffffff,
|
|
||||||
tabBackgroundHoverColor: $list-item-hover,
|
|
||||||
headerColor: #ffffff,
|
|
||||||
headerBackgroundColor: $brand-primary,
|
|
||||||
headerBackgroundHoverColor: rgba(255, 255, 255, 0.1),
|
|
||||||
headerBorderColor: $brand-primary,
|
|
||||||
headerInputBackgroundColor: darken($brand-primary, 8%),
|
|
||||||
headerInputBackgroundFocusColor: darken($brand-primary, 10%),
|
|
||||||
headerInputColor: #ffffff,
|
|
||||||
headerInputPlaceholderColor: lighten($brand-primary, 35%),
|
|
||||||
listItemBackgroundHoverColor: $list-item-hover,
|
|
||||||
disabledIconColor: $list-icon-color,
|
|
||||||
disabledBoxOpacity: $disabled-box-opacity,
|
|
||||||
headingColor: $gray-light,
|
|
||||||
labelColor: $gray-light,
|
|
||||||
mutedColor: $text-muted,
|
|
||||||
totpStrokeColor: $brand-primary,
|
|
||||||
boxRowButtonColor: $brand-primary,
|
|
||||||
boxRowButtonHoverColor: darken($brand-primary, 10%),
|
|
||||||
inputBorderColor: darken($border-color-dark, 7%),
|
inputBorderColor: darken($border-color-dark, 7%),
|
||||||
inputBackgroundColor: #ffffff,
|
inputBackgroundColor: #ffffff,
|
||||||
inputPlaceholderColor: lighten($gray-light, 35%),
|
|
||||||
buttonBackgroundColor: $button-background-color,
|
|
||||||
buttonBorderColor: $button-border-color,
|
|
||||||
buttonColor: $button-color,
|
|
||||||
buttonPrimaryColor: $button-color-primary,
|
buttonPrimaryColor: $button-color-primary,
|
||||||
buttonDangerColor: $button-color-danger,
|
|
||||||
primaryColor: $brand-primary,
|
primaryColor: $brand-primary,
|
||||||
primaryAccentColor: $brand-primary-accent,
|
|
||||||
dangerColor: $brand-danger,
|
|
||||||
successColor: $brand-success,
|
successColor: $brand-success,
|
||||||
infoColor: $brand-info,
|
|
||||||
warningColor: $brand-warning,
|
|
||||||
logoSuffix: "dark",
|
|
||||||
mfaLogoSuffix: ".png",
|
|
||||||
passwordNumberColor: #007fde,
|
passwordNumberColor: #007fde,
|
||||||
passwordSpecialColor: #c40800,
|
passwordSpecialColor: #c40800,
|
||||||
passwordCountText: #212529,
|
|
||||||
calloutBorderColor: $border-color-dark,
|
|
||||||
calloutBackgroundColor: $box-background-color,
|
|
||||||
toastTextColor: #ffffff,
|
|
||||||
svgSuffix: "-light.svg",
|
|
||||||
transparentColor: rgba(0, 0, 0, 0),
|
|
||||||
dateInputColorScheme: light,
|
|
||||||
// https://stackoverflow.com/a/53336754
|
|
||||||
webkitCalendarPickerFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
|
|
||||||
brightness(85%) contrast(103%),
|
|
||||||
// light has no hover so use same color
|
|
||||||
webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
|
|
||||||
brightness(85%) contrast(103%),
|
|
||||||
codeColor: $code-color,
|
|
||||||
),
|
),
|
||||||
dark: (
|
dark: (
|
||||||
textColor: #ffffff,
|
textColor: #ffffff,
|
||||||
hoverColorTransparent: rgba($text-color, 0.15),
|
|
||||||
borderColor: #161c26,
|
borderColor: #161c26,
|
||||||
backgroundColor: #161c26,
|
backgroundColor: #161c26,
|
||||||
borderColorAlt: #6e788a,
|
|
||||||
backgroundColorAlt: #2f343d,
|
|
||||||
scrollbarColor: #6e788a,
|
|
||||||
scrollbarHoverColor: #8d94a5,
|
|
||||||
boxBackgroundColor: #2f343d,
|
|
||||||
boxBackgroundHoverColor: #3c424e,
|
|
||||||
boxBorderColor: #4c525f,
|
|
||||||
tabBackgroundColor: #2f343d,
|
|
||||||
tabBackgroundHoverColor: #3c424e,
|
|
||||||
headerColor: #ffffff,
|
|
||||||
headerBackgroundColor: #2f343d,
|
|
||||||
headerBackgroundHoverColor: #3c424e,
|
|
||||||
headerBorderColor: #161c26,
|
|
||||||
headerInputBackgroundColor: #3c424e,
|
|
||||||
headerInputBackgroundFocusColor: #4c525f,
|
|
||||||
headerInputColor: #ffffff,
|
|
||||||
headerInputPlaceholderColor: #bac0ce,
|
|
||||||
listItemBackgroundHoverColor: #3c424e,
|
|
||||||
disabledIconColor: #bac0ce,
|
|
||||||
disabledBoxOpacity: 0.5,
|
|
||||||
headingColor: #bac0ce,
|
|
||||||
labelColor: #bac0ce,
|
|
||||||
mutedColor: #bac0ce,
|
|
||||||
totpStrokeColor: #4c525f,
|
|
||||||
boxRowButtonColor: #bac0ce,
|
|
||||||
boxRowButtonHoverColor: #ffffff,
|
|
||||||
inputBorderColor: #4c525f,
|
inputBorderColor: #4c525f,
|
||||||
inputBackgroundColor: #2f343d,
|
inputBackgroundColor: #2f343d,
|
||||||
inputPlaceholderColor: #bac0ce,
|
|
||||||
buttonBackgroundColor: #3c424e,
|
|
||||||
buttonBorderColor: #4c525f,
|
|
||||||
buttonColor: #bac0ce,
|
|
||||||
buttonPrimaryColor: #6f9df1,
|
buttonPrimaryColor: #6f9df1,
|
||||||
buttonDangerColor: #ff8d85,
|
|
||||||
primaryColor: #6f9df1,
|
primaryColor: #6f9df1,
|
||||||
primaryAccentColor: #6f9df1,
|
|
||||||
dangerColor: #ff8d85,
|
|
||||||
successColor: #52e07c,
|
successColor: #52e07c,
|
||||||
infoColor: #a4b0c6,
|
|
||||||
warningColor: #ffeb66,
|
|
||||||
logoSuffix: "white",
|
|
||||||
mfaLogoSuffix: "-w.png",
|
|
||||||
passwordNumberColor: #6f9df1,
|
passwordNumberColor: #6f9df1,
|
||||||
passwordSpecialColor: #ff8d85,
|
passwordSpecialColor: #ff8d85,
|
||||||
passwordCountText: #ffffff,
|
|
||||||
calloutBorderColor: #4c525f,
|
|
||||||
calloutBackgroundColor: #3c424e,
|
|
||||||
toastTextColor: #1f242e,
|
|
||||||
svgSuffix: "-dark.svg",
|
|
||||||
transparentColor: rgba(0, 0, 0, 0),
|
|
||||||
dateInputColorScheme: dark,
|
|
||||||
// https://stackoverflow.com/a/53336754 - must prepend brightness(0) saturate(100%) to dark themed date inputs
|
|
||||||
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(86%) sepia(19%) saturate(152%)
|
|
||||||
hue-rotate(184deg) brightness(87%) contrast(93%),
|
|
||||||
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
|
|
||||||
saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
|
|
||||||
codeColor: $code-color-dark,
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -12,5 +12,6 @@ config.content = [
|
|||||||
"../../libs/vault/src/**/*.{html,ts}",
|
"../../libs/vault/src/**/*.{html,ts}",
|
||||||
"../../libs/pricing/src/**/*.{html,ts}",
|
"../../libs/pricing/src/**/*.{html,ts}",
|
||||||
];
|
];
|
||||||
|
config.corePlugins.preflight = true;
|
||||||
|
|
||||||
module.exports = config;
|
module.exports = config;
|
||||||
|
|||||||
Reference in New Issue
Block a user