typeable/octopod
1
0
Fork 0
mirror of https://github.com/typeable/octopod.git synced 2024-11-23 01:03:45 +03:00
Code Issues Projects Releases Wiki Activity

CSS for key/value tree (#165)

Browse Source 
* Code style

* keys and values

* collapse draft

* simplify collapse script

* collapse and row

* has changes

* clean up

* deployment

* editable tree
This commit is contained in:
Anton Shchukin 2022-03-25 20:14:54 +07:00 committed by GitHub
parent a38f856975
commit bfec3e41f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 2969 additions and 1690 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1854
octopod-css/development/layouts/index.html
View File

File diff suppressed because it is too large Load Diff

1841
octopod-css/development/layouts/staging.html
View File

File diff suppressed because it is too large Load Diff

3
octopod-css/development/markups/_action.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.action</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -104,6 +104,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_bar.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -53,6 +53,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_break.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.break</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
@ -76,6 +76,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>

3
octopod-css/development/markups/_button.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.button</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
@ -128,6 +128,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>

277
octopod-css/development/markups/_collapse.html Executable file
View File

@ -0,0 +1,277 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.collapse</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
<div style="width: 600px; margin: 0 auto;">
<br>
<br>
<br>
<br>
<h1>.collapse</h1>
<p>
Это функциональный блок. Кликаем в <b>.collapse__head</b>
-- раскрывается <b>.collapse__body</b>.
</p>
<p>
Дефолтная версия выглядит никак:
</p>
<br>
<br>
<div class="collapse">
<button class="collapse__head" type="button">
Шапка
</button>
<div class="collapse__body">
Тело
</div>
</div>
<br>
<br>
<br>
<p>
Оформление добавляем модификаторами-скинами (см. ниже).
</p>
<p>
Раскрываем <b>.collapse__body</b> вручную и так же добавляем <b>.collapse--expanded</b>.
</p>
<br>
<br>
<br>
<br>
<h2>.collapse--project</h2>
<p>
Внутри обычно используется <b>.row</b>
</p>
<div class="collapse collapse--project">
<button class="collapse__head" type="button">
travolutionary.mapping[1]
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-edited">name: </span><span class="value-edited">SSO_CLIENT_ID</span>
</div>
<div class="row">
<span class="key-default-pristine">key: </span><span class="value-pristine">clientId</span>
</div>
</div>
</div>
</div>
<p>
Можно вкладывать любое количество <b>.collapse</b> и <b>.row</b> друг в друга,
в любом порядке, в любых комбинациях. Ещё можно добавлять<br> класс <b>.collapse__head--has-changes</b>
</p>
<div class="collapse collapse--project">
<button class="collapse__head collapse__head--has-changes" type="button">
air
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-pristine">vaultEngineName: </span><span class="value-pristine">staging</span>
</div>
<div class="collapse collapse--project">
<button class="collapse__head collapse__head--has-changes" type="button">
vaultEnv
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-pristine">air-sso.engineOverride: </span><span class="value-pristine">staging</span>
</div>
<div class="collapse collapse--project">
<button class="collapse__head" type="button">
air-sso.mapping[0]
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-edited">name: </span><span class="value-edited">SSO_CLIENT_ID</span>
</div>
<div class="row">
<span class="key-default-pristine">key: </span><span class="value-pristine">clientId</span>
</div>
</div>
<div class="row">
<span class="key-default-edited">air-sso.mapping[1].name: </span><span class="value-edited">SSO_CLIENT_SECRET</span>
</div>
</div>
</div>
<div class="collapse collapse--project">
<button class="collapse__head collapse__head--has-changes" type="button">
travolutionary.mapping[0]
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-edited">name: </span><span class="value-edited">SSO_CLIENT_ID</span>
</div>
<div class="row">
<span class="key-default-pristine">key: </span><span class="value-pristine">clientId</span>
</div>
</div>
</div>
</div>
<div class="collapse collapse--project">
<button class="collapse__head collapse__head--has-changes" type="button">
travolutionary.mapping[1]
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-edited">name: </span><span class="value-edited">SSO_CLIENT_ID</span>
</div>
<div class="row">
<span class="key-default-pristine">key: </span><span class="value-pristine">clientId</span>
</div>
</div>
</div>
</div>
<div class="row">
<span class="key-default-edited">air-sso.mapping[1].name: </span><span class="value-edited">SSO_CLIENT_SECRET</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<span class="key-custom-edited">app_api_url: </span><span class="value-edited">http: //my-api.my-domain.com</span>
</div>
</div>
</div>
<div class="collapse collapse--project">
<button class="collapse__head" type="button">
sso
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-pristine">vaultEngineName: </span><span class="value-pristine">staging</span>
</div>
<div class="collapse collapse--project">
<button class="collapse__head" type="button">
vaultEnv
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-pristine">air-sso.engineOverride: </span><span class="value-pristine">staging</span>
</div>
<div class="collapse collapse--project">
<button class="collapse__head" type="button">
air-sso.mapping[0]
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-edited">name: </span><span class="value-edited">SSO_CLIENT_ID</span>
</div>
<div class="row">
<span class="key-default-pristine">key: </span><span class="value-pristine">clientId</span>
</div>
</div>
<div class="row">
<span class="key-default-edited">air-sso.mapping[1].name: </span><span class="value-edited">SSO_CLIENT_SECRET</span>
</div>
</div>
</div>
<div class="collapse collapse--project">
<button class="collapse__head" type="button">
travolutionary.mapping[0]
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-edited">name: </span><span class="value-edited">SSO_CLIENT_ID</span>
</div>
<div class="row">
<span class="key-default-pristine">key: </span><span class="value-pristine">clientId</span>
</div>
</div>
</div>
</div>
<div class="collapse collapse--project">
<button class="collapse__head" type="button">
travolutionary.mapping[1]
</button>
<div class="collapse__body">
<div class="collapse__inner">
<div class="row">
<span class="key-default-edited">name: </span><span class="value-edited">SSO_CLIENT_ID</span>
</div>
<div class="row">
<span class="key-default-pristine">key: </span><span class="value-pristine">clientId</span>
</div>
</div>
</div>
</div>
<div class="row">
<span class="key-default-edited">air-sso.mapping[1].name: </span><span class="value-edited">SSO_CLIENT_SECRET</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<span class="key-custom-edited">app_api_url: </span><span class="value-edited">http: //my-api.my-domain.com</span>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-- jQuery -->
<script src="../vendors/jquery/jquery-3.2.1.min.js"></script>
<!-- Outline.js -->
<script src="../vendors/outline/outline.js"></script>
<!-- Temp -->
<script src="../scripts/_expander.js"></script>
<script src="../scripts/_drop.js"></script>
<script src="../scripts/_sort.js"></script>
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_dash.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.dash</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
@ -121,6 +121,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>

3
octopod-css/development/markups/_drop.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.drop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -104,6 +104,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_expander.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.expander</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -88,6 +88,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_external.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.external</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -53,6 +53,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

37
octopod-css/development/markups/_input.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
@ -72,6 +72,40 @@
</div>
<br>
<br>
<br>
<h2>Выпадайка</h2>
<div class="input">
<input class="input__widget" type="text" placeholder="key" value="LiveSearch">
<ul class="input__dropdown">
<li class="input__suggest"><b>S</b>ECRET_PASSWORD</li>
<li class="input__suggest"><b>S</b>ECRET_INFO</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
<li class="input__suggest"><b>S</b>oviet Socialist Republics
</li>
</ul>
</div>
<br>
<br>
@ -102,6 +136,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>

274
octopod-css/development/markups/_keys-and-values.html Executable file
View File

@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Keys and values</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
<div style="width: 800px; margin: 0 auto;">
<br>
<br>
<br>
<br>
<h1>Keys and values</h1>
<span class="key-default-pristine">
air.vaultEngineName:
</span>
<br>
<br>
<br>
<h2>Классы</h2>
<div class="table">
<table>
<tbody>
<tr>
<td>
Ключ по умолчанию, значение не изменено:
</td>
<td>
<span class="key-default-pristine">key-default-pristine</span>
</td>
<td>
<span class="value-pristine">value-pristine</span>
</td>
</tr>
<tr>
<td>
Ключ по умолчанию, значение изменено:
</td>
<td>
<span class="key-default-edited">key-default-edited</span>
</td>
<td>
<span class="value-edited">value-edited</span>
</td>
</tr>
<tr>
<td>
Ключ кастомный, значение изменено:
</td>
<td>
<span class="key-custom-edited">key-custom-edited</span>
</td>
<td>
<span class="value-edited">value-edited</span>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<h2>Примеры</h2>
<div class="table">
<table>
<tbody>
<tr>
<td>
Ключ по умолчанию, значение не изменено:
</td>
<td>
<span class="key-default-pristine">air.vaultEngineName:</span>
</td>
<td>
<span class="value-pristine">staging</span>
</td>
</tr>
<tr>
<td>
Ключ по умолчанию, значение изменено:
</td>
<td>
<span class="key-default-edited">air.vaultEngineName:</span>
</td>
<td>
<span class="value-edited">staging</span>
</td>
</tr>
<tr>
<td>
Ключ кастомный, значение изменено:
</td>
<td>
<span class="key-custom-edited">app_api_url:</span>
</td>
<td>
<span class="value-edited">http://my-api.my-domain.com</span>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<p>
Для экономии узлов в DOM-дереве можно не создавать отдельную обёртку &lt;span&gt;...&lt;/span&gt;
а вешать эти классы прям на ячейки таблицы, или на любого другого родителя:
</p>
<div class="table">
<table>
<tbody>
<tr>
<td>
Ключ по умолчанию, значение не изменено:
</td>
<td class="key-default-pristine">
air.vaultEngineName:
</td>
<td class="value-pristine">
staging
</td>
</tr>
<tr>
<td>
Ключ по умолчанию, значение изменено:
</td>
<td class="key-default-edited">
air.vaultEngineName:
</td>
<td class="value-edited">
staging
</td>
</tr>
<tr>
<td>
Ключ кастомный, значение изменено:
</td>
<td class="key-custom-edited">
app_api_url:
</td>
<td class="value-edited">
http://my-api.my-domain.com
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<h2>
Запись в строку
</h2>
<p>
Прост пишем одно за другим, разделяем пробелом:
</p>
<div class="table">
<table>
<tbody>
<tr>
<td>
Ключ по умолчанию, значение не изменено:
</td>
<td>
<span class="key-default-pristine">air.vaultEngineName:</span> <span class="value-pristine">staging</span>
</td>
</tr>
<tr>
<td>
Ключ по умолчанию, значение изменено:
</td>
<td>
<span class="key-default-edited">air.vaultEngineName:</span> <span class="value-edited">staging</span>
</td>
</tr>
<tr>
<td>
Ключ кастомный, значение изменено:
</td>
<td>
<span class="key-custom-edited">app_api_url:</span> <span class="value-edited">http://my-api.my-domain.com</span>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<p>
Пробел можно положить не между тегами, а внутрь ключа, и тогда подчёркивания сомкнуться
</p>
<div class="table">
<table>
<tbody>
<tr>
<td>
Ключ по умолчанию, значение не изменено:
</td>
<td>
<span class="key-default-pristine">air.vaultEngineName: </span><span class="value-pristine">staging</span>
</td>
</tr>
<tr>
<td>
Ключ по умолчанию, значение изменено:
</td>
<td>
<span class="key-default-edited">air.vaultEngineName: </span><span class="value-edited">staging</span>
</td>
</tr>
<tr>
<td>
Ключ кастомный, значение изменено:
</td>
<td>
<span class="key-custom-edited">app_api_url: </span><span class="value-edited">http://my-api.my-domain.com</span>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-- jQuery -->
<script src="../vendors/jquery/jquery-3.2.1.min.js"></script>
<!-- Outline.js -->
<script src="../vendors/outline/outline.js"></script>
<!-- Temp -->
<script src="../scripts/_expander.js"></script>
<script src="../scripts/_drop.js"></script>
<script src="../scripts/_sort.js"></script>
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_listing.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.listing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -92,6 +92,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_loading.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.loading</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -128,6 +128,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_notification.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.notification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -80,6 +80,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_null.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.null</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -73,6 +73,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_spot.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.spot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -53,6 +53,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_status.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.status</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -75,6 +75,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

3
octopod-css/development/markups/_title.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>.title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
@ -52,6 +52,7 @@
<script src="../scripts/_data.js"></script>
<script src="../scripts/_popup.js"></script>
<script src="../scripts/_classic-popup.js"></script>
<script src="../scripts/_collapse.js"></script>
</body>
</html>

18
octopod-css/development/scripts/_collapse.js Normal file
View File

@ -0,0 +1,18 @@
(function($) {
var animationTime = 300;
$('.collapse__head').on('click', function () {
var $collapse = $(this).parent('.collapse');
if( ! $collapse.hasClass('collapse--expanded') ) {
$collapse.addClass('collapse--expanded');
$collapse.children('.collapse__body').slideDown(animationTime);
} else {
$collapse.children('.collapse__body').slideUp(animationTime);
$collapse.removeClass('collapse--expanded');
}
});
})(jQuery);

93
octopod-css/development/styles/_collapse.css Executable file
View File

@ -0,0 +1,93 @@
.collapse {
position: relative; /* для .collapse__clear */
}
.collapse__head {
position: relative;
padding: 0;
background-color: transparent;
border: none;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.collapse__body {
display: none;
}
/* Модификаторы: */
.collapse--project {
}
.collapse--project {
margin-top: 8px;
}
.collapse--project > .collapse__head {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: -24px;
padding: 0 9px 0 24px;
background-color: #F3F3F3;
font-weight: 300;
font-size: 16px;
line-height: 24px;
color: var(--dark-grey);
}
.collapse--project > .collapse__head--has-changes {
text-decoration: underline;
}
.collapse--project > .collapse__head:hover {
background-color: #E2E2E2;
color: var(--primary);
}
.collapse--project > .collapse__head::after {
content: "";
flex-shrink: 0;
position: absolute;
left: 5px;
top: 4px;
display: block;
width: 16px;
height: 16px;
background-image: url("../vectors/collapse-project.svg");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center center;
transition: transform 0.3s ease;
}
.collapse--project > .collapse__head:hover {
}
.collapse--project > .collapse__head:hover::after {
}
.collapse--project.collapse--expanded > .collapse__head {
}
.collapse--project.collapse--expanded > .collapse__head::after {
transform: rotate(90deg);
}
.collapse--project > .collapse__body {
}
.collapse--project .collapse__inner {
margin-top: 8px;
padding-left: 32px;
border-left: 1px solid #C4C4C4;
}

3
octopod-css/development/styles/_deployment.css
View File

@ -58,3 +58,6 @@
font-size: 16px;
line-height: 24px;
}
.deployment__widget .row:first-child {
margin-top: 0;
}

49
octopod-css/development/styles/_editable-row.css Executable file
View File

@ -0,0 +1,49 @@
.editable-row {
position: relative;
margin-top: 8px;
display: flex;
align-self: flex-start;
}
.editable-row:first-child {
margin-top: 0;
}
.editable-row__key {
width: 400px;
}
.editable-row__value {
margin-left: 16px;
flex-grow: 1;
}
.editable-row__delete {
margin-left: 2px;
}
.editable-row__placeholder {
position: relative;
width: 400px;
height: 40px;
padding: 14px 0;
box-shadow: inset 0 -1px 0 rgba(176, 176, 176, 0.2);
}
.editable-row__placeholder::before {
position: relative;
content: "";
display: block;
height: 12px;
width: 350px;
border-radius: 2px;
background: rgba(238, 238, 238, 0.5);
}
.editable-row__placeholder:first-child {
margin-right: 16px;
}
.editable-row__placeholder:first-child::before {
width: 200px;
}

3
octopod-css/development/styles/_has-changes.css Executable file
View File

@ -0,0 +1,3 @@
.has-changes {
text-decoration: underline;
}

32
octopod-css/development/styles/_input.css
View File

@ -18,8 +18,6 @@
color: rgba(0, 0, 0, 0.87);
}
.input__widget:hover {
box-shadow: inset 0 -1px #326EE6;
}
@ -43,6 +41,36 @@
/* stylelint-enable */
.input__dropdown {
z-index: 2;
position: absolute;
top: 30px;
background: #FFFFFF;
padding: 8px 0;
list-style: none;
border-radius: 2px;
box-shadow: 0 8px 8px 0 #0000003D, 0 0 8px 0 #0000001F;
max-height: 274px;
overflow-y: auto;
}
.input__suggest {
font-size: 16px;
line-height: 24px;
padding: 12px 16px;
cursor: pointer;
color: rgba(0, 0, 0, 0.87);
font-weight: 400;
}
.input__suggest b {
font-weight: 700;
}
.input__suggest:hover {
background: #F8F8F8;
}
.input--has-clear-type {

4
octopod-css/development/styles/_key-custom-edited.css Executable file
View File

@ -0,0 +1,4 @@
.key-custom-edited {
font-weight: 500 !important;
text-decoration: underline !important;
}

5
octopod-css/development/styles/_key-default-edited.css Executable file
View File

@ -0,0 +1,5 @@
.key-default-edited {
font-weight: 300 !important;
font-style: italic !important;
text-decoration: underline !important;
}

4
octopod-css/development/styles/_key-default-pristine.css Executable file
View File

@ -0,0 +1,4 @@
.key-default-pristine {
font-weight: 300 !important;
font-style: italic !important;
}

88
octopod-css/development/styles/_overrides.css
View File

@ -1,85 +1,15 @@
.overrides {
}
.overrides__item {
position: relative;
margin-bottom: 8px;
display: flex;
align-self: flex-start;
}
.overrides__item:last-child {
margin-bottom: 0;
}
.overrides__key {
width: 400px;
}
.overrides__value {
margin-left: 16px;
width: 400px;
}
.overrides__delete {
margin-left: 2px;
}
.overrides__search {
z-index: 2;
position: absolute;
top: 30px;
background: #FFFFFF;
padding: 8px 0;
list-style: none;
border-radius: 2px;
box-shadow: 0 8px 8px 0 #0000003D, 0 0 8px 0 #0000001F;
max-height: 274px;
overflow-y: auto;
}
.overrides__search-item {
font-size: 16px;
line-height: 24px;
padding: 12px 16px;
cursor: pointer;
color: rgba(0, 0, 0, 0.87);
font-weight: 400;
}
.overrides__search-item b {
font-weight: 700;
}
.overrides__search-item:hover {
background: #F8F8F8;
}
.overrides__placeholder {
position: relative;
width: 400px;
height: 40px;
padding: 14px 0;
box-shadow: inset 0 -1px 0 rgba(176, 176, 176, 0.2);
}
.overrides__placeholder::before {
position: relative;
content: "";
display: block;
height: 12px;
width: 350px;
border-radius: 2px;
background: rgba(238, 238, 238, 0.5);
}
.overrides__placeholder:first-child {
margin-right: 16px;
}
.overrides__placeholder:first-child::before {
width: 200px;
}
.overrides__add {
padding: 8px 0 8px 24px !important;
}
.overrides__list {
}
.overrides__tree {
margin-top: 16px;
margin-left: 16px;
}

3
octopod-css/development/styles/_padded.css Executable file
View File

@ -0,0 +1,3 @@
.padded {
padding-left: 24px;
}

2
octopod-css/development/styles/_root.css
View File

@ -17,6 +17,8 @@
--red: #D42A2A;
--green: #0F7F12;
--black: #212121;
--shadow_1: 0 2px 2px rgba(0, 0, 0, 0.24),
0 0 2px rgba(0, 0, 0, 0.12);

3
octopod-css/development/styles/_row.css Executable file
View File

@ -0,0 +1,3 @@
.row {
margin-top: 8px;
}

4
octopod-css/development/styles/_table.css
View File

@ -23,6 +23,10 @@
.table tbody tr {
border-top: 1px solid #E0E0E0;
}
.table tbody tr:first-child {
border-top: none;
}
.table th {
vertical-align: middle;
height: 48px;

4
octopod-css/development/styles/_value-edited.css Executable file
View File

@ -0,0 +1,4 @@
.value-edited {
font-weight: 500 !important;
text-decoration: underline !important;
}

3
octopod-css/development/styles/_value-pristine.css Executable file
View File

@ -0,0 +1,3 @@
.value-pristine {
font-weight: 300 !important;
}

10
octopod-css/development/styles/style.css
View File

@ -40,3 +40,13 @@
@import url("_no-log.css");
@import url("_nav.css");
@import url("_break.css");
@import url("_key-default-pristine.css");
@import url("_key-default-edited.css");
@import url("_key-custom-edited.css");
@import url("_value-pristine.css");
@import url("_value-edited.css");
@import url("_collapse.css");
@import url("_row.css");
@import url("_padded.css");
@import url("_has-changes.css");
@import url("_editable-row.css");

3
octopod-css/development/vectors/collapse-project.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66678 11.3332L10.0001 7.99989L6.66678 4.66655L6.66678 11.3332Z" fill="#212121"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B