commit
9fca496070
29 changed files with 6188 additions and 0 deletions
@ -0,0 +1,26 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
public/index.html |
||||||
|
public/zx.style.js |
||||||
|
public/zx.style.svg |
||||||
|
public-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2022 Stéphane Savona |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
# Zertex Style |
||||||
|
|
||||||
|
## Installation |
||||||
|
`npm i zxstyle` |
||||||
|
|
||||||
|
## Description : |
||||||
|
Simple CSS library |
||||||
|
|
||||||
|
## Using : |
||||||
|
- `npm run dev` : Start server and watch |
||||||
|
- `npm run build` : Build project for production |
||||||
|
- `npm run preview` : Preview project before production |
||||||
|
- `npm run cypress` : Run Cypress test |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
@import "colors-list"; |
||||||
|
|
||||||
|
@mixin button-theme($theme-name) { |
||||||
|
$colors: map-get(map-get($themes, $theme-name), 'colors'); |
||||||
|
font-size: 15px; |
||||||
|
border: 0; |
||||||
|
padding: 6px 12px; |
||||||
|
cursor: pointer; |
||||||
|
user-select: none; |
||||||
|
display: inline-flex; |
||||||
|
flex-wrap: nowrap; |
||||||
|
flex-shrink: 0; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
-webkit-user-select: none; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
transition: background-color 0.3s linear, color 0.3s linear, opacity 0.3s linear, outline-color 0.3s ease-in-out, outline-width 0.3s ease-in-out, box-shadow 0.3s; |
||||||
|
|
||||||
|
&.button-cut { |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
&.button-rounded { |
||||||
|
border-radius: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
@each $key, $color in $colors { |
||||||
|
@if($theme-name == 'dark') { |
||||||
|
@include button($key, map-get($colors, 'black'), $color); |
||||||
|
} |
||||||
|
@else { |
||||||
|
@include button($key, map-get($colors, 'white'), darken($color, 20)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.disabled { |
||||||
|
opacity: 0.5; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.button-exp { |
||||||
|
@each $key, $color in $colors { |
||||||
|
@if($theme-name == 'dark') { |
||||||
|
@include button($key, $color, darken($color, 60)); |
||||||
|
} |
||||||
|
@else { |
||||||
|
@include button($key, $color, darken($color, 40)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.button-plate { |
||||||
|
@each $key, $color in $colors { |
||||||
|
@if($theme-name == 'dark') { |
||||||
|
@include button($key, $color, darken(map-get($colors, 'gray'), 45)); |
||||||
|
} |
||||||
|
@else { |
||||||
|
@include button($key, darken($color, 30), lighten(map-get($colors, 'gray'), 25)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.button-shade { |
||||||
|
@each $key, $color in $colors { |
||||||
|
@if($theme-name == 'dark') { |
||||||
|
@include button($key, $color, mix(map-get($colors-dark, 'gray-0'), $color, 85%)); |
||||||
|
} |
||||||
|
@else { |
||||||
|
@include button($key, darken($color, 30), mix(map-get($colors, 'white'), $color, 80%)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin button($key, $fg-color, $bg-color) { |
||||||
|
&.button-#{$key} { |
||||||
|
background-color: $bg-color; |
||||||
|
color: $fg-color; |
||||||
|
&:hover { |
||||||
|
background-color: lighten($bg-color, 10); |
||||||
|
} |
||||||
|
&:focus, |
||||||
|
&:active { |
||||||
|
background-color: darken($bg-color, 5); |
||||||
|
box-shadow: 0 0 2px 2px transparentize($bg-color, 0.7); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button { |
||||||
|
@include button-theme('light'); |
||||||
|
} |
||||||
|
|
||||||
|
.dark .button { |
||||||
|
@include button-theme('dark'); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,35 @@ |
|||||||
|
@import "../variables/colors"; |
||||||
|
|
||||||
|
// COLORS |
||||||
|
|
||||||
|
//@each $key, $color in $colors-all { |
||||||
|
// .fg-#{$key} {color: $color} |
||||||
|
// .bg-#{$key} {background-color: $color} |
||||||
|
//} |
||||||
|
|
||||||
|
// TRANSPARENT COLORS |
||||||
|
|
||||||
|
//@each $key, $color in $colors-transparent { |
||||||
|
// @for $i from 0 through 10 { |
||||||
|
// .fg-#{$key}-transparent-#{$i*10} {color: $color} |
||||||
|
// .bg-#{$key}-transparent-#{$i*10} {background-color: $color} |
||||||
|
// } |
||||||
|
//} |
||||||
|
|
||||||
|
// LIGHT COLORS |
||||||
|
|
||||||
|
//@each $key, $color in $colors-light { |
||||||
|
// @for $i from 0 through 10 { |
||||||
|
// .fg-#{$key}-light-#{$i*10} {color: $color} |
||||||
|
// .bg-#{$key}-light-#{$i*10} {background-color: $color} |
||||||
|
// } |
||||||
|
//} |
||||||
|
|
||||||
|
// DARK COLORS |
||||||
|
|
||||||
|
//@each $key, $color in $colors-dark { |
||||||
|
// @for $i from 0 through 10 { |
||||||
|
// .fg-#{$key}-dark-#{$i*10} {color: $color} |
||||||
|
// .bg-#{$key}-dark-#{$i*10} {background-color: $color} |
||||||
|
// } |
||||||
|
//} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
@import "../variables/colors"; |
||||||
|
|
||||||
|
.form-checkbox { |
||||||
|
position: absolute; |
||||||
|
z-index: -1; |
||||||
|
opacity: 0; |
||||||
|
&+label { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
user-select: none; |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
width: 1em; |
||||||
|
height: 1em; |
||||||
|
flex-shrink: 0; |
||||||
|
flex-grow: 0; |
||||||
|
border: 1px solid map-get($colors-light, 'gray-20'); |
||||||
|
border-radius: 0.25em; |
||||||
|
margin-right: 0.5em; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center center; |
||||||
|
background-size: 50% 50%; |
||||||
|
transition: border 0.3s; |
||||||
|
} |
||||||
|
} |
||||||
|
&:not(:disabled) { |
||||||
|
&:not(:checked)+label:hover::before { |
||||||
|
border-color: map-get($colors-light, 'blue-0'); |
||||||
|
} |
||||||
|
&:active+label::before { |
||||||
|
/* стили для активного чекбокса (при нажатии на него) */ |
||||||
|
background-color: #b3d7ff; |
||||||
|
border-color: #b3d7ff; |
||||||
|
} |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
&+label::before, |
||||||
|
&:not(:checked)+label::before { |
||||||
|
/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ |
||||||
|
box-shadow: 0 0 2px 2px map-get($colors-light, 'blue-50'); |
||||||
|
} |
||||||
|
} |
||||||
|
&:checked+label::before { |
||||||
|
/* стили для чекбокса, находящегося в состоянии checked */ |
||||||
|
$color: map-get($colors-dark, 'blue-60'); |
||||||
|
border-color: $color; |
||||||
|
background-color: $color; |
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); |
||||||
|
} |
||||||
|
&:disabled+label::before { |
||||||
|
/* стили для чекбокса, находящегося в состоянии disabled */ |
||||||
|
background-color: map-get($colors-light, 'gray-50'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.dark .form-field { |
||||||
|
.form-checkbox { |
||||||
|
&+label { |
||||||
|
&::before { |
||||||
|
border: 1px solid map-get($colors-dark, 'gray-60'); |
||||||
|
} |
||||||
|
} |
||||||
|
&:checked+label::before { |
||||||
|
$color: map-get($colors-dark, 'blue-60'); |
||||||
|
border: solid 1px $color; |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
&+label::before, |
||||||
|
&:not(:checked)+label::before { |
||||||
|
/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ |
||||||
|
$bg-color: mix(map-get($colors-dark, 'gray-0'), map-get($colors-light, 'blue-10'), 75%); |
||||||
|
box-shadow: 0 0 2px 2px $bg-color; |
||||||
|
} |
||||||
|
} |
||||||
|
&:disabled+label::before { |
||||||
|
/* стили для чекбокса, находящегося в состоянии disabled */ |
||||||
|
background-color: map-get($colors-dark, 'gray-50'); |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,177 @@ |
|||||||
|
@import "../variables/colors"; |
||||||
|
|
||||||
|
.form-field { |
||||||
|
&.disabled { |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
margin-bottom: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
&.required label:after { |
||||||
|
content: '*'; |
||||||
|
color: map-get($colors-dark, 'red-60'); |
||||||
|
margin-left: 3px; |
||||||
|
} |
||||||
|
&.error .form-error { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
label { |
||||||
|
display: block; |
||||||
|
margin-bottom: 5px; |
||||||
|
margin-left: 2px; |
||||||
|
font-size: 0.9em; |
||||||
|
} |
||||||
|
.form-hint { |
||||||
|
font-size: 0.8em; |
||||||
|
margin-top: 2px; |
||||||
|
color: map-get($colors-dark, 'gray-60'); |
||||||
|
margin-left: 2px; |
||||||
|
} |
||||||
|
.form-error { |
||||||
|
font-size: 0.8em; |
||||||
|
margin-top: 2px; |
||||||
|
color: map-get($colors-dark, 'red-60'); |
||||||
|
margin-left: 2px; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.input-group { |
||||||
|
position: relative; |
||||||
|
padding: 0; |
||||||
|
display: flex; |
||||||
|
border: solid 1px map-get($colors-light, 'gray-40'); |
||||||
|
border-radius: 3px; |
||||||
|
transition: border 0.3s linear, box-shadow 0.3s, background-color 0.3s linear; |
||||||
|
overflow: hidden; |
||||||
|
&:hover:has(.form-input:not(:disabled)) { |
||||||
|
border-color: map-get($colors-light, 'blue-0'); |
||||||
|
} |
||||||
|
&:has(.form-input:focus) { |
||||||
|
border-color: map-get($colors-light, 'blue-0'); |
||||||
|
box-shadow: 0 0 2px 2px map-get($colors-light, 'blue-50'); |
||||||
|
} |
||||||
|
&:has([type=radio]), |
||||||
|
&:has([type=checkbox]) { |
||||||
|
border: 0; |
||||||
|
label { |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
} |
||||||
|
&:has(.form-input:disabled) .form-button { |
||||||
|
opacity: 0.5; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
.form-input { |
||||||
|
flex: 1; |
||||||
|
border: 0; |
||||||
|
padding: 4px 8px; |
||||||
|
outline-width: 0; |
||||||
|
box-shadow: none; |
||||||
|
border-radius: 3px; |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
background-color: map-get($colors-light, 'white-0'); |
||||||
|
transition: border 0.1s linear, outline-width 0.1s linear; |
||||||
|
caret-color: map-get($colors-dark, 'blue-50'); |
||||||
|
&::placeholder { |
||||||
|
color: map-get($colors-light, 'gray-0'); |
||||||
|
} |
||||||
|
&[type="time"], |
||||||
|
&[type="datetime-local"], |
||||||
|
&[type="date"] { |
||||||
|
&::-webkit-calendar-picker-indicator { |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 4px; |
||||||
|
margin-right: 2px; |
||||||
|
opacity: 0.8; |
||||||
|
filter: invert(0.8); |
||||||
|
} |
||||||
|
&::-webkit-calendar-picker-indicator:hover { |
||||||
|
opacity: 1 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.form-text { |
||||||
|
padding: 3px 6px; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
.form-file { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
cursor: pointer; |
||||||
|
opacity: 0; |
||||||
|
&:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
} |
||||||
|
&:has(.form-file) .form-button { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
&.error { |
||||||
|
border-color: map-get($colors-light, 'red-0'); |
||||||
|
.input-group { |
||||||
|
border-color: map-get($colors-light, 'red-0'); |
||||||
|
.form-input { |
||||||
|
caret-color: map-get($colors-dark, 'red-50'); |
||||||
|
} |
||||||
|
&:has(.form-input:focus) { |
||||||
|
border-color: map-get($colors-light, 'red-0'); |
||||||
|
box-shadow: 0 0 2px 2px map-get($colors-light, 'red-50'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.dark .form-field { |
||||||
|
.input-group { |
||||||
|
background-color: map-get($colors-dark, 'gray-20'); |
||||||
|
border: solid 1px map-get($colors-dark, 'gray-20'); |
||||||
|
&:has(.form-radio), |
||||||
|
&:has(.form-checkbox) { |
||||||
|
border: solid 1px map-get($colors-dark, 'gray-10'); |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
.form-input:not(select) { |
||||||
|
color: map-get($colors-light, 'gray-50'); |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
.form-input:is(select){ |
||||||
|
color: map-get($colors-light, 'gray-50'); |
||||||
|
background-color: map-get($colors-dark, 'gray-20'); |
||||||
|
} |
||||||
|
.form-radio, |
||||||
|
.form-checkbox { |
||||||
|
border: solid 1px map-get($colors-dark, 'gray-60'); |
||||||
|
} |
||||||
|
&:hover:has(.form-input:not(:disabled)) { |
||||||
|
border-color: map-get($colors-light, 'blue-0'); |
||||||
|
} |
||||||
|
&:has(.form-input:focus) { |
||||||
|
$bg-color: mix(map-get($colors-dark, 'gray-0'), map-get($colors-dark, 'blue-10'), 85%); |
||||||
|
background-color: $bg-color; |
||||||
|
box-shadow: 0 0 2px 2px $bg-color; |
||||||
|
} |
||||||
|
} |
||||||
|
&.error { |
||||||
|
$bg-color: mix(map-get($colors-dark, 'gray-0'), map-get($colors-dark, 'red-10'), 85%); |
||||||
|
.form-error { |
||||||
|
color: map-get($colors-light, 'red-10'); |
||||||
|
} |
||||||
|
.input-group { |
||||||
|
border-color: map-get($colors-light, 'red-0'); |
||||||
|
&:has(.form-input:focus) { |
||||||
|
background-color: $bg-color; |
||||||
|
box-shadow: 0 0 2px 2px $bg-color; |
||||||
|
} |
||||||
|
&:has(.form-radio), |
||||||
|
&:has(.form-checkbox) { |
||||||
|
background-color: transparent; |
||||||
|
border-color: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
@import "../variables/colors"; |
||||||
|
|
||||||
|
/* для элемента input c type="radio" */ |
||||||
|
.form-radio { |
||||||
|
position: absolute; |
||||||
|
z-index: -1; |
||||||
|
opacity: 0; |
||||||
|
&+label { |
||||||
|
/* для элемента label связанного с .custom-radio */ |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
user-select: none; |
||||||
|
&::before { |
||||||
|
/* создание в label псевдоэлемента before со следующими стилями */ |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
width: 1em; |
||||||
|
height: 1em; |
||||||
|
flex-shrink: 0; |
||||||
|
flex-grow: 0; |
||||||
|
border: 1px solid map-get($colors-light, 'gray-20'); |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 0.5em; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center center; |
||||||
|
background-size: 50% 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
&:not(:disabled) { |
||||||
|
&:not(:checked)+label:hover::before { |
||||||
|
/* стили при наведении курсора на радио */ |
||||||
|
border-color: map-get($colors-light, 'blue-0'); |
||||||
|
} |
||||||
|
&:active+label::before { |
||||||
|
/* стили для активной радиокнопки (при нажатии на неё) */ |
||||||
|
background-color: #b3d7ff; |
||||||
|
border-color: #b3d7ff; |
||||||
|
} |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
&+label::before, |
||||||
|
&:not(:checked)+label::before { |
||||||
|
/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */ |
||||||
|
box-shadow: 0 0 2px 2px map-get($colors-light, 'blue-50'); |
||||||
|
} |
||||||
|
} |
||||||
|
&:checked+label::before { |
||||||
|
/* стили для радиокнопки, находящейся в состоянии checked */ |
||||||
|
$color: map-get($colors-dark, 'blue-60'); |
||||||
|
border-color: $color; |
||||||
|
background-color: $color; |
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); |
||||||
|
} |
||||||
|
&:disabled+label::before { |
||||||
|
/* стили для радиокнопки, находящейся в состоянии disabled */ |
||||||
|
background-color: map-get($colors-light, 'gray-50'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.dark .form-field { |
||||||
|
.form-radio { |
||||||
|
&+label { |
||||||
|
&::before { |
||||||
|
border: 1px solid map-get($colors-dark, 'gray-60'); |
||||||
|
} |
||||||
|
} |
||||||
|
&:checked+label::before { |
||||||
|
$color: map-get($colors-dark, 'blue-60'); |
||||||
|
border: solid 1px $color; |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
&+label::before, |
||||||
|
&:not(:checked)+label::before { |
||||||
|
/* стили для радио, находящегося в фокусе и не находящегося в состоянии checked */ |
||||||
|
$bg-color: mix(map-get($colors-dark, 'gray-0'), map-get($colors-light, 'blue-10'), 75%); |
||||||
|
box-shadow: 0 0 2px 2px $bg-color; |
||||||
|
} |
||||||
|
} |
||||||
|
&:disabled+label::before { |
||||||
|
/* стили для радио, находящегося в состоянии disabled */ |
||||||
|
background-color: map-get($colors-dark, 'gray-50'); |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
.row { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
list-style: none; |
||||||
|
flex-wrap: wrap; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
|
||||||
|
$one: calc(100 / 12 * 1%); |
||||||
|
|
||||||
|
@for $i from 1 through 12 { |
||||||
|
.col-#{$i} { |
||||||
|
flex-basis: calc($one * $i); |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* s1 smartphones, iPhone, portrait 480x320 phones */ |
||||||
|
@media (max-width:320px) { |
||||||
|
$one: calc(100 / 12 * 1%); |
||||||
|
@for $i from 1 through 12 { |
||||||
|
.col-s1-#{$i} { |
||||||
|
flex-basis: calc($one * $i) !important; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* s2 portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ |
||||||
|
@media (max-width:481px) { |
||||||
|
$one: calc(100 / 12 * 1%); |
||||||
|
@for $i from 1 through 12 { |
||||||
|
.col-s2-#{$i} { |
||||||
|
flex-basis: calc($one * $i) !important; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* s3 portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ |
||||||
|
@media (max-width:641px) { |
||||||
|
$one: calc(100 / 12 * 1%); |
||||||
|
@for $i from 1 through 12 { |
||||||
|
.col-s3-#{$i} { |
||||||
|
flex-basis: calc($one * $i) !important; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* s4 tablet, landscape iPad, lo-res laptops ands desktops */ |
||||||
|
@media (max-width:961px) { |
||||||
|
$one: calc(100 / 12 * 1%); |
||||||
|
@for $i from 1 through 12 { |
||||||
|
.col-s4-#{$i} { |
||||||
|
flex-basis: calc($one * $i) !important; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* s5 big landscape tablets, laptops, and desktops */ |
||||||
|
@media (max-width:1025px) { |
||||||
|
$one: calc(100 / 12 * 1%); |
||||||
|
@for $i from 1 through 12 { |
||||||
|
.col-s5-#{$i} { |
||||||
|
flex-basis: calc($one * $i) !important; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* s6 hi-res laptops and desktops */ |
||||||
|
@media (max-width:1281px) { |
||||||
|
$one: calc(100 / 12 * 1%); |
||||||
|
@for $i from 1 through 12 { |
||||||
|
.col-s6-#{$i} { |
||||||
|
flex-basis: calc($one * $i) !important; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
@import 'reset'; |
||||||
|
@import "variables/theme"; |
||||||
|
@import "variables/colors"; |
||||||
|
@import "computed/colors-list"; |
||||||
|
@import "computed/buttons"; |
||||||
|
@import "paddings"; |
||||||
|
@import "forms/form-field"; |
||||||
|
@import "forms/form-checkbox"; |
||||||
|
@import "forms/form-radio"; |
||||||
|
@import "grid"; |
||||||
|
@import "panel"; |
||||||
|
@import "typography"; |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
textarea, |
||||||
|
select, |
||||||
|
input { |
||||||
|
font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
// PADDINGS |
||||||
|
|
||||||
|
@for $i from 0 through 10 { |
||||||
|
.p-#{$i} {padding: #{$i*5}px;} |
||||||
|
|
||||||
|
.pt-#{$i} {padding-top: #{$i*5}px;} |
||||||
|
.pb-#{$i} {padding-bottom: #{$i*5}px;} |
||||||
|
.pl-#{$i} {padding-left: #{$i*5}px;} |
||||||
|
.pr-#{$i} {padding-right: #{$i*5}px;} |
||||||
|
} |
||||||
|
|
||||||
|
@for $i from 0 through 10 { |
||||||
|
.m-#{$i} {margin: #{$i*5}px;} |
||||||
|
|
||||||
|
.mt-#{$i} {margin-top: #{$i*5}px;} |
||||||
|
.mb-#{$i} {margin-bottom: #{$i*5}px;} |
||||||
|
.ml-#{$i} {margin-left: #{$i*5}px;} |
||||||
|
.mr-#{$i} {margin-right: #{$i*5}px;} |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
@import "variables/colors"; |
||||||
|
|
||||||
|
.panel { |
||||||
|
width: 100%; |
||||||
|
padding: 0; |
||||||
|
border-radius: 5px; |
||||||
|
overflow: hidden; |
||||||
|
background-color: map-get($colors-light, 'white-0'); |
||||||
|
border: solid 1px map-get($colors-light, 'gray-50'); |
||||||
|
.panel-header { |
||||||
|
padding:10px; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 1.1em; |
||||||
|
&.bordered { |
||||||
|
border-bottom: solid 1px map-get($colors-light, 'gray-50'); |
||||||
|
} |
||||||
|
} |
||||||
|
.panel-body { |
||||||
|
padding:10px; |
||||||
|
} |
||||||
|
.panel-footer { |
||||||
|
padding:10px; |
||||||
|
background-color: map-get($colors-transparent, 'black-10'); |
||||||
|
.bordered { |
||||||
|
border-top: solid 1px #000000; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.dark .panel { |
||||||
|
background-color: map-get($colors-dark, 'gray-10'); |
||||||
|
border: solid 1px map-get($colors-dark, 'gray-20'); |
||||||
|
.panel-header { |
||||||
|
&.bordered { |
||||||
|
border-bottom: solid 1px map-get($colors-dark, 'gray-20'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
// Add personal reset font-size. 1rem = 10px. |
||||||
|
html { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/* Preferred box-sizing value */ |
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: unset; |
||||||
|
color: unset; |
||||||
|
} |
||||||
|
|
||||||
|
/* Remove list styles (bullets/numbers) */ |
||||||
|
ol, ul, menu { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* For images to not be able to exceed their container */ |
||||||
|
img { |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
/* removes spacing between cells in tables */ |
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
/* reset default text opacity of input placeholder */ |
||||||
|
::placeholder { |
||||||
|
color: unset; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,23 @@ |
|||||||
|
h1 { |
||||||
|
font-size: 30px; |
||||||
|
font-weight: 500; |
||||||
|
margin: 28px 0 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 500; |
||||||
|
margin: 28px 0 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500; |
||||||
|
margin: 28px 0 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
h4, h5, h6 { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
margin: 28px 0 20px 0; |
||||||
|
} |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
$themes: ( |
||||||
|
dark: ( |
||||||
|
colors:( |
||||||
|
"red": #E88080, |
||||||
|
"yellow": #F2C97D, |
||||||
|
"green": #63E2B7, |
||||||
|
"blue": #70C0E8, |
||||||
|
"purple": #c78cdc, |
||||||
|
"orange": #ffa96c, |
||||||
|
"lime": #96e79a, |
||||||
|
"aqua": #8beef1, |
||||||
|
"black": #000000, |
||||||
|
"white": #FFFFFF, |
||||||
|
"gray": #A7A6A7, |
||||||
|
/*"brown": #8C7063, |
||||||
|
"peach": #FEABA0, |
||||||
|
"maroon": #FEABA0, |
||||||
|
"blue-gray": #8DA7AF, |
||||||
|
"pea-green": #48AF4F, |
||||||
|
"cyan": #14FFFE, |
||||||
|
"navy": #0F476B, |
||||||
|
"pink": #F16192, |
||||||
|
"mustard": #F16192, |
||||||
|
"coral": #FEABA0, |
||||||
|
"indigo": #FEABA0, |
||||||
|
"hot-pink": #FC60CB*/ |
||||||
|
) |
||||||
|
), |
||||||
|
light: ( |
||||||
|
colors:( |
||||||
|
"red": #E88080, |
||||||
|
"yellow": #F2C97D, |
||||||
|
"green": #63E2B7, |
||||||
|
"blue": #70C0E8, |
||||||
|
"purple": #c78cdc, |
||||||
|
"orange": #ffa96c, |
||||||
|
"lime": #96e79a, |
||||||
|
"aqua": #8beef1, |
||||||
|
"black": #000000, |
||||||
|
"white": #FFFFFF, |
||||||
|
"gray": #A7A6A7, |
||||||
|
/*"brown": #8C7063, |
||||||
|
"peach": #FEABA0, |
||||||
|
"maroon": #FEABA0, |
||||||
|
"gray": #A7A6A7, |
||||||
|
"blue-gray": #8DA7AF, |
||||||
|
"pea-green": #48AF4F, |
||||||
|
"cyan": #14FFFE, |
||||||
|
"navy": #0F476B, |
||||||
|
"pink": #F16192, |
||||||
|
"mustard": #F16192, |
||||||
|
"coral": #FEABA0, |
||||||
|
"indigo": #FEABA0, |
||||||
|
"hot-pink": #FC60CB*/ |
||||||
|
) |
||||||
|
) |
||||||
|
); |
||||||
|
|
||||||
|
$dark-colors: map-get(map-get($themes, 'dark'), 'colors'); |
||||||
|
$light-colors: map-get(map-get($themes, 'light'), 'colors'); |
||||||
|
|
||||||
|
// ALL COLORS |
||||||
|
$colors-all: (); |
||||||
|
@each $key, $color in $dark-colors { |
||||||
|
$colors-all: map-merge($colors-all, ('dark-'+$key: $color)); |
||||||
|
} |
||||||
|
@each $key, $color in $light-colors { |
||||||
|
$colors-all: map-merge($colors-all, ($key: $color)); |
||||||
|
} |
||||||
|
|
||||||
|
// TRANSPARENT COLORS |
||||||
|
$colors-transparent: (); |
||||||
|
@each $key, $color in $dark-colors { |
||||||
|
@for $i from 0 through 10 { |
||||||
|
$num: 10-$i; |
||||||
|
$percent: calc($num / 10); |
||||||
|
$colors-transparent: map-merge($colors-transparent, ('dark-'+$key+'-'+($i*10): transparentize($color, $percent))); |
||||||
|
} |
||||||
|
} |
||||||
|
@each $key, $color in $light-colors { |
||||||
|
@for $i from 0 through 10 { |
||||||
|
$num: 10-$i; |
||||||
|
$percent: calc($num / 10); |
||||||
|
$colors-transparent: map-merge($colors-transparent, ($key+'-'+($i*10): transparentize($color, $percent))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// LIGHT COLORS |
||||||
|
|
||||||
|
$colors-light: (); |
||||||
|
@each $key, $color in $dark-colors { |
||||||
|
@for $i from 0 through 10 { |
||||||
|
$num: $i; |
||||||
|
$percent: calc($num * 5); |
||||||
|
$colors-light: map-merge($colors-light, ('dark-'+$key+'-'+($i*10): lighten($color, $percent))); |
||||||
|
} |
||||||
|
} |
||||||
|
@each $key, $color in $light-colors { |
||||||
|
@for $i from 0 through 10 { |
||||||
|
$num: $i; |
||||||
|
$percent: calc($num * 5); |
||||||
|
$colors-light: map-merge($colors-light, ($key+'-'+($i*10): lighten($color, $percent))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// DARK COLORS |
||||||
|
|
||||||
|
$colors-dark: (); |
||||||
|
@each $key, $color in $dark-colors { |
||||||
|
@for $i from 0 through 10 { |
||||||
|
$num: 10-$i; |
||||||
|
$percent: calc($num * 5); |
||||||
|
$colors-dark: map-merge($colors-dark, ('dark-'+$key+'-'+($i*10): darken($color, $percent))); |
||||||
|
} |
||||||
|
} |
||||||
|
@each $key, $color in $light-colors { |
||||||
|
@for $i from 0 through 10 { |
||||||
|
$num: 10-$i; |
||||||
|
$percent: calc($num * 5); |
||||||
|
$colors-dark: map-merge($colors-dark, ($key+'-'+($i*10): darken($color, $percent))); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
@import "colors"; |
||||||
|
|
||||||
|
.dark { |
||||||
|
background-color: map-get($colors-dark, 'gray-0'); |
||||||
|
color: map-get($colors-light, 'gray-20'); |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
{ |
||||||
|
"fixturesFolder": "tests/cypress/fixtures", |
||||||
|
"integrationFolder": "tests/cypress/integration", |
||||||
|
"pluginsFile": "tests/cypress/plugins/index.js", |
||||||
|
"screenshotsFolder": "tests/cypress/screenshots", |
||||||
|
"videosFolder": "tests/cypress/videos", |
||||||
|
"supportFile": "tests/cypress/support/index.js" |
||||||
|
} |
||||||
@ -0,0 +1,760 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="ru"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>Starter Kit with Vite</title> |
||||||
|
<link rel="stylesheet" href="assets/scss/index.scss"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h1>Zertex Style</h1> |
||||||
|
|
||||||
|
<button class="button button-red button-toggle">Кнопки</button> |
||||||
|
<button class="button button-blue button-forms-text-inputs-toggle">Формы:строка</button> |
||||||
|
<button class="button button-blue button-forms-select-inputs-toggle">Формы:выбор</button> |
||||||
|
<button class="button button-blue button-forms-checkbox-toggle">Формы:check</button> |
||||||
|
<button class="button button-blue button-forms-radio-toggle">Формы:radio</button> |
||||||
|
<hr> |
||||||
|
<button class="button button-blue button-forms-color-toggle">Формы:цвет</button> |
||||||
|
<button class="button button-blue button-forms-textarea-toggle">Формы:textarea</button> |
||||||
|
<button class="button button-blue button-forms-time-toggle">Формы:время</button> |
||||||
|
<button class="button button-blue button-forms-file-toggle">Формы:файл</button> |
||||||
|
<hr> |
||||||
|
<button class="button button-blue button-forms-num-toggle">Формы:номер</button> |
||||||
|
<button class="button button-green button-panels-toggle">Формы:панель</button> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="forms p-2"> |
||||||
|
|
||||||
|
<div class="forms-text-inputs" style="display: none"> |
||||||
|
<div class="row dark"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field error required"> |
||||||
|
<label for="f8">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<div class="form-text">Цена</div> |
||||||
|
<input id="f8" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
<div class="form-text">руб.</div> |
||||||
|
</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="f9">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<div class="form-text">Цена</div> |
||||||
|
<input id="f9" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
<div class="form-text">руб.</div> |
||||||
|
</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<hr> |
||||||
|
<div class="row dark"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field error required"> |
||||||
|
<label for="f6">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="f6" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="f7">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="f7" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<hr> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="f1">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="f1" type="text" placeholder="Пример текста" class="form-input" disabled> |
||||||
|
<div class="form-text">руб.</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="f2">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="f2" type="text" placeholder="Пример текста" class="form-input" disabled> |
||||||
|
<div class="form-text">руб.</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<hr> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field error required"> |
||||||
|
<label for="f4">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="f4" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
<div class="form-text">руб.</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="f3">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="f3" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
<div class="form-text">руб.</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<hr> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field error required"> |
||||||
|
<label for="q1">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="q1" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
<div class="form-button button button-blue">руб.</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="q2">Название поля</label> |
||||||
|
|
||||||
|
<div class="input-group"> |
||||||
|
<input id="q2" type="text" placeholder="Пример текста" class="form-input" disabled> |
||||||
|
<div class="form-button button button-blue">руб.</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-select-inputs" style="display: none"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field error required"> |
||||||
|
<label for="s10">Название поля</label> |
||||||
|
<div class="input-group"> |
||||||
|
<select id="s10" class="form-input"> |
||||||
|
<option value="1">Первое значение</option> |
||||||
|
<option value="2">Второе значение</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field"> |
||||||
|
<label for="s11">Название поля</label> |
||||||
|
<div class="input-group"> |
||||||
|
<select id="s11" class="form-input"> |
||||||
|
<option value="1">Первое значение</option> |
||||||
|
<option value="2">Второе значение</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="row dark"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field error required"> |
||||||
|
<label for="s1">Название поля</label> |
||||||
|
<div class="input-group"> |
||||||
|
<select id="s1" class="form-input"> |
||||||
|
<option value="1">Первое значение</option> |
||||||
|
<option value="2">Второе значение</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field disabled"> |
||||||
|
<label for="s2">Название поля 2</label> |
||||||
|
<div class="input-group"> |
||||||
|
<select id="s2" class="form-input"> |
||||||
|
<option value="1">Первое значение</option> |
||||||
|
<option value="2">Второе значение</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-checkbox" style="display: none"> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
|
||||||
|
<div class="form-field required error"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="c1" type="checkbox" class="form-checkbox"> <label for="c1">Название поля</label> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
|
||||||
|
<div class="form-field required error"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="c2" type="checkbox" class="form-checkbox"> <label for="c2">Название поля</label> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
|
||||||
|
<div class="form-field required error"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="c3" type="checkbox" class="form-checkbox" disabled> <label for="c3">Название поля</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
|
||||||
|
<div class="form-field required error"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="c4" type="checkbox" class="form-checkbox" disabled> <label for="c4">Название поля</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-radio" style="display: none"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
|
||||||
|
<div class="form-field required error"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="r1" name="rrr" type="radio" class="form-radio"> <label for="r1">Название поля</label> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
|
||||||
|
<div class="form-field required error"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="r2" name="rrr" type="radio" class="form-radio"> <label for="r2">Название поля</label> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-color mb-2" style="display: none"> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field"> |
||||||
|
<label for="c5">Укажите цвет</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="c5" type="color" class="form-input"> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required error"> |
||||||
|
<label for="c6">Укажите цвет</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="c6" type="color" class="form-input"> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-textarea mb-2" style="display: none"> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="t1">Сообщение</label> |
||||||
|
<div class="input-group"> |
||||||
|
<textarea id="t1" cols="30" rows="5" class="form-input" placeholder="Пример"></textarea> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="t2">Сообщение</label> |
||||||
|
<div class="input-group"> |
||||||
|
<textarea id="t2" cols="30" rows="5" class="form-input" placeholder="Пример"></textarea> |
||||||
|
</div> |
||||||
|
<div class="form-hint">Подсказка к полю</div> |
||||||
|
<div class="form-error">Это поле обязательно к заполнению</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-time mb-2" style="display: none"> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field"> |
||||||
|
<label for="d1">Дата</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="d1" type="date" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="d2">Дата</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="d2" type="date" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field"> |
||||||
|
<label for="d3">Дата</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="d3" type="datetime-local" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="d4">Дата</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="d4" type="datetime-local" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field"> |
||||||
|
<label for="d5">Дата</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="d5" type="time" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="d6">Дата</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="d6" type="time" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-file mb-2" style="display: none"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field"> |
||||||
|
<label for="ff1">Укажите файл</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="ff1" type="file" class="form-input form-file"> |
||||||
|
<div class="form-button button button-blue">Выбрать файл...</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="ff2">Укажите файл</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="ff2" type="file" class="form-input form-file"> |
||||||
|
<div class="form-button button button-blue">Выбрать файл...</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="forms-num mb-2" style="display: none"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="form-field"> |
||||||
|
<label for="n1">Укажите номер</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="n1" type="number" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="form-field required"> |
||||||
|
<label for="n2">Укажите номер</label> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="n2" type="number" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="panels mb-2" style="display: none"> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-6"> |
||||||
|
<div class="panel panel-blue"> |
||||||
|
<div class="panel-header bordered"> |
||||||
|
Заголовок панели |
||||||
|
</div> |
||||||
|
<div class="panel-body"> |
||||||
|
А ещё ключевые особенности структуры проекта призывают нас к новым свершениям, которые, в свою очередь, должны быть обнародованы. |
||||||
|
</div> |
||||||
|
<div class="panel-footer"> |
||||||
|
Подвал панели |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-6 dark"> |
||||||
|
<div class="panel panel-blue"> |
||||||
|
<div class="panel-header bordered"> |
||||||
|
Заголовок панели |
||||||
|
</div> |
||||||
|
<div class="panel-body"> |
||||||
|
А ещё ключевые особенности структуры проекта призывают нас к новым свершениям, которые, в свою очередь, должны быть обнародованы. |
||||||
|
|
||||||
|
<div class="form-field mt-2"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="dd1" type="text" placeholder="Пример текста" class="form-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-field required"> |
||||||
|
<div class="input-group"> |
||||||
|
<input id="cc2" type="checkbox" class="form-checkbox"> <label for="cc2">Название поля</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panel-footer"> |
||||||
|
Подвал панели |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="typo mb-2"> |
||||||
|
<h1>H1 Header</h1> |
||||||
|
<h2>H2 Header</h2> |
||||||
|
<h3>H3 Header</h3> |
||||||
|
<h4>H4 Header</h4> |
||||||
|
<h5>H5 Header</h5> |
||||||
|
<h6>H6 Header</h6> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<input type="range"> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="buttons" style="display: none;"> |
||||||
|
<div class="p-2"> |
||||||
|
<div class="button button-red">Red</div> |
||||||
|
<div class="button button-yellow">Yellow</div> |
||||||
|
<div class="button button-green">Green</div> |
||||||
|
<div class="button button-blue">Blue</div> |
||||||
|
<div class="button button-purple">Purple</div> |
||||||
|
<div class="button button-orange">Orange</div> |
||||||
|
<div class="button button-lime">Lime</div> |
||||||
|
<div class="button button-aqua">Aqua</div> |
||||||
|
<div class="button button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="p-2"> |
||||||
|
<div class="button button-red disabled">Red</div> |
||||||
|
<div class="button button-yellow disabled">Yellow</div> |
||||||
|
<div class="button button-green disabled">Green</div> |
||||||
|
<div class="button button-blue disabled">Blue</div> |
||||||
|
<div class="button button-purple disabled">Purple</div> |
||||||
|
<div class="button button-orange disabled">Orange</div> |
||||||
|
<div class="button button-lime disabled">Lime</div> |
||||||
|
<div class="button button-aqua disabled">Aqua</div> |
||||||
|
<div class="button button-gray disabled">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="dark p-2"> |
||||||
|
<div class="button button-red">Red</div> |
||||||
|
<div class="button button-yellow">Yellow</div> |
||||||
|
<div class="button button-green">Green</div> |
||||||
|
<div class="button button-blue">Blue</div> |
||||||
|
<div class="button button-purple">Purple</div> |
||||||
|
<div class="button button-orange">Orange</div> |
||||||
|
<div class="button button-lime">Lime</div> |
||||||
|
<div class="button button-aqua">Aqua</div> |
||||||
|
<div class="button button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="dark p-2"> |
||||||
|
<div class="button button-red disabled">Red</div> |
||||||
|
<div class="button button-yellow disabled">Yellow</div> |
||||||
|
<div class="button button-green disabled">Green</div> |
||||||
|
<div class="button button-blue disabled">Blue</div> |
||||||
|
<div class="button button-purple disabled">Purple</div> |
||||||
|
<div class="button button-orange disabled">Orange</div> |
||||||
|
<div class="button button-lime disabled">Lime</div> |
||||||
|
<div class="button button-aqua disabled">Aqua</div> |
||||||
|
<div class="button button-gray disabled">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="p-2"> |
||||||
|
<div class="button button-exp button-red">Red</div> |
||||||
|
<div class="button button-exp button-yellow">Yellow</div> |
||||||
|
<div class="button button-exp button-green">Green</div> |
||||||
|
<div class="button button-exp button-blue">Blue</div> |
||||||
|
<div class="button button-exp button-purple">Purple</div> |
||||||
|
<div class="button button-exp button-orange">Orange</div> |
||||||
|
<div class="button button-exp button-lime">Lime</div> |
||||||
|
<div class="button button-exp button-aqua">Aqua</div> |
||||||
|
<div class="button button-exo button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="p-2"> |
||||||
|
<div class="button button-exp button-red disabled">Red</div> |
||||||
|
<div class="button button-exp button-yellow disabled">Yellow</div> |
||||||
|
<div class="button button-exp button-green disabled">Green</div> |
||||||
|
<div class="button button-exp button-blue disabled">Blue</div> |
||||||
|
<div class="button button-exp button-purple disabled">Purple</div> |
||||||
|
<div class="button button-exp button-orange disabled">Orange</div> |
||||||
|
<div class="button button-exp button-lime disabled">Lime</div> |
||||||
|
<div class="button button-exp button-aqua disabled">Aqua</div> |
||||||
|
<div class="button button-exo button-gray disabled">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="dark p-2"> |
||||||
|
<div class="button button-exp button-red">Red</div> |
||||||
|
<div class="button button-exp button-yellow">Yellow</div> |
||||||
|
<div class="button button-exp button-green">Green</div> |
||||||
|
<div class="button button-exp button-blue">Blue</div> |
||||||
|
<div class="button button-exp button-purple">Purple</div> |
||||||
|
<div class="button button-exp button-orange">Orange</div> |
||||||
|
<div class="button button-exp button-lime">Lime</div> |
||||||
|
<div class="button button-exp button-aqua">Aqua</div> |
||||||
|
<div class="button button-exp button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="p-2"> |
||||||
|
<div class="button button-plate button-red">Red</div> |
||||||
|
<div class="button button-plate button-yellow">Yellow</div> |
||||||
|
<div class="button button-plate button-green">Green</div> |
||||||
|
<div class="button button-plate button-blue">Blue</div> |
||||||
|
<div class="button button-plate button-purple">Purple</div> |
||||||
|
<div class="button button-plate button-orange">Orange</div> |
||||||
|
<div class="button button-plate button-lime">Lime</div> |
||||||
|
<div class="button button-plate button-aqua">Aqua</div> |
||||||
|
<div class="button button-plate button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="dark p-2"> |
||||||
|
<div class="button button-plate button-red">Red</div> |
||||||
|
<div class="button button-plate button-yellow">Yellow</div> |
||||||
|
<div class="button button-plate button-green">Green</div> |
||||||
|
<div class="button button-plate button-blue">Blue</div> |
||||||
|
<div class="button button-plate button-purple">Purple</div> |
||||||
|
<div class="button button-plate button-orange">Orange</div> |
||||||
|
<div class="button button-plate button-lime">Lime</div> |
||||||
|
<div class="button button-plate button-aqua">Aqua</div> |
||||||
|
<div class="button button-plate button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="p-2"> |
||||||
|
<div class="button button-rounded button-plate button-red">Red</div> |
||||||
|
<div class="button button-rounded button-plate button-yellow">Yellow</div> |
||||||
|
<div class="button button-rounded button-plate button-green">Green</div> |
||||||
|
<div class="button button-rounded button-plate button-blue">Blue</div> |
||||||
|
<div class="button button-rounded button-plate button-purple">Purple</div> |
||||||
|
<div class="button button-rounded button-plate button-orange">Orange</div> |
||||||
|
<div class="button button-rounded button-plate button-lime">Lime</div> |
||||||
|
<div class="button button-rounded button-plate button-aqua">Aqua</div> |
||||||
|
<div class="button button-rounded button-plate button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="dark p-2"> |
||||||
|
<div class="button button-rounded button-plate button-red">Red</div> |
||||||
|
<div class="button button-rounded button-plate button-yellow">Yellow</div> |
||||||
|
<div class="button button-rounded button-plate button-green">Green</div> |
||||||
|
<div class="button button-rounded button-plate button-blue">Blue</div> |
||||||
|
<div class="button button-rounded button-plate button-purple">Purple</div> |
||||||
|
<div class="button button-rounded button-plate button-orange">Orange</div> |
||||||
|
<div class="button button-rounded button-plate button-lime">Lime</div> |
||||||
|
<div class="button button-rounded button-plate button-aqua">Aqua</div> |
||||||
|
<div class="button button-rounded button-plate button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<hr> |
||||||
|
|
||||||
|
<div class="p-2"> |
||||||
|
<div class="button button-shade button-red">Red</div> |
||||||
|
<div class="button button-shade button-yellow">Yellow</div> |
||||||
|
<div class="button button-shade button-green">Green</div> |
||||||
|
<div class="button button-shade button-blue">Blue</div> |
||||||
|
<div class="button button-shade button-purple">Purple</div> |
||||||
|
<div class="button button-shade button-orange">Orange</div> |
||||||
|
<div class="button button-shade button-lime">Lime</div> |
||||||
|
<div class="button button-shade button-aqua">Aqua</div> |
||||||
|
<div class="button button-shade button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="dark p-2"> |
||||||
|
<div class="button button-shade button-cut button-red">Red</div> |
||||||
|
<div class="button button-shade button-cut button-yellow">Yellow</div> |
||||||
|
<div class="button button-shade button-cut button-green">Green</div> |
||||||
|
<div class="button button-shade button-cut button-blue">Blue</div> |
||||||
|
<div class="button button-shade button-cut button-purple">Purple</div> |
||||||
|
<div class="button button-shade button-cut button-orange">Orange</div> |
||||||
|
<div class="button button-shade button-cut button-lime">Lime</div> |
||||||
|
<div class="button button-shade button-cut button-aqua">Aqua</div> |
||||||
|
<div class="button button-shade button-cut button-gray">Gray</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> |
||||||
|
<script type="module" src="./assets/js/index.js"></script> |
||||||
|
|
||||||
|
<script> |
||||||
|
$('.button-toggle').on('click', () => { |
||||||
|
$('.buttons').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-text-inputs-toggle').on('click', () => { |
||||||
|
$('.forms-text-inputs').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-select-inputs-toggle').on('click', () => { |
||||||
|
$('.forms-select-inputs').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-checkbox-toggle').on('click', () => { |
||||||
|
$('.forms-checkbox').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-color-toggle').on('click', () => { |
||||||
|
$('.forms-color').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-textarea-toggle').on('click', () => { |
||||||
|
$('.forms-textarea').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-time-toggle').on('click', () => { |
||||||
|
$('.forms-time').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-radio-toggle').on('click', () => { |
||||||
|
$('.forms-radio').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-file-toggle').on('click', () => { |
||||||
|
$('.forms-file').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-forms-num-toggle').on('click', () => { |
||||||
|
$('.forms-num').toggle(); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.button-panels-toggle').on('click', () => { |
||||||
|
$('.panels').toggle(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
@ -0,0 +1,29 @@ |
|||||||
|
{ |
||||||
|
"name": "zertex-style", |
||||||
|
"version": "1.0.1", |
||||||
|
"author": "Egor Oldenburger <error-202@mail.ru>", |
||||||
|
"license": "MIT", |
||||||
|
"description": "CSS library", |
||||||
|
"keywords": [ |
||||||
|
"vite", |
||||||
|
"sass", |
||||||
|
"scss", |
||||||
|
"js" |
||||||
|
], |
||||||
|
"bin": "./bin/cli.js", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "vite build", |
||||||
|
"preview": "vite preview", |
||||||
|
"cypress": "./node_modules/.bin/cypress open" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"cypress": "^10.10.0", |
||||||
|
"sass": "^1.55.0", |
||||||
|
"vite": "^3.1.8" |
||||||
|
}, |
||||||
|
"repository": { |
||||||
|
"type": "git", |
||||||
|
"url": "https://github.com/TefDesign/starterkit-vite-scss" |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@ |
|||||||
|
{ |
||||||
|
"name": "Using fixtures to represent data", |
||||||
|
"email": "hello@cypress.io", |
||||||
|
"body": "Fixtures are a great way to mock data for responses to routes" |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
describe('Starterkit Sample', () => { |
||||||
|
|
||||||
|
//Done
|
||||||
|
it('The title exist', () => { |
||||||
|
cy.visit('http://localhost:3000') |
||||||
|
cy.get('h1').contains('Hello my friend !!!') |
||||||
|
}) |
||||||
|
|
||||||
|
// Error
|
||||||
|
it('The title does not exist', () => { |
||||||
|
cy.visit('http://localhost:3000') |
||||||
|
cy.get('h1').contains('WTF !!!').should('not.exist') |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
/// <reference types="cypress" />
|
||||||
|
// ***********************************************************
|
||||||
|
// This example plugins/index.js can be used to load plugins
|
||||||
|
//
|
||||||
|
// You can change the location of this file or turn off loading
|
||||||
|
// the plugins file with the 'pluginsFile' configuration option.
|
||||||
|
//
|
||||||
|
// You can read more here:
|
||||||
|
// https://on.cypress.io/plugins-guide
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// This function is called when a project is opened or re-opened (e.g. due to
|
||||||
|
// the project's config changing)
|
||||||
|
|
||||||
|
/** |
||||||
|
* @type {Cypress.PluginConfig} |
||||||
|
*/ |
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
module.exports = (on, config) => { |
||||||
|
// `on` is used to hook into various events Cypress emits
|
||||||
|
// `config` is the resolved Cypress config
|
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
// ***********************************************
|
||||||
|
// This example commands.js shows you how to
|
||||||
|
// create various custom commands and overwrite
|
||||||
|
// existing commands.
|
||||||
|
//
|
||||||
|
// For more comprehensive examples of custom
|
||||||
|
// commands please read more here:
|
||||||
|
// https://on.cypress.io/custom-commands
|
||||||
|
// ***********************************************
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a parent command --
|
||||||
|
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a child command --
|
||||||
|
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a dual command --
|
||||||
|
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This will overwrite an existing command --
|
||||||
|
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||||
@ -0,0 +1,20 @@ |
|||||||
|
// ***********************************************************
|
||||||
|
// This example support/index.js is processed and
|
||||||
|
// loaded automatically before your test files.
|
||||||
|
//
|
||||||
|
// This is a great place to put global configuration and
|
||||||
|
// behavior that modifies Cypress.
|
||||||
|
//
|
||||||
|
// You can change the location of this file or turn off
|
||||||
|
// automatically serving support files with the
|
||||||
|
// 'supportFile' configuration option.
|
||||||
|
//
|
||||||
|
// You can read more here:
|
||||||
|
// https://on.cypress.io/configuration
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// Import commands.js using ES2015 syntax:
|
||||||
|
import './commands' |
||||||
|
|
||||||
|
// Alternatively you can use CommonJS syntax:
|
||||||
|
// require('./commands')
|
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { defineConfig } from "vite"; |
||||||
|
|
||||||
|
export default defineConfig ({ |
||||||
|
base: './', |
||||||
|
build: { |
||||||
|
outDir: "public", |
||||||
|
rollupOptions: { |
||||||
|
output: { |
||||||
|
manualChunks: false, |
||||||
|
inlineDynamicImports: true, |
||||||
|
entryFileNames: 'zx.style.js', |
||||||
|
assetFileNames: 'zx.style.[ext]', |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
Loading…
Reference in new issue