Zertex
/
Style
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Простая CSS библиотека элементов для личных проектов
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
1 Tag
117 KiB
 
 
 
Tree: c390de39c5
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c390de39c5'
${ noResults }
Style/index.html

760 lines
30 KiB
Raw Blame History

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