settings: Move save-discard widget css to app_components.css.

We move the css to app_components.css from settings.css because
we are going to add save-discard widget in stream settings as
well and thus we can reuse the CSS there.
This commit is contained in:
Sahil Batra 2022-09-29 23:07:26 +05:30 committed by Tim Abbott
parent 515446039c
commit fe179412ce
2 changed files with 92 additions and 90 deletions

View File

@ -36,6 +36,11 @@ kbd {
.show-sm {
display: block !important;
}
#settings_page .save-button-controls {
display: block;
margin: 10px 0 0;
}
}
@media (width < $lg_min) {
@ -730,3 +735,90 @@ div.overlay {
white-space: nowrap;
}
}
#settings_page {
.save-discard-widget-button {
border-radius: 5px;
border: 1px solid hsl(0, 0%, 80%);
padding: 3px 14px 4px 11px;
text-decoration: none;
color: hsl(0, 0%, 47%);
min-width: 80px;
/* Limit the height of the button */
line-height: 1.2;
vertical-align: text-bottom;
&:hover,
&:focus {
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 61%);
color: hsl(0, 0%, 18%);
.save-discard-widget-button-icon {
color: hsl(0, 0%, 47%);
}
}
&.primary {
background-color: hsl(156, 30%, 50%);
color: hsl(0, 0%, 100%);
border: 1px solid hsl(155, 30%, 50%);
&:hover,
&:focus {
background-color: hsl(166, 35%, 57%);
border: 1px solid hsl(166, 35%, 57%);
}
.save-discard-widget-button-icon {
font-weight: lighter;
color: hsl(0, 0%, 100%);
}
&.saving {
background-color: hsl(156, 14%, 40%);
border-color: hsl(156, 14%, 40%);
}
}
.save-discard-widget-button-icon {
vertical-align: middle;
margin-right: 3px;
font-size: 15px;
font-weight: 500;
}
.save-discard-widget-button-text {
vertical-align: middle;
line-height: 1;
}
}
.save-button-controls {
display: inline;
margin-left: 15px;
&.hide {
display: none;
}
}
.save-button {
margin-right: 5px;
.save-discard-widget-button-loading {
display: none;
}
&.saving {
.save-discard-widget-button-icon {
display: none;
}
.save-discard-widget-button-loading {
display: inline-block;
margin-right: 2px;
}
}
}
}

View File

@ -1136,91 +1136,6 @@ $option_title_width: 180px;
overflow: hidden;
border-radius: 4px;
.save-discard-widget-button {
border-radius: 5px;
border: 1px solid hsl(0, 0%, 80%);
padding: 3px 14px 4px 11px;
text-decoration: none;
color: hsl(0, 0%, 47%);
min-width: 80px;
/* Limit the height of the button */
line-height: 1.2;
vertical-align: text-bottom;
&:hover,
&:focus {
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 61%);
color: hsl(0, 0%, 18%);
.save-discard-widget-button-icon {
color: hsl(0, 0%, 47%);
}
}
&.primary {
background-color: hsl(156, 30%, 50%);
color: hsl(0, 0%, 100%);
border: 1px solid hsl(155, 30%, 50%);
&:hover,
&:focus {
background-color: hsl(166, 35%, 57%);
border: 1px solid hsl(166, 35%, 57%);
}
.save-discard-widget-button-icon {
font-weight: lighter;
color: hsl(0, 0%, 100%);
}
&.saving {
background-color: hsl(156, 14%, 40%);
border-color: hsl(156, 14%, 40%);
}
}
.save-discard-widget-button-icon {
vertical-align: middle;
margin-right: 3px;
font-size: 15px;
font-weight: 500;
}
.save-discard-widget-button-text {
vertical-align: middle;
line-height: 1;
}
}
.save-button-controls {
display: inline;
margin-left: 15px;
&.hide {
display: none;
}
}
.save-button {
margin-right: 5px;
.save-discard-widget-button-loading {
display: none;
}
&.saving {
.save-discard-widget-button-icon {
display: none;
}
.save-discard-widget-button-loading {
display: inline-block;
margin-right: 2px;
}
}
}
.admin-realm-time-limit-input {
width: 5ch;
text-align: right;
@ -1835,11 +1750,6 @@ $option_title_width: 180px;
margin: auto;
float: none;
}
#settings_page .save-button-controls {
display: block;
margin: 10px 0 0;
}
}
@media (width < $ml_min) {