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

IMPR: Some mixins and clean ups, show password functionality

This commit is contained in:
Tony Air 2021-01-14 22:47:36 +07:00
parent f9ce733a62
commit 76354cb95a
7 changed files with 255 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
dist/records.json vendored
View File

@ -72,158 +72,6 @@
831
]
},
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox@2.7.1/node_modules/@a2nt/meta-lightbox/src/scss/app.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox@2.7.1/node_modules/@a2nt/meta-lightbox/src/scss/app.scss": 953
},
"usedIds": [
254,
953
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/_components/_ui.map.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/_components/_ui.map.scss": 140
},
"usedIds": [
140,
254
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/app.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/app.scss": 200,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/select2@4.0.13/node_modules/select2/dist/css/select2.css": 282
},
"usedIds": [
200,
254,
282
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/cms.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/cms.scss": 209
},
"usedIds": [
209,
254
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/editor.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/editor.scss": 98
},
"usedIds": [
98,
254
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/order.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/order.scss": 558
},
"usedIds": [
254,
558
]
}
}
],
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/bootstrap@4.5.3_jquery@3.5.1+popper.js@1.16.1/node_modules/bootstrap/js/dist/alert.js": 6,

17
src/js/_components/_ui.form.basics.js
View File

@ -91,6 +91,23 @@ const FormBasics = (($) => {
}, 100);
});
$('.field.password .show-password').on('click', (e) => {
console.log(`${NAME}: .field.password .show-password (click)`);
const $el = $(e.currentTarget);
const $field = $el.siblings('input');
const $icon = $el.find('.fas');
const attr = $field.attr('type');
if (attr === 'password') {
$field.attr('type', 'text');
$icon.removeClass('fa-eye').addClass('fa-eye-slash');
} else {
$field.attr('type', 'password');
$icon.removeClass('fa-eye-slash').addClass('fa-eye');
}
});
$el.addClass(`${NAME}-active`);
$el.trigger(Events.FORM_INIT_BASICS);
}

2
src/js/_components/_ui.header-footer.js
View File

@ -21,7 +21,7 @@ const HeaderUI = (($) => {
const updateHeader = () => {
const h = $header.height();
const s = $Body.scrollTop();
if (s > h) {
if (s + 50 > h) {
$Body.addClass('shrink');
} else {
$Body.removeClass('shrink');

10
src/scss/_components/_ui.elemental.scss
View File

@ -21,7 +21,7 @@
&.site__elements__sliderelement {
padding-top: 0;
padding-bottom: 0;
margin-bottom: $grid-gutter-element-height;
margin-bottom: $grid-gutter-element-height/2;
}
// remove paddings for elemental list cuz inner elements will have paddings
@ -30,13 +30,13 @@
padding-bottom: 0;
.element {
padding-top: $grid-gutter-element-height;
padding-bottom: $grid-gutter-element-height;
padding-top: $grid-gutter-element-height/2;
padding-bottom: $grid-gutter-element-height/2;
}
.dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement {
padding-top: $grid-gutter-element-height;
padding-bottom: $grid-gutter-element-height;
padding-top: $grid-gutter-element-height/2;
padding-bottom: $grid-gutter-element-height/2;
}
}

8
src/scss/_components/_ui.form.basics.scss
View File

@ -226,3 +226,11 @@ input.checkbox {
@extend .form-control;
}
}
.field.password {
.show-password {
position: absolute;
top: 0.5em;
right: 0.5em;
}
}

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

@ -244,120 +244,34 @@ textarea,
}
}
.dropdown-toggle {
position: relative;
padding-right: 1.5em;
&:after {
position: absolute;
right: 0.5em;
bottom: 1em;
}
}
.navbar-nav .dropdown-toggle.nav-link {
padding-right: 1.5em;
}
.dropdown.show .dropdown-toggle::after,
.dropdown-toggle.active-dropdown::after,
.dropdown-toggle.active::after {
transform: rotate(-90deg);
}
// dropdown hover
/*
.dropdown.show {
.dropdown {
&:hover,&.active,
&:focus {
.dropdown-menu {
display: block;
}
}
}
}
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
.dropdown-hover ul li {
position: relative;
}
.dropdown-hover ul li {
&:hover,&.active,
&:focus {
> .dropdown-toggle::after {
transform: rotate(-90deg);
}
> ul {
display: block;
}
}
}
.dropdown-hover ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul li {
position: relative;
}
.dropdown-hover ul ul li {
&:hover,&.active,
&:focus {
> ul {
display: block;
}
}
}
.dropdown-hover ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul ul li {
position: relative;
}
.dropdown-hover ul ul ul li {
&:hover,&.active,
&:focus {
ul {
display: block;
}
}
}
.dropdown-hover ul ul ul ul {
position: absolute;
top: 0;
left: -100%;
min-width: 250px;
display: none;
z-index: 1;
}
}*/
// dark dropdowns
.navbar-dark {
.nav-link {
@include hover-focus {
background: $navbar-dark-hover-background;
}
}
.active > .nav-link,
.nav-link.active {
background: $navbar-dark-active-background;
}
.nav-link.show,
.navbar-nav .show > .nav-link {
background: $navbar-dark-show-background;
color: $navbar-dark-show-color;
}
}
@keyframes expand {
from {
max-height: 0;
}
to {
max-height: 1000rem;
max-height: 500rem;
max-height: 200vh;
}
}
@ -369,7 +283,7 @@ textarea,
transition: none;
&.show {
animation: expand 1s;
animation: expand 2s;
animation-fill-mode: both;
overflow: visible;
}
@ -383,46 +297,6 @@ textarea,
}
}
.dropdown-menu.bg-dark {
border-color: $dark;
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
cursor: default;
color: $navbar-dark-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
.dropdown-item {
@include hover-focus {
color: $navbar-dark-hover-color;
background: $navbar-dark-hover-background;
}
&.active,
&:active {
background: $navbar-dark-active-background;
}
.nav-link {
background: none;
}
}
}
.row,
.row-xs {
> [class^='col-'] > .card {

206
src/scss/_mixings.scss
View File

@ -8,3 +8,209 @@
}
}
}
@mixin pseudo($display: block, $pos: absolute, $content: '') {
content: $content;
display: $display;
position: $pos;
}
@mixin responsive-ratio($x, $y, $pseudo: false) {
$padding: unquote(($y / $x) * 100 + '%');
@if $pseudo {
&:before {
@include pseudo($pos: relative);
width: 100%;
padding-top: $padding;
}
} @else {
padding-top: $padding;
}
}
@mixin input-placeholder {
&.placeholder {
@content;
}
&:-moz-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
&::-webkit-input-placeholder {
@content;
}
}
@mixin truncate($truncation-boundary) {
max-width: $truncation-boundary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@mixin fix-bold() {
display: inline-flex;
flex-direction: column;
&:before {
content: attr(data-text);
content: attr(data-text) / '';
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
pointer-events: none;
font-weight: bold;
}
}
@mixin dropdowns-dark() {
.navbar-dark {
.nav-link {
@include hover-focus {
background: $navbar-dark-hover-background;
}
}
.active > .nav-link,
.nav-link.active {
background: $navbar-dark-active-background;
}
.nav-link.show,
.navbar-nav .show > .nav-link {
background: $navbar-dark-show-background;
color: $navbar-dark-show-color;
}
}
.dropdown-menu.bg-dark {
border-color: $dark;
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
cursor: default;
color: $navbar-dark-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
.dropdown-item {
@include hover-focus {
color: $navbar-dark-hover-color;
background: $navbar-dark-hover-background;
}
&.active,
&:active {
background: $navbar-dark-active-background;
}
.nav-link {
background: none;
}
}
}
}
@mixin dropdown-hovers() {
.dropdown.show {
.dropdown {
&:hover,
&.active,
&:focus {
.dropdown-menu {
display: block;
}
}
}
}
@media only screen and (min-width: map-get($grid-breakpoints, 'md')) {
.dropdown-hover ul li {
position: relative;
}
.dropdown-hover ul li {
&:hover,
&.active,
&:focus {
> .dropdown-toggle::after {
transform: rotate(-90deg);
}
> ul {
display: block;
}
}
}
.dropdown-hover ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul li {
position: relative;
}
.dropdown-hover ul ul li {
&:hover,
&.active,
&:focus {
> ul {
display: block;
}
}
}
.dropdown-hover ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul ul li {
position: relative;
}
.dropdown-hover ul ul ul li {
&:hover,
&.active,
&:focus {
ul {
display: block;
}
}
}
.dropdown-hover ul ul ul ul {
position: absolute;
top: 0;
left: -100%;
min-width: 250px;
display: none;
z-index: 1;
}
}
}