Fix themed styles for LeftPaneDialog, add stories
This commit is contained in:
parent
1a2976dae4
commit
15e9bb3d12
3 changed files with 190 additions and 51 deletions
|
@ -186,45 +186,65 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--error {
|
||||
background-color: $error-background-color;
|
||||
color: $error-text-color;
|
||||
|
||||
a {
|
||||
color: $error-text-color;
|
||||
}
|
||||
|
||||
.LeftPaneDialog__action-text {
|
||||
color: $error-text-color;
|
||||
}
|
||||
&__tooltip {
|
||||
--tooltip-background-color: #{$default-background-color};
|
||||
--tooltip-text-color: #{$default-text-color};
|
||||
min-width: 280px;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background-color: $warning-background-color;
|
||||
color: $warning-text-color;
|
||||
&,
|
||||
&__tooltip {
|
||||
&--error {
|
||||
background-color: $error-background-color;
|
||||
color: $error-text-color;
|
||||
|
||||
a {
|
||||
color: $color-black;
|
||||
}
|
||||
@include any-theme {
|
||||
--tooltip-background-color: #{$error-background-color};
|
||||
--tooltip-text-color: #{$error-text-color};
|
||||
}
|
||||
|
||||
.LeftPaneDialog__icon {
|
||||
background-color: $color-black;
|
||||
a {
|
||||
color: $error-text-color;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background-color: WindowText;
|
||||
.LeftPaneDialog__action-text {
|
||||
color: $error-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.LeftPaneDialog__close-button::before {
|
||||
background-color: $color-black;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background-color: WindowText;
|
||||
}
|
||||
}
|
||||
|
||||
.LeftPaneDialog__action-text {
|
||||
&--warning {
|
||||
background-color: $warning-background-color;
|
||||
color: $warning-text-color;
|
||||
|
||||
@include any-theme {
|
||||
--tooltip-background-color: #{$warning-background-color};
|
||||
--tooltip-text-color: #{$warning-text-color};
|
||||
}
|
||||
|
||||
a {
|
||||
color: $warning-text-color;
|
||||
}
|
||||
|
||||
.LeftPaneDialog__icon {
|
||||
background-color: $warning-text-color;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background-color: WindowText;
|
||||
}
|
||||
}
|
||||
|
||||
.LeftPaneDialog__close-button::before {
|
||||
background-color: $warning-text-color;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background-color: WindowText;
|
||||
}
|
||||
}
|
||||
|
||||
.LeftPaneDialog__action-text {
|
||||
color: $warning-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -266,25 +286,4 @@
|
|||
transition: transform 500ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&__tooltip {
|
||||
--tooltip-background-color: #{$default-background-color};
|
||||
--tooltip-text-color: #{$default-text-color};
|
||||
min-width: 280px;
|
||||
text-align: inherit;
|
||||
|
||||
&--error {
|
||||
--tooltip-text-color: #{$error-text-color};
|
||||
--tooltip-background-color: #{$error-background-color};
|
||||
|
||||
a {
|
||||
color: #{$error-text-color};
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
--tooltip-text-color: #{$warning-text-color};
|
||||
--tooltip-background-color: #{$warning-background-color};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue