mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 08:43:33 +00:00
implement callout component w/ generator policy (#395)
This commit is contained in:
@@ -290,3 +290,84 @@ app-root > #loading {
|
||||
.draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.callout {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #000000;
|
||||
border-left-width: 5px;
|
||||
border-radius: 3px;
|
||||
@include themify($themes) {
|
||||
border-color: themed('calloutBorderColor');
|
||||
background-color: themed('calloutBackgroundColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3.callout-heading {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.callout-primary {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('primaryColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('infoColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('infoColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-danger {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('dangerColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('dangerColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-success {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('successColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('successColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-warning {
|
||||
@include themify($themes) {
|
||||
border-left-color: themed('warningColor');
|
||||
}
|
||||
|
||||
.callout-heading {
|
||||
@include themify($themes) {
|
||||
color: themed('warningColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,6 +86,8 @@ $themes: (
|
||||
logoSuffix: 'dark',
|
||||
passwordNumberColor: #007fde,
|
||||
passwordSpecialColor: #c40800,
|
||||
calloutBorderColor: $border-color-dark,
|
||||
calloutBackgroundColor: $background-color,
|
||||
),
|
||||
dark: (
|
||||
textColor: #ffffff,
|
||||
@@ -134,6 +136,8 @@ $themes: (
|
||||
logoSuffix: 'white',
|
||||
passwordNumberColor: #52bdfb,
|
||||
passwordSpecialColor: #ff7c70,
|
||||
calloutBorderColor: #2f2f2f,
|
||||
calloutBackgroundColor: #363636,
|
||||
),
|
||||
nord: (
|
||||
textColor: $nord5,
|
||||
@@ -182,6 +186,8 @@ $themes: (
|
||||
logoSuffix: 'white',
|
||||
passwordNumberColor: $nord8,
|
||||
passwordSpecialColor: $nord12,
|
||||
calloutBorderColor: $nord1,
|
||||
calloutBackgroundColor: $nord2,
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user