Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Better close button positioning in alerts, some cleanup

This commit is contained in:
Kris 2019-04-05 16:21:16 -04:00
parent a6f283da30
commit a1c2181232
3 changed files with 11 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/stylesheets/common/base/alert.scss
View File

@ -1,25 +1,19 @@
.alert { .alert {
padding: 8px 35px 8px 14px; padding: 8px 32px 8px 16px;
background-color: $danger-low; background-color: $danger-low;
color: #c09853; color: $primary;
position: relative;
.close { .close {
position: relative; position: absolute;
top: -2px; top: 8px;
right: -21px; right: 8px;
line-height: $line-height-small; line-height: $line-height-small;
float: right;
font-size: $font-up-3; font-size: $font-up-3;
font-weight: bold; color: $primary-low-mid;
color: $primary;
opacity: 0.2;
filter: alpha(opacity = 20);
@include hover { @include hover {
color: $primary; color: $primary-medium;
text-decoration: none;
cursor: pointer; cursor: pointer;
opacity: 0.4;
filter: alpha(opacity = 40);
} }
} }
button.close { button.close {
@ -30,11 +24,11 @@
-webkit-appearance: none; -webkit-appearance: none;
} }
&.alert-success { &.alert-success {
background-color: $success-medium; background-color: $success-low;
color: $primary; color: $primary;
} }
&.alert-error { &.alert-error {
background-color: rgba($danger-low, 0.5); background-color: $danger-low;
color: $primary; color: $primary;
} }
&.alert-info { &.alert-info {

3
app/assets/stylesheets/common/components/banner.scss
View File

@ -14,9 +14,8 @@
} }
.close { .close {
font-size: $font-up-4;
margin-top: -5px; margin-top: -5px;
color: dark-light-choose($primary-low-mid, $secondary-medium); color: $primary-low-mid;
padding-left: 5px; padding-left: 5px;
float: right; float: right;
} }

8
app/assets/stylesheets/mobile/modal.scss
View File

@ -102,14 +102,6 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.alert {
padding: 5px;
&.alert-success {
background-color: $success-low;
color: $success;
}
}
.change-timestamp-footer .btn-primary { .change-timestamp-footer .btn-primary {
float: right; float: right;
margin-right: 5px; margin-right: 5px;