Zertex
/
Style
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

Init

tags/zxstyle-1.0.0 zxstyle-1.0.0
Error202 2 years ago
commit
9fca496070
29 changed files with 6188 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      .gitignore
  2. 21
      LICENSE
  3. 13
      README.md
  4. 1
      assets/js/index.js
  5. 98
      assets/scss/computed/buttons.scss
  6. 35
      assets/scss/computed/colors-list.scss
  7. 82
      assets/scss/forms/form-checkbox.scss
  8. 177
      assets/scss/forms/form-field.scss
  9. 85
      assets/scss/forms/form-radio.scss
  10. 90
      assets/scss/grid.scss
  11. 24
      assets/scss/index.scss
  12. 19
      assets/scss/paddings.scss
  13. 38
      assets/scss/panel.scss
  14. 38
      assets/scss/reset.scss
  15. 23
      assets/scss/typography.scss
  16. 122
      assets/scss/variables/colors.scss
  17. 6
      assets/scss/variables/theme.scss
  18. 8
      cypress.json
  19. 15
      favicon.svg
  20. 760
      index.html
  21. 4374
      package-lock.json
  22. 29
      package.json
  23. 1
      public/zx.style.css
  24. 5
      tests/cypress/fixtures/example.json
  25. 15
      tests/cypress/integration/starterkit_sample.js
  26. 22
      tests/cypress/plugins/index.js
  27. 25
      tests/cypress/support/commands.js
  28. 20
      tests/cypress/support/index.js
  29. 16
      vite.config.js

26
.gitignore vendored
Unescape View File

@ -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?

21
LICENSE
Unescape View File

@ -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.

13
README.md
Unescape View File

@ -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

1
assets/js/index.js
Unescape View File

@ -0,0 +1 @@
import "../scss/index.scss";

98
assets/scss/computed/buttons.scss
Unescape View File

@ -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');
}

35
assets/scss/computed/colors-list.scss
Unescape View File

@ -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}
// }
//}

82
assets/scss/forms/form-checkbox.scss
Unescape View File

@ -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;
}
}
}

177
assets/scss/forms/form-field.scss
Unescape View File

@ -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;
}
}
}
}

85
assets/scss/forms/form-radio.scss
Unescape View File

@ -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;
}
}
}

90
assets/scss/grid.scss
Unescape View File

@ -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;
}
}
}

24
assets/scss/index.scss
Unescape View File

@ -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;
}

19
assets/scss/paddings.scss
Unescape View File

@ -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;}
}

38
assets/scss/panel.scss
Unescape View File

@ -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');
}
}
}

38
assets/scss/reset.scss
Unescape View File

@ -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;
}

23
assets/scss/typography.scss
Unescape View File

@ -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;
}

122
assets/scss/variables/colors.scss
Unescape View File

@ -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)));
}
}

6
assets/scss/variables/theme.scss
Unescape View File

@ -0,0 +1,6 @@
@import "colors";
.dark {
background-color: map-get($colors-dark, 'gray-0');
color: map-get($colors-light, 'gray-20');
}

8
cypress.json
Unescape View File

@ -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"
}

15
favicon.svg
Unescape View File

@ -0,0 +1,15 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

760
index.html
Unescape View File

@ -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>

4374
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
package.json
Unescape View File

@ -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"
}
}

1
public/zx.style.css
View File

File diff suppressed because one or more lines are too long

5
tests/cypress/fixtures/example.json
Unescape View File

@ -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"
}

15
tests/cypress/integration/starterkit_sample.js
Unescape View File

@ -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')
})
})

22
tests/cypress/plugins/index.js
Unescape View File

@ -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
}

25
tests/cypress/support/commands.js
Unescape View File

@ -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) => { ... })

20
tests/cypress/support/index.js
Unescape View File

@ -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')

16
vite.config.js
Unescape View File

@ -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]',
},
}
},
})
Write Preview
Loading…
Cancel
Save