|
|
| (не показана 1 промежуточная версия этого же участника) |
| Строка 1: |
Строка 1: |
| <includeonly>{{#css: | | <includeonly> |
| .ss220-procedure.tabs-togglebox {display:block; box-sizing:border-box; width:100%; max-width:100%; margin:8px 0; border:1px solid #2b3139; border-radius:8px; overflow:hidden; background:#191f26; color:#c5c9ce;}
| | <div class="toccolours mw-collapsible mw-collapsed" style="border:1px solid #2b3139; border-radius:8px; background:#191f26; color:#c5c9ce; margin:8px 0;"> |
| .ss220-procedure.tabs-togglebox > .tabs-container {position:relative; display:grid; border:0; padding:0; background:transparent;}
| | <div class="mw-collapsible-head" style="padding:4px 9px; font: 700 12px/18px Roboto, Arial, sans-serif;"> |
| | | {{{название|Процедура}}} |
| .ss220-procedure.tabs-togglebox > .tabs-container > .tabs-input {display:block !important; position:absolute; top:0; left:0; width:100%; height:27px; margin:0; padding:0; opacity:0; z-index:2; cursor:pointer;}
| | </div> |
| .ss220-procedure.tabs-togglebox > .tabs-container > .tabs-label {display:flex; align-items:center; gap:7px; box-sizing:border-box; width:100%; min-height:27px; margin:0; padding:4px 9px; border:0; border-radius:0; background:transparent; color:inherit; font:700 12px/18px Roboto,Arial,sans-serif; cursor:pointer; user-select:none;}
| | <div class="mw-collapsible-content" style="border-top: 2px solid #405a75; line-height: 1.5;"> |
| .ss220-procedure .tabs-label::before {content:""; width:5px; height:5px; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .25s ease;}
| |
| .ss220-procedure .tabs-input:checked + .tabs-label::before {transform:rotate(45deg);}
| |
| .ss220-procedure.tabs-togglebox .tabs-input:checked + .tabs-label .tabs-open, .ss220-procedure .tabs-label .tabs-open {display:inline !important;}
| |
| .ss220-procedure .tabs-label .tabs-close {display:none;}
| |
| .ss220-procedure .tabs-input:focus + .tabs-label {outline:none; box-shadow:none;}
| |
| .ss220-procedure.tabs-togglebox > .tabs-container > .tabs-content {display:grid; grid-template-rows:0fr; min-height:0; height:auto; max-height:none; overflow:hidden; margin:0; padding:0; border:0; opacity:0; visibility:hidden; transition:grid-template-rows .25s ease, opacity .25s ease, visibility .25s ease;}
| |
| .ss220-procedure.tabs-togglebox > .tabs-container > .tabs-input:checked ~ .tabs-content {grid-template-rows:1fr; opacity:1; visibility:visible;}
| |
| .ss220-procedure .ss220-procedure-body {min-height:0; overflow:hidden;}
| |
| .ss220-procedure .ss220-procedure-inner {border-top:2px solid #405a75; padding:12px 14px; line-height:1.5;}
| |
| @media (prefers-reduced-motion:reduce) {.ss220-procedure.tabs-togglebox > .tabs-container, .ss220-procedure.tabs-togglebox > .tabs-container > .tabs-content, .ss220-procedure .tabs-label::before {transition:none;}
| |
| }
| |
| }}
| |
| {{#tag:tab|
| |
| <div class="ss220-procedure-body"><div class="ss220-procedure-inner">
| |
| {{{содержание|}}} | | {{{содержание|}}} |
| </div></div> | | </div> |
| |class=ss220-procedure
| | </div></includeonly><noinclude> |
| |name={{{название|Процедура}}}
| |
| |collapsed=collapsed
| |
| }}</includeonly><noinclude>
| |
| Готовый код для [[Шаблон:Procedure]]. Скопируйте весь исходный код этой страницы в шаблон. | | Готовый код для [[Шаблон:Procedure]]. Скопируйте весь исходный код этой страницы в шаблон. |
|
| |
|
| Строка 34: |
Строка 17: |
| * Второй пункт со [[Новичкам|ссылкой]]. | | * Второй пункт со [[Новичкам|ссылкой]]. |
| }} | | }} |
| | {{:{{FULLPAGENAME}} |
| | |название=Вложеная процедура |
| | |содержание=Этот блок раскрывается независимо от первого. |
| {{:{{FULLPAGENAME}} | | {{:{{FULLPAGENAME}} |
| |название=Ещё одна процедура | | |название=Ещё одна процедура |
| |содержание=Этот блок раскрывается независимо от первого. | | |содержание=Этот блок раскрывается независимо от первого. |
| | }} |
| }} | | }} |
|
| |
|
Готовый код для Шаблон:Procedure. Скопируйте весь исходный код этой страницы в шаблон.
Пример
Содержимое процедуры. Нажмите в любом месте заголовка, чтобы раскрыть или свернуть блок.
- Первый пункт.
- Второй пункт со ссылкой.
Этот блок раскрывается независимо от первого.
Этот блок раскрывается независимо от первого.
Использование
{{Procedure
|название=Название процедуры
|содержание=Текст процедуры.
* Первый пункт.
* Второй пункт.
}}
Параметры: название (по умолчанию «Процедура») и содержание. Старый параметр палитра можно оставить в вызовах: он не используется. Ширина — 100% родительского блока. Раскрытие и сворачивание — HTML-переключатель и CSS, без JavaScript.
