IMPROVEMENT: .hover and .disabled classes
This commit is contained in:
Tony Air
parent
cd00647c4d
commit
cf5c0d119e
|
|
@ -14794,75 +14794,140 @@ img {
|
|||
}
|
||||
|
||||
.a:hover,
|
||||
.a.hover,
|
||||
.a:focus,
|
||||
a:hover,
|
||||
a.hover,
|
||||
a:focus,
|
||||
[data-toggle]:hover,
|
||||
[data-toggle].hover,
|
||||
[data-toggle]:focus,
|
||||
button:hover,
|
||||
button.hover,
|
||||
button:focus,
|
||||
.btn:hover,
|
||||
.btn.hover,
|
||||
.btn:focus {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.a:hover > .fa,
|
||||
.a:hover > .far,
|
||||
.a:hover > .fas,
|
||||
.a:hover > .fab,
|
||||
.a:hover.fa,
|
||||
.a:hover.far,
|
||||
.a:hover.fas,
|
||||
.a:hover.fab,
|
||||
.a.hover > .fa,
|
||||
.a.hover > .far,
|
||||
.a.hover > .fas,
|
||||
.a.hover > .fab,
|
||||
.a.hover.fa,
|
||||
.a.hover.far,
|
||||
.a.hover.fas,
|
||||
.a.hover.fab,
|
||||
.a:focus > .fa,
|
||||
.a:focus > .far,
|
||||
.a:focus > .fas,
|
||||
.a:focus > .fab,
|
||||
.a:focus.fa,
|
||||
.a:focus.far,
|
||||
.a:focus.fas,
|
||||
.a:focus.fab,
|
||||
a:hover > .fa,
|
||||
a:hover > .far,
|
||||
a:hover > .fas,
|
||||
a:hover > .fab,
|
||||
a:hover.fa,
|
||||
a:hover.far,
|
||||
a:hover.fas,
|
||||
a:hover.fab,
|
||||
a.hover > .fa,
|
||||
a.hover > .far,
|
||||
a.hover > .fas,
|
||||
a.hover > .fab,
|
||||
a.hover.fa,
|
||||
a.hover.far,
|
||||
a.hover.fas,
|
||||
a.hover.fab,
|
||||
a:focus > .fa,
|
||||
a:focus > .far,
|
||||
a:focus > .fas,
|
||||
a:focus > .fab,
|
||||
a:focus.fa,
|
||||
a:focus.far,
|
||||
a:focus.fas,
|
||||
a:focus.fab,
|
||||
[data-toggle]:hover > .fa,
|
||||
[data-toggle]:hover > .far,
|
||||
[data-toggle]:hover > .fas,
|
||||
[data-toggle]:hover > .fab,
|
||||
[data-toggle]:hover.fa,
|
||||
[data-toggle]:hover.far,
|
||||
[data-toggle]:hover.fas,
|
||||
[data-toggle]:hover.fab,
|
||||
[data-toggle].hover > .fa,
|
||||
[data-toggle].hover > .far,
|
||||
[data-toggle].hover > .fas,
|
||||
[data-toggle].hover > .fab,
|
||||
[data-toggle].hover.fa,
|
||||
[data-toggle].hover.far,
|
||||
[data-toggle].hover.fas,
|
||||
[data-toggle].hover.fab,
|
||||
[data-toggle]:focus > .fa,
|
||||
[data-toggle]:focus > .far,
|
||||
[data-toggle]:focus > .fas,
|
||||
[data-toggle]:focus > .fab,
|
||||
[data-toggle]:focus.fa,
|
||||
[data-toggle]:focus.far,
|
||||
[data-toggle]:focus.fas,
|
||||
[data-toggle]:focus.fab,
|
||||
button:hover > .fa,
|
||||
button:hover > .far,
|
||||
button:hover > .fas,
|
||||
button:hover > .fab,
|
||||
button:hover.fa,
|
||||
button:hover.far,
|
||||
button:hover.fas,
|
||||
button:hover.fab,
|
||||
button.hover > .fa,
|
||||
button.hover > .far,
|
||||
button.hover > .fas,
|
||||
button.hover > .fab,
|
||||
button.hover.fa,
|
||||
button.hover.far,
|
||||
button.hover.fas,
|
||||
button.hover.fab,
|
||||
button:focus > .fa,
|
||||
button:focus > .far,
|
||||
button:focus > .fas,
|
||||
button:focus > .fab,
|
||||
button:focus.fa,
|
||||
button:focus.far,
|
||||
button:focus.fas,
|
||||
button:focus.fab,
|
||||
.btn:hover > .fa,
|
||||
.btn:hover > .far,
|
||||
.btn:hover > .fas,
|
||||
.btn:hover > .fab,
|
||||
.btn:hover.fa,
|
||||
.btn:hover.far,
|
||||
.btn:hover.fas,
|
||||
.btn:hover.fab,
|
||||
.btn.hover > .fa,
|
||||
.btn.hover > .far,
|
||||
.btn.hover > .fas,
|
||||
.btn.hover > .fab,
|
||||
.btn.hover.fa,
|
||||
.btn.hover.far,
|
||||
.btn.hover.fas,
|
||||
.btn.hover.fab,
|
||||
.btn:focus > .fa,
|
||||
.btn:focus > .far,
|
||||
.btn:focus > .fas,
|
||||
.btn:focus > .fab,
|
||||
.btn:focus.fa,
|
||||
.btn:focus.far,
|
||||
.btn:focus.fas,
|
||||
.btn:focus.fab {
|
||||
|
|
@ -14870,13 +14935,41 @@ button:focus.fab,
|
|||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
[data-toggle="table"]:hover,
|
||||
[data-toggle="table"]:focus {
|
||||
.a.disabled,
|
||||
a.disabled,
|
||||
[data-toggle].disabled,
|
||||
button.disabled,
|
||||
.btn.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.a.disabled:hover,
|
||||
.a.disabled.hover,
|
||||
.a.disabled:focus,
|
||||
a.disabled:hover,
|
||||
a.disabled.hover,
|
||||
a.disabled:focus,
|
||||
[data-toggle].disabled:hover,
|
||||
[data-toggle].disabled.hover,
|
||||
[data-toggle].disabled:focus,
|
||||
button.disabled:hover,
|
||||
button.disabled.hover,
|
||||
button.disabled:focus,
|
||||
.btn.disabled:hover,
|
||||
.btn.disabled.hover,
|
||||
.btn.disabled:focus {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
[data-toggle='table']:hover,
|
||||
[data-toggle='table'].hover,
|
||||
[data-toggle='table']:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-toggle="collapse"][aria-expanded="true"] .accordion-icon:before {
|
||||
content: "\f068";
|
||||
[data-toggle='collapse'][aria-expanded='true'] .accordion-icon:before {
|
||||
content: '\f068';
|
||||
}
|
||||
|
||||
.transition,
|
||||
|
|
@ -14907,7 +15000,7 @@ textarea,
|
|||
.container-xxl,
|
||||
.container-xxxl,
|
||||
.row,
|
||||
[class="col-*"] {
|
||||
[class='col-*'] {
|
||||
-webkit-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
|
@ -14930,8 +15023,8 @@ textarea,
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: .5rem;
|
||||
content: "*";
|
||||
right: 0.5rem;
|
||||
content: '*';
|
||||
color: #f44336;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -14950,13 +15043,13 @@ textarea,
|
|||
color: #f44336;
|
||||
}
|
||||
|
||||
.field .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
|
||||
.field .bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: block;
|
||||
margin: .5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.col-block {
|
||||
|
|
@ -14964,11 +15057,12 @@ textarea,
|
|||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn.hover,
|
||||
.btn:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] {
|
||||
.navbar-toggler[aria-expanded='true'] {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
@ -14983,7 +15077,7 @@ textarea,
|
|||
/*
|
||||
.dropdown.show {
|
||||
.dropdown {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
|
|
@ -14997,7 +15091,7 @@ textarea,
|
|||
}
|
||||
|
||||
.dropdown-hover ul li {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
> .dropdown-toggle::after {
|
||||
transform: rotate(-90deg);
|
||||
|
|
@ -15022,7 +15116,7 @@ textarea,
|
|||
}
|
||||
|
||||
.dropdown-hover ul ul li {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
> ul {
|
||||
display: block;
|
||||
|
|
@ -15043,7 +15137,7 @@ textarea,
|
|||
}
|
||||
|
||||
.dropdown-hover ul ul ul li {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
ul {
|
||||
display: block;
|
||||
|
|
@ -15144,8 +15238,8 @@ textarea,
|
|||
background: none;
|
||||
}
|
||||
|
||||
.row > [class^="col-"] > .card,
|
||||
.row-xs > [class^="col-"] > .card {
|
||||
.row > [class^='col-'] > .card,
|
||||
.row-xs > [class^='col-'] > .card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -15154,7 +15248,7 @@ textarea,
|
|||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.row-xs [class^="col-"] {
|
||||
.row-xs [class^='col-'] {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +1,18 @@
|
|||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
@import "../_animations";
|
||||
@import '../_animations';
|
||||
|
||||
.pulse {
|
||||
animation: pulse 0.8s linear infinite;
|
||||
}
|
||||
|
||||
// don't let images be wider than the parent layer
|
||||
div, a, span, button, i {
|
||||
div,
|
||||
a,
|
||||
span,
|
||||
button,
|
||||
i {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
@ -28,33 +32,47 @@ a,
|
|||
button,
|
||||
.btn {
|
||||
&:hover,
|
||||
&.hover,
|
||||
&:focus {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
|
||||
> .fa,
|
||||
> .far,
|
||||
> .fas,
|
||||
> .fab,
|
||||
&.fa,
|
||||
&.far,
|
||||
&.fas,
|
||||
&.fab {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover,
|
||||
&.hover,
|
||||
&:focus {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// exclude bootstrap-table
|
||||
[data-toggle="table"] {
|
||||
[data-toggle='table'] {
|
||||
&:hover,
|
||||
&.hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-toggle="collapse"] {
|
||||
&[aria-expanded="true"] {
|
||||
[data-toggle='collapse'] {
|
||||
&[aria-expanded='true'] {
|
||||
.accordion-icon {
|
||||
&:before {
|
||||
content: "\f068";
|
||||
content: '\f068';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,17 +80,24 @@ button,
|
|||
|
||||
// transactions
|
||||
.transition,
|
||||
a, a *,
|
||||
.a, .a *,
|
||||
button, input, optgroup, select, textarea,
|
||||
a,
|
||||
a *,
|
||||
.a,
|
||||
.a *,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea,
|
||||
.btn,
|
||||
.alert,
|
||||
.dropdown,
|
||||
[data-toggle], [data-toggle] *,
|
||||
[data-toggle],
|
||||
[data-toggle] *,
|
||||
.container,
|
||||
.container-fluid,
|
||||
.row,
|
||||
[class="col-*"] {
|
||||
[class='col-*'] {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
|
|
@ -94,8 +119,8 @@ button, input, optgroup, select, textarea,
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: .5rem;
|
||||
content: "*";
|
||||
right: 0.5rem;
|
||||
content: '*';
|
||||
color: $red;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -103,7 +128,9 @@ button, input, optgroup, select, textarea,
|
|||
|
||||
&.holder-error,
|
||||
&.error {
|
||||
input, select, textarea {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +139,7 @@ button, input, optgroup, select, textarea,
|
|||
}
|
||||
}
|
||||
|
||||
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
|
||||
.bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -123,7 +150,7 @@ button, input, optgroup, select, textarea,
|
|||
@extend .alert-info;
|
||||
|
||||
display: block;
|
||||
margin: .5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.message.validation,
|
||||
|
|
@ -142,6 +169,7 @@ button, input, optgroup, select, textarea,
|
|||
// rewrite btn opacity on hover
|
||||
.btn {
|
||||
&:hover,
|
||||
&.hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -163,7 +191,7 @@ button, input, optgroup, select, textarea,
|
|||
|
||||
// dropdown icon
|
||||
.navbar-toggler {
|
||||
&[aria-expanded="true"] {
|
||||
&[aria-expanded='true'] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -178,7 +206,7 @@ button, input, optgroup, select, textarea,
|
|||
/*
|
||||
.dropdown.show {
|
||||
.dropdown {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
|
|
@ -192,7 +220,7 @@ button, input, optgroup, select, textarea,
|
|||
}
|
||||
|
||||
.dropdown-hover ul li {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
> .dropdown-toggle::after {
|
||||
transform: rotate(-90deg);
|
||||
|
|
@ -217,7 +245,7 @@ button, input, optgroup, select, textarea,
|
|||
}
|
||||
|
||||
.dropdown-hover ul ul li {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
> ul {
|
||||
display: block;
|
||||
|
|
@ -238,7 +266,7 @@ button, input, optgroup, select, textarea,
|
|||
}
|
||||
|
||||
.dropdown-hover ul ul ul li {
|
||||
&:hover,
|
||||
&:hover,&.hover,
|
||||
&:focus {
|
||||
ul {
|
||||
display: block;
|
||||
|
|
@ -286,7 +314,6 @@ button, input, optgroup, select, textarea,
|
|||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
}
|
||||
|
|
@ -305,7 +332,6 @@ button, input, optgroup, select, textarea,
|
|||
background: $navbar-dark-hover-background;
|
||||
}
|
||||
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background: $navbar-dark-active-background;
|
||||
|
|
@ -317,8 +343,9 @@ button, input, optgroup, select, textarea,
|
|||
}
|
||||
}
|
||||
|
||||
.row, .row-xs {
|
||||
> [class^="col-"] > .card {
|
||||
.row,
|
||||
.row-xs {
|
||||
> [class^='col-'] > .card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -327,7 +354,7 @@ button, input, optgroup, select, textarea,
|
|||
margin-right: -($grid-gutter-xs-width / 2);
|
||||
margin-left: -($grid-gutter-xs-width / 2);
|
||||
|
||||
[class^="col-"] {
|
||||
[class^='col-'] {
|
||||
padding-left: $grid-gutter-xs-width / 2;
|
||||
padding-right: $grid-gutter-xs-width / 2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue