mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-10 07:32:36 +01:00
styles refactoring as per 1.x theme update
This commit is contained in:
nixa
parent
6c8e632164
commit
06d0dc1c99
23 changed files with 590 additions and 705 deletions
|
|
@ -40,14 +40,16 @@
|
|||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: $default-text;
|
||||
@include placeholderStyle($default-text, 0.7);
|
||||
border: 1px solid $input-border;
|
||||
border-radius: 5px;
|
||||
background-color: $input-background;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $primary-bg;
|
||||
background: #ffffff;
|
||||
background: $input-background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,10 +61,6 @@ textarea.form-control {
|
|||
height: 96px;
|
||||
}
|
||||
|
||||
.modal-form-btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
.form-group {
|
||||
input {
|
||||
|
|
@ -84,17 +82,6 @@ textarea.form-control {
|
|||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
color: $default-text;
|
||||
.modal-header {
|
||||
color: $default;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setSwitchBorder($color) {
|
||||
.bootstrap-switch.bootstrap-switch-on {
|
||||
border-color: $color;
|
||||
|
|
@ -103,9 +90,6 @@ textarea.form-control {
|
|||
|
||||
.switch-container {
|
||||
display: inline-block;
|
||||
& {
|
||||
@include setSwitchBorder($default);
|
||||
}
|
||||
&.primary {
|
||||
@include setSwitchBorder($primary);
|
||||
}
|
||||
|
|
@ -131,12 +115,12 @@ textarea.form-control {
|
|||
outline: none;
|
||||
}
|
||||
&.bootstrap-switch-off {
|
||||
border-color: $input-border;
|
||||
border-color: $border;
|
||||
}
|
||||
&.bootstrap-switch-focused {
|
||||
box-shadow: none;
|
||||
&.bootstrap-switch-off {
|
||||
border-color: $input-border;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
.bootstrap-switch-container {
|
||||
|
|
@ -239,10 +223,10 @@ label.custom-checkbox {
|
|||
font-family: fontAwesome;
|
||||
font-weight: $font-light;
|
||||
font-size: 12px;
|
||||
color: $default;
|
||||
color: $default-text;
|
||||
content: "\a0";
|
||||
background-color: transparent;
|
||||
border: 1px solid $default;
|
||||
border: 1px solid $border;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
|
@ -333,7 +317,7 @@ label.custom-input-danger {
|
|||
|
||||
@mixin validationState($color, $focusColor) {
|
||||
.control-label {
|
||||
color: $color;
|
||||
color: $default-text;
|
||||
}
|
||||
.form-control {
|
||||
border: 1px solid $color;
|
||||
|
|
@ -361,46 +345,25 @@ label.custom-input-danger {
|
|||
}
|
||||
.input-group-addon {
|
||||
background-color: $color;
|
||||
color: #ffffff;
|
||||
color: $label-text;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.has-success {
|
||||
@include validationState($success-bg, $success);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
@include validationState($warning-bg, $warning);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-error {
|
||||
@include validationState($danger-bg, $danger);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
.form-control {
|
||||
padding-right: 42.5px;
|
||||
}
|
||||
label ~ .form-control-feedback {
|
||||
top: 21px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.has-feedback label ~ .form-control-feedback {
|
||||
top: 21px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.bootstrap-select {
|
||||
|
|
@ -412,10 +375,10 @@ label.custom-input-danger {
|
|||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
background: transparent;
|
||||
background-color: $input-background;
|
||||
color: $disabled;
|
||||
border-color: $disabled-bg;
|
||||
@include placeholderStyle($disabled, 1);
|
||||
@include placeholderStyle($default-text, 0.5);
|
||||
}
|
||||
|
||||
.form-control-rounded {
|
||||
|
|
@ -435,7 +398,7 @@ label.custom-input-danger {
|
|||
|
||||
@mixin groupAddon($color) {
|
||||
background: $color;
|
||||
color: #ffffff;
|
||||
color: $label-text;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
|
|
@ -463,68 +426,55 @@ label.custom-input-danger {
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.bootstrap-select {
|
||||
.btn-default {
|
||||
.bootstrap-select.btn-group {
|
||||
button.btn.btn-default {
|
||||
background: transparent;
|
||||
color: $default;
|
||||
&:focus {
|
||||
background: #ffffff;
|
||||
color: $default-text;
|
||||
&:hover {
|
||||
background: $default;
|
||||
box-shadow: none;
|
||||
outline: 0 !important;
|
||||
}
|
||||
&:active {
|
||||
border-color: $default;
|
||||
background: $default;
|
||||
box-shadow: none;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
.btn-default.dropdown-toggle {
|
||||
> .btn.btn-default.dropdown-toggle {
|
||||
background: $default;
|
||||
box-shadow: none;
|
||||
background-color: #ffffff;
|
||||
border-color: $default;
|
||||
color: $default;
|
||||
border-color: $border;
|
||||
}
|
||||
.dropdown-menu {
|
||||
border-left: 1px solid $default;
|
||||
border-right: 1px solid $default;
|
||||
border-bottom-color: $default;
|
||||
border-radius: 0 0 5px 5px;
|
||||
> .btn{
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
> .btn.dropdown-toggle {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-menu.open {
|
||||
border: 1px solid $border-light;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
&.with-search.open {
|
||||
.btn-default.btn {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: 1px solid $default;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
}
|
||||
&.with-search.open .btn-default + .dropdown-menu {
|
||||
.bs-searchbox .form-control {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
background-color: $default;
|
||||
border: 1px solid $input-border;
|
||||
}
|
||||
.no-results {
|
||||
color: $default-text;
|
||||
color: $dropdown-text;
|
||||
}
|
||||
}
|
||||
.notify {
|
||||
color: $default-text;
|
||||
color: $dropdown-text;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
background-color: transparent;
|
||||
color: $default-text;
|
||||
background-color: $input-background;
|
||||
border: 1px solid $input-border;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: #555555;
|
||||
max-width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
|
|
@ -543,12 +493,20 @@ label.custom-input-danger {
|
|||
}
|
||||
}
|
||||
input {
|
||||
background-color: $input-background;
|
||||
border: 1px solid $input-border;
|
||||
border-radius: 5px;
|
||||
@include placeholderStyle($default-text, 0.8);
|
||||
line-height: 22px;
|
||||
font-size: 11px;
|
||||
min-width: 53px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: $progress-background;
|
||||
}
|
||||
|
||||
.progress-bar-primary {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
|
@ -579,6 +537,19 @@ label.custom-input-danger {
|
|||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.sub-little-text {
|
||||
.with-primary-addon:focus{
|
||||
border-color: $primary;
|
||||
}
|
||||
.with-warning-addon:focus{
|
||||
border-color: $warning;
|
||||
}
|
||||
.with-success-addon:focus{
|
||||
border-color: $success;
|
||||
}
|
||||
.with-danger-addon:focus{
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.sub-little-text{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue