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 10:04:03 +07:00
parent 2aa4e9334e
commit 346b63e198
5 changed files with 337 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

461
dist/css/app.css vendored
View File

@ -14793,151 +14793,283 @@ img {
cursor: pointer; cursor: pointer;
} }
.a :not(.disabled).hover, .a:hover,
.a :not(.disabled):hover, .a.hover,
.a :not(.disabled):focus, .a:focus,
a :not(.disabled).hover, a:hover,
a :not(.disabled):hover, a.hover,
a :not(.disabled):focus, a:focus,
[data-toggle] :not(.disabled).hover, [data-toggle]:hover,
[data-toggle] :not(.disabled):hover, [data-toggle].hover,
[data-toggle] :not(.disabled):focus, [data-toggle]:focus,
button :not(.disabled).hover, button:hover,
button :not(.disabled):hover, button.hover,
button :not(.disabled):focus, button:focus,
.btn :not(.disabled).hover, .btn:hover,
.btn :not(.disabled):hover, .btn.hover,
.btn :not(.disabled):focus { .btn:focus {
opacity: 0.8; opacity: 0.8;
} }
.a :not(.disabled).hover > .fa, .a:hover > .fa,
.a :not(.disabled).hover > .far, .a:hover > .far,
.a :not(.disabled).hover > .fas, .a:hover > .fas,
.a :not(.disabled).hover > .fab, .a:hover > .fab,
.a :not(.disabled).hover.fa, .a:hover.fa,
.a :not(.disabled).hover.far, .a:hover.far,
.a :not(.disabled).hover.fas, .a:hover.fas,
.a :not(.disabled).hover.fab, .a:hover.fab,
.a :not(.disabled):hover > .fa, .a.hover > .fa,
.a :not(.disabled):hover > .far, .a.hover > .far,
.a :not(.disabled):hover > .fas, .a.hover > .fas,
.a :not(.disabled):hover > .fab, .a.hover > .fab,
.a :not(.disabled):hover.fa, .a.hover.fa,
.a :not(.disabled):hover.far, .a.hover.far,
.a :not(.disabled):hover.fas, .a.hover.fas,
.a :not(.disabled):hover.fab, .a.hover.fab,
.a :not(.disabled):focus > .fa, .a:focus > .fa,
.a :not(.disabled):focus > .far, .a:focus > .far,
.a :not(.disabled):focus > .fas, .a:focus > .fas,
.a :not(.disabled):focus > .fab, .a:focus > .fab,
.a :not(.disabled):focus.fa, .a:focus.fa,
.a :not(.disabled):focus.far, .a:focus.far,
.a :not(.disabled):focus.fas, .a:focus.fas,
.a :not(.disabled):focus.fab, .a:focus.fab,
a :not(.disabled).hover > .fa, a:hover > .fa,
a :not(.disabled).hover > .far, a:hover > .far,
a :not(.disabled).hover > .fas, a:hover > .fas,
a :not(.disabled).hover > .fab, a:hover > .fab,
a :not(.disabled).hover.fa, a:hover.fa,
a :not(.disabled).hover.far, a:hover.far,
a :not(.disabled).hover.fas, a:hover.fas,
a :not(.disabled).hover.fab, a:hover.fab,
a :not(.disabled):hover > .fa, a.hover > .fa,
a :not(.disabled):hover > .far, a.hover > .far,
a :not(.disabled):hover > .fas, a.hover > .fas,
a :not(.disabled):hover > .fab, a.hover > .fab,
a :not(.disabled):hover.fa, a.hover.fa,
a :not(.disabled):hover.far, a.hover.far,
a :not(.disabled):hover.fas, a.hover.fas,
a :not(.disabled):hover.fab, a.hover.fab,
a :not(.disabled):focus > .fa, a:focus > .fa,
a :not(.disabled):focus > .far, a:focus > .far,
a :not(.disabled):focus > .fas, a:focus > .fas,
a :not(.disabled):focus > .fab, a:focus > .fab,
a :not(.disabled):focus.fa, a:focus.fa,
a :not(.disabled):focus.far, a:focus.far,
a :not(.disabled):focus.fas, a:focus.fas,
a :not(.disabled):focus.fab, a:focus.fab,
[data-toggle] :not(.disabled).hover > .fa, [data-toggle]:hover > .fa,
[data-toggle] :not(.disabled).hover > .far, [data-toggle]:hover > .far,
[data-toggle] :not(.disabled).hover > .fas, [data-toggle]:hover > .fas,
[data-toggle] :not(.disabled).hover > .fab, [data-toggle]:hover > .fab,
[data-toggle] :not(.disabled).hover.fa, [data-toggle]:hover.fa,
[data-toggle] :not(.disabled).hover.far, [data-toggle]:hover.far,
[data-toggle] :not(.disabled).hover.fas, [data-toggle]:hover.fas,
[data-toggle] :not(.disabled).hover.fab, [data-toggle]:hover.fab,
[data-toggle] :not(.disabled):hover > .fa, [data-toggle].hover > .fa,
[data-toggle] :not(.disabled):hover > .far, [data-toggle].hover > .far,
[data-toggle] :not(.disabled):hover > .fas, [data-toggle].hover > .fas,
[data-toggle] :not(.disabled):hover > .fab, [data-toggle].hover > .fab,
[data-toggle] :not(.disabled):hover.fa, [data-toggle].hover.fa,
[data-toggle] :not(.disabled):hover.far, [data-toggle].hover.far,
[data-toggle] :not(.disabled):hover.fas, [data-toggle].hover.fas,
[data-toggle] :not(.disabled):hover.fab, [data-toggle].hover.fab,
[data-toggle] :not(.disabled):focus > .fa, [data-toggle]:focus > .fa,
[data-toggle] :not(.disabled):focus > .far, [data-toggle]:focus > .far,
[data-toggle] :not(.disabled):focus > .fas, [data-toggle]:focus > .fas,
[data-toggle] :not(.disabled):focus > .fab, [data-toggle]:focus > .fab,
[data-toggle] :not(.disabled):focus.fa, [data-toggle]:focus.fa,
[data-toggle] :not(.disabled):focus.far, [data-toggle]:focus.far,
[data-toggle] :not(.disabled):focus.fas, [data-toggle]:focus.fas,
[data-toggle] :not(.disabled):focus.fab, [data-toggle]:focus.fab,
button :not(.disabled).hover > .fa, button:hover > .fa,
button :not(.disabled).hover > .far, button:hover > .far,
button :not(.disabled).hover > .fas, button:hover > .fas,
button :not(.disabled).hover > .fab, button:hover > .fab,
button :not(.disabled).hover.fa, button:hover.fa,
button :not(.disabled).hover.far, button:hover.far,
button :not(.disabled).hover.fas, button:hover.fas,
button :not(.disabled).hover.fab, button:hover.fab,
button :not(.disabled):hover > .fa, button.hover > .fa,
button :not(.disabled):hover > .far, button.hover > .far,
button :not(.disabled):hover > .fas, button.hover > .fas,
button :not(.disabled):hover > .fab, button.hover > .fab,
button :not(.disabled):hover.fa, button.hover.fa,
button :not(.disabled):hover.far, button.hover.far,
button :not(.disabled):hover.fas, button.hover.fas,
button :not(.disabled):hover.fab, button.hover.fab,
button :not(.disabled):focus > .fa, button:focus > .fa,
button :not(.disabled):focus > .far, button:focus > .far,
button :not(.disabled):focus > .fas, button:focus > .fas,
button :not(.disabled):focus > .fab, button:focus > .fab,
button :not(.disabled):focus.fa, button:focus.fa,
button :not(.disabled):focus.far, button:focus.far,
button :not(.disabled):focus.fas, button:focus.fas,
button :not(.disabled):focus.fab, button:focus.fab,
.btn :not(.disabled).hover > .fa, .btn:hover > .fa,
.btn :not(.disabled).hover > .far, .btn:hover > .far,
.btn :not(.disabled).hover > .fas, .btn:hover > .fas,
.btn :not(.disabled).hover > .fab, .btn:hover > .fab,
.btn :not(.disabled).hover.fa, .btn:hover.fa,
.btn :not(.disabled).hover.far, .btn:hover.far,
.btn :not(.disabled).hover.fas, .btn:hover.fas,
.btn :not(.disabled).hover.fab, .btn:hover.fab,
.btn :not(.disabled):hover > .fa, .btn.hover > .fa,
.btn :not(.disabled):hover > .far, .btn.hover > .far,
.btn :not(.disabled):hover > .fas, .btn.hover > .fas,
.btn :not(.disabled):hover > .fab, .btn.hover > .fab,
.btn :not(.disabled):hover.fa, .btn.hover.fa,
.btn :not(.disabled):hover.far, .btn.hover.far,
.btn :not(.disabled):hover.fas, .btn.hover.fas,
.btn :not(.disabled):hover.fab, .btn.hover.fab,
.btn :not(.disabled):focus > .fa, .btn:focus > .fa,
.btn :not(.disabled):focus > .far, .btn:focus > .far,
.btn :not(.disabled):focus > .fas, .btn:focus > .fas,
.btn :not(.disabled):focus > .fab, .btn:focus > .fab,
.btn :not(.disabled):focus.fa, .btn:focus.fa,
.btn :not(.disabled):focus.far, .btn:focus.far,
.btn :not(.disabled):focus.fas, .btn:focus.fas,
.btn :not(.disabled):focus.fab { .btn:focus.fab {
-webkit-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);
transform: rotate(-180deg); transform: rotate(-180deg);
} }
[data-toggle='table'] :not(.disabled).hover, .a.disabled,
[data-toggle='table'] :not(.disabled):hover, a.disabled,
[data-toggle='table'] :not(.disabled):focus { [data-toggle].disabled,
button.disabled,
.btn.disabled {
opacity: 0.5;
}
.a.disabled:hover > .fa,
.a.disabled:hover > .far,
.a.disabled:hover > .fas,
.a.disabled:hover > .fab,
.a.disabled:hover.fa,
.a.disabled:hover.far,
.a.disabled:hover.fas,
.a.disabled:hover.fab,
.a.disabled.hover > .fa,
.a.disabled.hover > .far,
.a.disabled.hover > .fas,
.a.disabled.hover > .fab,
.a.disabled.hover.fa,
.a.disabled.hover.far,
.a.disabled.hover.fas,
.a.disabled.hover.fab,
.a.disabled:focus > .fa,
.a.disabled:focus > .far,
.a.disabled:focus > .fas,
.a.disabled:focus > .fab,
.a.disabled:focus.fa,
.a.disabled:focus.far,
.a.disabled:focus.fas,
.a.disabled:focus.fab,
a.disabled:hover > .fa,
a.disabled:hover > .far,
a.disabled:hover > .fas,
a.disabled:hover > .fab,
a.disabled:hover.fa,
a.disabled:hover.far,
a.disabled:hover.fas,
a.disabled:hover.fab,
a.disabled.hover > .fa,
a.disabled.hover > .far,
a.disabled.hover > .fas,
a.disabled.hover > .fab,
a.disabled.hover.fa,
a.disabled.hover.far,
a.disabled.hover.fas,
a.disabled.hover.fab,
a.disabled:focus > .fa,
a.disabled:focus > .far,
a.disabled:focus > .fas,
a.disabled:focus > .fab,
a.disabled:focus.fa,
a.disabled:focus.far,
a.disabled:focus.fas,
a.disabled:focus.fab,
[data-toggle].disabled:hover > .fa,
[data-toggle].disabled:hover > .far,
[data-toggle].disabled:hover > .fas,
[data-toggle].disabled:hover > .fab,
[data-toggle].disabled:hover.fa,
[data-toggle].disabled:hover.far,
[data-toggle].disabled:hover.fas,
[data-toggle].disabled:hover.fab,
[data-toggle].disabled.hover > .fa,
[data-toggle].disabled.hover > .far,
[data-toggle].disabled.hover > .fas,
[data-toggle].disabled.hover > .fab,
[data-toggle].disabled.hover.fa,
[data-toggle].disabled.hover.far,
[data-toggle].disabled.hover.fas,
[data-toggle].disabled.hover.fab,
[data-toggle].disabled:focus > .fa,
[data-toggle].disabled:focus > .far,
[data-toggle].disabled:focus > .fas,
[data-toggle].disabled:focus > .fab,
[data-toggle].disabled:focus.fa,
[data-toggle].disabled:focus.far,
[data-toggle].disabled:focus.fas,
[data-toggle].disabled:focus.fab,
button.disabled:hover > .fa,
button.disabled:hover > .far,
button.disabled:hover > .fas,
button.disabled:hover > .fab,
button.disabled:hover.fa,
button.disabled:hover.far,
button.disabled:hover.fas,
button.disabled:hover.fab,
button.disabled.hover > .fa,
button.disabled.hover > .far,
button.disabled.hover > .fas,
button.disabled.hover > .fab,
button.disabled.hover.fa,
button.disabled.hover.far,
button.disabled.hover.fas,
button.disabled.hover.fab,
button.disabled:focus > .fa,
button.disabled:focus > .far,
button.disabled:focus > .fas,
button.disabled:focus > .fab,
button.disabled:focus.fa,
button.disabled:focus.far,
button.disabled:focus.fas,
button.disabled:focus.fab,
.btn.disabled:hover > .fa,
.btn.disabled:hover > .far,
.btn.disabled:hover > .fas,
.btn.disabled:hover > .fab,
.btn.disabled:hover.fa,
.btn.disabled:hover.far,
.btn.disabled:hover.fas,
.btn.disabled:hover.fab,
.btn.disabled.hover > .fa,
.btn.disabled.hover > .far,
.btn.disabled.hover > .fas,
.btn.disabled.hover > .fab,
.btn.disabled.hover.fa,
.btn.disabled.hover.far,
.btn.disabled.hover.fas,
.btn.disabled.hover.fab,
.btn.disabled:focus > .fa,
.btn.disabled:focus > .far,
.btn.disabled:focus > .fas,
.btn.disabled:focus > .fab,
.btn.disabled:focus.fa,
.btn.disabled:focus.far,
.btn.disabled:focus.fas,
.btn.disabled:focus.fab {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
[data-toggle='table']:hover,
[data-toggle='table'].hover,
[data-toggle='table']:focus {
opacity: 1; opacity: 1;
} }
@ -15029,9 +15161,9 @@ textarea,
padding: 0.5rem; padding: 0.5rem;
} }
.btn :not(.disabled).hover, .btn:hover,
.btn :not(.disabled):hover, .btn.hover,
.btn :not(.disabled):focus { .btn:focus {
opacity: 1; opacity: 1;
} }
@ -15050,7 +15182,8 @@ textarea,
/* /*
.dropdown.show { .dropdown.show {
.dropdown { .dropdown {
@include ss_hover { &:hover,&.hover,
&:focus {
.dropdown-menu { .dropdown-menu {
display: block; display: block;
} }
@ -15063,7 +15196,8 @@ textarea,
} }
.dropdown-hover ul li { .dropdown-hover ul li {
@include ss_hover { &:hover,&.hover,
&:focus {
> .dropdown-toggle::after { > .dropdown-toggle::after {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@ -15087,7 +15221,8 @@ textarea,
} }
.dropdown-hover ul ul li { .dropdown-hover ul ul li {
@include ss_hover { &:hover,&.hover,
&:focus {
> ul { > ul {
display: block; display: block;
} }
@ -15107,7 +15242,8 @@ textarea,
} }
.dropdown-hover ul ul ul li { .dropdown-hover ul ul ul li {
@include ss_hover { &:hover,&.hover,
&:focus {
ul { ul {
display: block; display: block;
} }
@ -15124,9 +15260,8 @@ textarea,
} }
}*/ }*/
.navbar-dark .nav-link :not(.disabled).hover, .navbar-dark .nav-link:hover,
.navbar-dark .nav-link :not(.disabled):hover, .navbar-dark .nav-link:focus {
.navbar-dark .nav-link :not(.disabled):focus {
background: #212121; background: #212121;
} }
@ -15153,15 +15288,12 @@ textarea,
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.dropdown-menu.bg-dark .nav-link :not(.disabled).hover, .dropdown-menu.bg-dark .nav-link:hover,
.dropdown-menu.bg-alt .nav-link :not(.disabled).hover, .dropdown-menu.bg-alt .nav-link:hover,
.element.site__elements__accordion .card .dropdown-menu.card-header .nav-link :not(.disabled).hover, .element.site__elements__accordion .card .dropdown-menu.card-header .nav-link:hover,
.dropdown-menu.bg-dark .nav-link :not(.disabled):hover, .dropdown-menu.bg-dark .nav-link:focus,
.dropdown-menu.bg-alt .nav-link :not(.disabled):hover, .dropdown-menu.bg-alt .nav-link:focus,
.element.site__elements__accordion .card .dropdown-menu.card-header .nav-link :not(.disabled):hover, .element.site__elements__accordion .card .dropdown-menu.card-header .nav-link:focus {
.dropdown-menu.bg-dark .nav-link :not(.disabled):focus,
.dropdown-menu.bg-alt .nav-link :not(.disabled):focus,
.element.site__elements__accordion .card .dropdown-menu.card-header .nav-link :not(.disabled):focus {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
@ -15186,15 +15318,12 @@ textarea,
color: #fff; color: #fff;
} }
.dropdown-menu.bg-dark .dropdown-item :not(.disabled).hover, .dropdown-menu.bg-dark .dropdown-item:hover,
.dropdown-menu.bg-alt .dropdown-item :not(.disabled).hover, .dropdown-menu.bg-alt .dropdown-item:hover,
.element.site__elements__accordion .card .dropdown-menu.card-header .dropdown-item :not(.disabled).hover, .element.site__elements__accordion .card .dropdown-menu.card-header .dropdown-item:hover,
.dropdown-menu.bg-dark .dropdown-item :not(.disabled):hover, .dropdown-menu.bg-dark .dropdown-item:focus,
.dropdown-menu.bg-alt .dropdown-item :not(.disabled):hover, .dropdown-menu.bg-alt .dropdown-item:focus,
.element.site__elements__accordion .card .dropdown-menu.card-header .dropdown-item :not(.disabled):hover, .element.site__elements__accordion .card .dropdown-menu.card-header .dropdown-item:focus {
.dropdown-menu.bg-dark .dropdown-item :not(.disabled):focus,
.dropdown-menu.bg-alt .dropdown-item :not(.disabled):focus,
.element.site__elements__accordion .card .dropdown-menu.card-header .dropdown-item :not(.disabled):focus {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
background: #212121; background: #212121;
} }

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

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
"version": "1.4.7", "version": "1.4.8",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "MIT", "license": "MIT",
"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

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

@ -31,7 +31,9 @@ a,
[data-toggle], [data-toggle],
button, button,
.btn { .btn {
@include ss_hover { &:hover,
&.hover,
&:focus {
opacity: 0.8; opacity: 0.8;
> .fa, > .fa,
@ -45,11 +47,32 @@ button,
transform: rotate(-180deg); transform: rotate(-180deg);
} }
} }
&.disabled {
opacity: 0.5;
&:hover,
&.hover,
&:focus {
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(0deg);
}
}
}
} }
// exclude bootstrap-table // exclude bootstrap-table
[data-toggle='table'] { [data-toggle='table'] {
@include ss_hover { &:hover,
&.hover,
&:focus {
opacity: 1; opacity: 1;
} }
} }
@ -154,7 +177,9 @@ textarea,
// rewrite btn opacity on hover // rewrite btn opacity on hover
.btn { .btn {
@include ss_hover { &:hover,
&.hover,
&:focus {
opacity: 1; opacity: 1;
} }
} }
@ -190,7 +215,8 @@ textarea,
/* /*
.dropdown.show { .dropdown.show {
.dropdown { .dropdown {
@include ss_hover { &:hover,&.hover,
&:focus {
.dropdown-menu { .dropdown-menu {
display: block; display: block;
} }
@ -203,7 +229,8 @@ textarea,
} }
.dropdown-hover ul li { .dropdown-hover ul li {
@include ss_hover { &:hover,&.hover,
&:focus {
> .dropdown-toggle::after { > .dropdown-toggle::after {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@ -227,7 +254,8 @@ textarea,
} }
.dropdown-hover ul ul li { .dropdown-hover ul ul li {
@include ss_hover { &:hover,&.hover,
&:focus {
> ul { > ul {
display: block; display: block;
} }
@ -247,7 +275,8 @@ textarea,
} }
.dropdown-hover ul ul ul li { .dropdown-hover ul ul ul li {
@include ss_hover { &:hover,&.hover,
&:focus {
ul { ul {
display: block; display: block;
} }
@ -267,7 +296,7 @@ textarea,
// dark dropdowns // dark dropdowns
.navbar-dark { .navbar-dark {
.nav-link { .nav-link {
@include ss_hover { @include hover-focus {
background: $navbar-dark-hover-background; background: $navbar-dark-hover-background;
} }
} }
@ -290,7 +319,7 @@ textarea,
.nav-link { .nav-link {
color: $navbar-dark-color; color: $navbar-dark-color;
@include ss_hover { @include hover-focus {
color: $navbar-dark-hover-color; color: $navbar-dark-hover-color;
} }
@ -307,7 +336,7 @@ textarea,
} }
.dropdown-item { .dropdown-item {
@include ss_hover { @include hover-focus {
color: $navbar-dark-hover-color; color: $navbar-dark-hover-color;
background: $navbar-dark-hover-background; background: $navbar-dark-hover-background;
} }

2
src/scss/_mixings.scss
View File

@ -1,5 +1,5 @@
@mixin ss_hover() { @mixin ss_hover() {
:not(.disabled) { &:not(.disabled) {
&.hover, &.hover,
&:hover, &:hover,
&:focus { &:focus {