tonyair
/
webpack-bootstrap-ui-kit
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

IMPROVEMENT: .hover and .disabled classes

This commit is contained in:
Tony Air 2019-12-20 09:14:14 +07:00
parent cd00647c4d
commit cf5c0d119e
3 changed files with 167 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
dist/css/app.css vendored
View File

@ -14794,75 +14794,140 @@ img {
} }
.a:hover, .a:hover,
.a.hover,
.a:focus, .a:focus,
a:hover, a:hover,
a.hover,
a:focus, a:focus,
[data-toggle]:hover, [data-toggle]:hover,
[data-toggle].hover,
[data-toggle]:focus, [data-toggle]:focus,
button:hover, button:hover,
button.hover,
button:focus, button:focus,
.btn:hover, .btn:hover,
.btn.hover,
.btn:focus { .btn:focus {
opacity: .8; opacity: 0.8;
} }
.a:hover > .fa,
.a:hover > .far, .a:hover > .far,
.a:hover > .fas, .a:hover > .fas,
.a:hover > .fab, .a:hover > .fab,
.a:hover.fa,
.a:hover.far, .a:hover.far,
.a:hover.fas, .a:hover.fas,
.a:hover.fab, .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 > .far,
.a:focus > .fas, .a:focus > .fas,
.a:focus > .fab, .a:focus > .fab,
.a:focus.fa,
.a:focus.far, .a:focus.far,
.a:focus.fas, .a:focus.fas,
.a:focus.fab, .a:focus.fab,
a:hover > .fa,
a:hover > .far, a:hover > .far,
a:hover > .fas, a:hover > .fas,
a:hover > .fab, a:hover > .fab,
a:hover.fa,
a:hover.far, a:hover.far,
a:hover.fas, a:hover.fas,
a:hover.fab, 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 > .far,
a:focus > .fas, a:focus > .fas,
a:focus > .fab, a:focus > .fab,
a:focus.fa,
a:focus.far, a:focus.far,
a:focus.fas, a:focus.fas,
a:focus.fab, a:focus.fab,
[data-toggle]:hover > .fa,
[data-toggle]:hover > .far, [data-toggle]:hover > .far,
[data-toggle]:hover > .fas, [data-toggle]:hover > .fas,
[data-toggle]:hover > .fab, [data-toggle]:hover > .fab,
[data-toggle]:hover.fa,
[data-toggle]:hover.far, [data-toggle]:hover.far,
[data-toggle]:hover.fas, [data-toggle]:hover.fas,
[data-toggle]:hover.fab, [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 > .far,
[data-toggle]:focus > .fas, [data-toggle]:focus > .fas,
[data-toggle]:focus > .fab, [data-toggle]:focus > .fab,
[data-toggle]:focus.fa,
[data-toggle]:focus.far, [data-toggle]:focus.far,
[data-toggle]:focus.fas, [data-toggle]:focus.fas,
[data-toggle]:focus.fab, [data-toggle]:focus.fab,
button:hover > .fa,
button:hover > .far, button:hover > .far,
button:hover > .fas, button:hover > .fas,
button:hover > .fab, button:hover > .fab,
button:hover.fa,
button:hover.far, button:hover.far,
button:hover.fas, button:hover.fas,
button:hover.fab, 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 > .far,
button:focus > .fas, button:focus > .fas,
button:focus > .fab, button:focus > .fab,
button:focus.fa,
button:focus.far, button:focus.far,
button:focus.fas, button:focus.fas,
button:focus.fab, button:focus.fab,
.btn:hover > .fa,
.btn:hover > .far, .btn:hover > .far,
.btn:hover > .fas, .btn:hover > .fas,
.btn:hover > .fab, .btn:hover > .fab,
.btn:hover.fa,
.btn:hover.far, .btn:hover.far,
.btn:hover.fas, .btn:hover.fas,
.btn:hover.fab, .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 > .far,
.btn:focus > .fas, .btn:focus > .fas,
.btn:focus > .fab, .btn:focus > .fab,
.btn:focus.fa,
.btn:focus.far, .btn:focus.far,
.btn:focus.fas, .btn:focus.fas,
.btn:focus.fab { .btn:focus.fab {
@ -14870,13 +14935,41 @@ button:focus.fab,
transform: rotate(-180deg); transform: rotate(-180deg);
} }
[data-toggle="table"]:hover, .a.disabled,
[data-toggle="table"]:focus { 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; opacity: 1;
} }
[data-toggle="collapse"][aria-expanded="true"] .accordion-icon:before { [data-toggle='collapse'][aria-expanded='true'] .accordion-icon:before {
content: "\f068"; content: '\f068';
} }
.transition, .transition,
@ -14907,7 +15000,7 @@ textarea,
.container-xxl, .container-xxl,
.container-xxxl, .container-xxxl,
.row, .row,
[class="col-*"] { [class='col-*'] {
-webkit-transition: all 0.4s ease; -webkit-transition: all 0.4s ease;
transition: all 0.4s ease; transition: all 0.4s ease;
} }
@ -14930,8 +15023,8 @@ textarea,
display: block; display: block;
position: absolute; position: absolute;
top: 2rem; top: 2rem;
right: .5rem; right: 0.5rem;
content: "*"; content: '*';
color: #f44336; color: #f44336;
z-index: 2; z-index: 2;
} }
@ -14950,13 +15043,13 @@ textarea,
color: #f44336; 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%; width: 100%;
} }
.message { .message {
display: block; display: block;
margin: .5rem 0; margin: 0.5rem 0;
} }
.col-block { .col-block {
@ -14964,11 +15057,12 @@ textarea,
} }
.btn:hover, .btn:hover,
.btn.hover,
.btn:focus { .btn:focus {
opacity: 1; opacity: 1;
} }
.navbar-toggler[aria-expanded="true"] { .navbar-toggler[aria-expanded='true'] {
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -14983,7 +15077,7 @@ textarea,
/* /*
.dropdown.show { .dropdown.show {
.dropdown { .dropdown {
&:hover, &:hover,&.hover,
&:focus { &:focus {
.dropdown-menu { .dropdown-menu {
display: block; display: block;
@ -14997,7 +15091,7 @@ textarea,
} }
.dropdown-hover ul li { .dropdown-hover ul li {
&:hover, &:hover,&.hover,
&:focus { &:focus {
> .dropdown-toggle::after { > .dropdown-toggle::after {
transform: rotate(-90deg); transform: rotate(-90deg);
@ -15022,7 +15116,7 @@ textarea,
} }
.dropdown-hover ul ul li { .dropdown-hover ul ul li {
&:hover, &:hover,&.hover,
&:focus { &:focus {
> ul { > ul {
display: block; display: block;
@ -15043,7 +15137,7 @@ textarea,
} }
.dropdown-hover ul ul ul li { .dropdown-hover ul ul ul li {
&:hover, &:hover,&.hover,
&:focus { &:focus {
ul { ul {
display: block; display: block;
@ -15144,8 +15238,8 @@ textarea,
background: none; background: none;
} }
.row > [class^="col-"] > .card, .row > [class^='col-'] > .card,
.row-xs > [class^="col-"] > .card { .row-xs > [class^='col-'] > .card {
height: 100%; height: 100%;
} }
@ -15154,7 +15248,7 @@ textarea,
margin-left: -0.5rem; margin-left: -0.5rem;
} }
.row-xs [class^="col-"] { .row-xs [class^='col-'] {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
} }

2
dist/css/app.css.map vendored
View File

File diff suppressed because one or more lines are too long

81
src/scss/_components/_ui.main.scss
View File

@ -1,14 +1,18 @@
/* /*
* some basic styles * some basic styles
*/ */
@import "../_animations"; @import '../_animations';
.pulse { .pulse {
animation: pulse 0.8s linear infinite; animation: pulse 0.8s linear infinite;
} }
// don't let images be wider than the parent layer // 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-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
@ -28,33 +32,47 @@ a,
button, button,
.btn { .btn {
&:hover, &:hover,
&.hover,
&:focus { &:focus {
opacity: .8; opacity: 0.8;
> .fa,
> .far, > .far,
> .fas, > .fas,
> .fab, > .fab,
&.fa,
&.far, &.far,
&.fas, &.fas,
&.fab { &.fab {
transform: rotate(-180deg); transform: rotate(-180deg);
} }
} }
&.disabled {
opacity: 0.5;
&:hover,
&.hover,
&:focus {
transform: rotate(0deg);
}
}
} }
// exclude bootstrap-table // exclude bootstrap-table
[data-toggle="table"] { [data-toggle='table'] {
&:hover, &:hover,
&.hover,
&:focus { &:focus {
opacity: 1; opacity: 1;
} }
} }
[data-toggle="collapse"] { [data-toggle='collapse'] {
&[aria-expanded="true"] { &[aria-expanded='true'] {
.accordion-icon { .accordion-icon {
&:before { &:before {
content: "\f068"; content: '\f068';
} }
} }
} }
@ -62,17 +80,24 @@ button,
// transactions // transactions
.transition, .transition,
a, a *, a,
.a, .a *, a *,
button, input, optgroup, select, textarea, .a,
.a *,
button,
input,
optgroup,
select,
textarea,
.btn, .btn,
.alert, .alert,
.dropdown, .dropdown,
[data-toggle], [data-toggle] *, [data-toggle],
[data-toggle] *,
.container, .container,
.container-fluid, .container-fluid,
.row, .row,
[class="col-*"] { [class='col-*'] {
transition: all 0.4s ease; transition: all 0.4s ease;
} }
@ -94,8 +119,8 @@ button, input, optgroup, select, textarea,
display: block; display: block;
position: absolute; position: absolute;
top: 2rem; top: 2rem;
right: .5rem; right: 0.5rem;
content: "*"; content: '*';
color: $red; color: $red;
z-index: 2; z-index: 2;
} }
@ -103,7 +128,9 @@ button, input, optgroup, select, textarea,
&.holder-error, &.holder-error,
&.error { &.error {
input, select, textarea { input,
select,
textarea {
border-color: $red; 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%; width: 100%;
} }
} }
@ -123,7 +150,7 @@ button, input, optgroup, select, textarea,
@extend .alert-info; @extend .alert-info;
display: block; display: block;
margin: .5rem 0; margin: 0.5rem 0;
} }
.message.validation, .message.validation,
@ -142,6 +169,7 @@ button, input, optgroup, select, textarea,
// rewrite btn opacity on hover // rewrite btn opacity on hover
.btn { .btn {
&:hover, &:hover,
&.hover,
&:focus { &:focus {
opacity: 1; opacity: 1;
} }
@ -163,7 +191,7 @@ button, input, optgroup, select, textarea,
// dropdown icon // dropdown icon
.navbar-toggler { .navbar-toggler {
&[aria-expanded="true"] { &[aria-expanded='true'] {
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
@ -178,7 +206,7 @@ button, input, optgroup, select, textarea,
/* /*
.dropdown.show { .dropdown.show {
.dropdown { .dropdown {
&:hover, &:hover,&.hover,
&:focus { &:focus {
.dropdown-menu { .dropdown-menu {
display: block; display: block;
@ -192,7 +220,7 @@ button, input, optgroup, select, textarea,
} }
.dropdown-hover ul li { .dropdown-hover ul li {
&:hover, &:hover,&.hover,
&:focus { &:focus {
> .dropdown-toggle::after { > .dropdown-toggle::after {
transform: rotate(-90deg); transform: rotate(-90deg);
@ -217,7 +245,7 @@ button, input, optgroup, select, textarea,
} }
.dropdown-hover ul ul li { .dropdown-hover ul ul li {
&:hover, &:hover,&.hover,
&:focus { &:focus {
> ul { > ul {
display: block; display: block;
@ -238,7 +266,7 @@ button, input, optgroup, select, textarea,
} }
.dropdown-hover ul ul ul li { .dropdown-hover ul ul ul li {
&:hover, &:hover,&.hover,
&:focus { &:focus {
ul { ul {
display: block; display: block;
@ -286,7 +314,6 @@ button, input, optgroup, select, textarea,
color: $navbar-dark-hover-color; color: $navbar-dark-hover-color;
} }
&.disabled { &.disabled {
color: $navbar-dark-disabled-color; color: $navbar-dark-disabled-color;
} }
@ -305,7 +332,6 @@ button, input, optgroup, select, textarea,
background: $navbar-dark-hover-background; background: $navbar-dark-hover-background;
} }
&.active, &.active,
&:active { &:active {
background: $navbar-dark-active-background; background: $navbar-dark-active-background;
@ -317,8 +343,9 @@ button, input, optgroup, select, textarea,
} }
} }
.row, .row-xs { .row,
> [class^="col-"] > .card { .row-xs {
> [class^='col-'] > .card {
height: 100%; height: 100%;
} }
} }
@ -327,7 +354,7 @@ button, input, optgroup, select, textarea,
margin-right: -($grid-gutter-xs-width / 2); margin-right: -($grid-gutter-xs-width / 2);
margin-left: -($grid-gutter-xs-width / 2); margin-left: -($grid-gutter-xs-width / 2);
[class^="col-"] { [class^='col-'] {
padding-left: $grid-gutter-xs-width / 2; padding-left: $grid-gutter-xs-width / 2;
padding-right: $grid-gutter-xs-width / 2; padding-right: $grid-gutter-xs-width / 2;
} }