mirror of
https://github.com/status-im/consul.git
synced 2025-01-19 18:19:53 +00:00
5ab7e48862
This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
63 lines
1.5 KiB
SCSS
63 lines
1.5 KiB
SCSS
%modal-dialog.warning header {
|
|
background-color: rgb(var(--tone-yellow-050));
|
|
border-color: rgb(var(--tone-yellow-500));
|
|
color: rgb(var(--tone-yellow-800));
|
|
}
|
|
%modal-dialog.warning header > *:not(label) {
|
|
font-size: var(--typo-size-500);
|
|
font-weight: var(--typo-weight-semibold);
|
|
}
|
|
%modal-dialog.warning header::before {
|
|
@extend %with-alert-triangle-mask, %as-pseudo;
|
|
color: rgb(var(--tone-yellow-500));
|
|
float: left;
|
|
margin-top: 2px;
|
|
margin-right: 3px;
|
|
}
|
|
%modal-dialog-overlay {
|
|
background-color: rgb(var(--tone-gray-000) / 90%);
|
|
}
|
|
%modal-window {
|
|
box-shadow: var(--decor-elevation-800);
|
|
}
|
|
%modal-window {
|
|
/*%frame-gray-000*/
|
|
background-color: rgb(var(--tone-gray-000));
|
|
}
|
|
%modal-window > footer,
|
|
%modal-window > header {
|
|
@extend %frame-gray-800;
|
|
}
|
|
%modal-window > header > * {
|
|
@extend %h200;
|
|
}
|
|
|
|
.modal-dialog-body,
|
|
%modal-window > footer,
|
|
%modal-window > header {
|
|
border-color: rgb(var(--tone-gray-300));
|
|
}
|
|
.modal-dialog-body {
|
|
border-style: solid;
|
|
border-left-width: 1px;
|
|
border-right-width: 1px;
|
|
}
|
|
%modal-window > footer,
|
|
%modal-window > header {
|
|
border-width: 1px;
|
|
}
|
|
|
|
%modal-window > header button {
|
|
cursor: pointer;
|
|
border: var(--decor-border-100);
|
|
/*%frame-gray-050??*/
|
|
background-color: rgb(var(--tone-gray-050));
|
|
border-color: rgb(var(--tone-gray-300));
|
|
border-radius: var(--decor-radius-100);
|
|
}
|
|
%modal-window > header button::before {
|
|
@extend %with-cancel-plain-icon, %as-pseudo;
|
|
margin-left: -7px;
|
|
margin-top: -3px;
|
|
}
|