bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
bellord
2021-08-15 15:53:48 +03:00
parent 2791acedda
commit 1b84ac831f
4 changed files with 1243 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/toolkit/toolkit.css
+94 -17
View File
@@ -91,7 +91,9 @@
}
* {
box-sizing: border-box;
}
.kit-field {
display: flex;
@@ -101,9 +103,10 @@
position: relative;
pointer-events: none;
line-height: 1.5em;
--kit-fields-focus-label-zoom-ratio: 0.875;
--kit-field-focus-label-zoom-ratio: 0.875;
--kit-field-line-padding: 3px;
--line-height-ratio: 1.5;
--kit-field-check-mark-stroke-dash-ratio: 45;
}
.kit-field__input {
@@ -138,11 +141,7 @@
.kit-field input[type="radio"]:checked ~ .kit-field__hr {
display: block;
border: 2px solid var(--kit-color);
width: 100%;
height: 100%;
border-radius: 10px;
}
.kit-field input[type='checkbox'], .kit-field input[type='radio'] {
@@ -300,7 +299,7 @@
.kit-field .kit-field__display:focus ~.kit-field__label {
top: 0;
transform: translate(0, 0);
font-size: calc(var(--font-size) * var(--kit-fields-focus-label-zoom-ratio));
font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
color: var(--kit-color-primary);
}
.kit-field textarea:focus ~.kit-field__hr:after,
@@ -423,7 +422,11 @@
transition: border 0.15s, background 0.15s, -webkit-transform 0.15s;
transition: border 0.15s, background 0.15s, transform 0.15s;
}
.kit-field__icon >svg {
.kit-field__icon:before {
content: '';
}
.kit-field__icon > svg {
position: absolute;
top: 0;
left: 0;
@@ -433,6 +436,7 @@
-moz-transition: -moz-transform 0.15s, opacity 0.15s, fill 0.15s;
transition: -webkit-transform 0.15s, opacity 0.15s, fill 0.15s;
transition: transform 0.15s, opacity 0.15s, fill 0.15s;
overflow: visible;
}
.kit-field input[type='checkbox'],
.kit-field input[type='radio'] {
@@ -441,6 +445,7 @@
.kit-field input[type='checkbox'] ~.kit-field__label,
.kit-field input[type='radio'] ~.kit-field__label {
pointer-events: auto;
flex-grow: 1;
}
.kit-field .kit-field__button {
position: absolute;
@@ -473,7 +478,7 @@
fill: #e24949;
}
.kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon {
border-color: #e24949;
border-color: var(--kit-color-text);
}
.kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg {
-webkit-transform: scale(1);
@@ -522,22 +527,94 @@
padding-bottom: var( --kit-field-line-padding);
padding-top: var( --kit-field-line-padding);
}
.kit-field input[type='checkbox'] ~.kit-field__label .kit-field__icon {
/* kit-field--check-mark-material */
.kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon,
.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon {
border: 0;
}
.kit-field input[type='checkbox'] ~.kit-field__label .kit-field__icon >svg path {
fill: #fff;
.kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg,
.kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg {
opacity: 0;
transition: none;
}
.kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before,
.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 1em;
height: 1em;
border: 1px solid var(--kit-color-text);
display: block;
box-sizing: border-box;
transition: 0.2s;
}
.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before {
border-radius: 50%;
}
.kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before,
.kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before {
border-width: 2px;
border-style: solid;
border-color: var(--kit-color-primary-b1);
border-left-color: transparent;
border-top-color: transparent;
width: 0.7em;
height: 1.2em;
transform: rotate(
45deg
) translate(-3px, 0px);
transform-origin: 100% 100%;
border-radius: 0;
}
/* kit-field--check-mark-stroke */
.kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg,
.kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg {
opacity: 1;
transition: none;
overflow: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark,
.kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark {
fill: none;
stroke: var(--kit-color-primary);
stroke-width: 3;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
stroke-dasharray: var(--kit-field-check-mark-stroke-dash-ratio);
stroke-dashoffset: var(--kit-field-check-mark-stroke-dash-ratio);
transition: 0.3s;
}
.kit-field input:checked.kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon .kit-field__check-mark {
stroke-dashoffset: 0;
}
.kit-field input[type='checkbox'] ~.kit-field__message
{
padding-left: 28px;
}
.kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon {
border-color: var(--kit-color-primary);
background: var(--kit-color-primary);
/*border-color: var(--kit-color-primary);*/
/*background: var(--kit-color-primary);*/
}
.kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon >svg {
.kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon >svg,
.kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg {
opacity: 1;
fill: var(--kit-color-primary);
stroke: var(--kit-color-primary);
}
.kit-field input[type='checkbox']:checked:disabled ~.kit-field__label .kit-field__icon {
background: #e1e1e1;
@@ -972,7 +1049,7 @@ select.kit-field__input:disabled ~.kit-field__hr {
.kit-field.kit-select--open .kit-field__label {
top: 0 !important;
transform: translate(0, 0);
font-size: calc(var(--font-size) * var(--kit-fields-focus-label-zoom-ratio));
font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
color: var(--kit-color-primary) !important;
}
.kit-field.kit-select--open [data-dirty='false'] ~ .kit-field__label {