|
|
| Строка 1: |
Строка 1: |
| <div class="procedure-box collapsed">
| | {{Procedure |
| <div class="procedure-box__heading">
| | |название=Процедуры хранения контрабанды и улик |
| Процедура обыска
| | |палитра=Security |
| </div>
| | |содержание= |
| | | Текст процедуры... |
| <div class="procedure-box__content">
| |
| ...
| |
| </div>
| |
| </div>
| |
| | |
| {{#css:
| |
| .procedure-box {
| |
| position: relative;
| |
| overflow: hidden;
| |
| width: 100%;
| |
| margin: 0.5em 0;
| |
| border: var(--border-classic);
| |
| border-radius: var(--border-radius-medium);
| |
| | |
| &__heading {
| |
| display: flex;
| |
| align-items: center;
| |
| min-height: 2.25em;
| |
| padding: 0 0.75em;
| |
| background-color: var(--color-second);
| |
| color: var(--color-text-darker);
| |
| font-size: 0.75em;
| |
| font-weight: bold;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| | |
| &:before {
| |
| content: "\f078";
| |
| font: var(--fa-font-solid);
| |
| margin-right: 0.33em;
| |
| transform: rotate(0deg) scale(0.75);
| |
| transition: transform var(--transition-time);
| |
| }
| |
| }
| |
| | |
| &__content {
| |
| display: grid;
| |
| grid-template-rows: 1fr;
| |
| overflow: hidden;
| |
| background-color: var(--color-second);
| |
| transition: grid-template-rows var(--transition-time);
| |
| | |
| > div {
| |
| min-height: 0;
| |
| padding: 12px 14px;
| |
| line-height: 1.5;
| |
| transform-origin: top;
| |
| transition:
| |
| padding var(--transition-time),
| |
| opacity var(--transition-time),
| |
| visibility var(--transition-time),
| |
| transform var(--transition-time);
| |
| }
| |
| }
| |
| | |
| &.collapsed {
| |
| .procedure-box__heading:before {
| |
| transform: rotate(-90deg) scale(0.75);
| |
| }
| |
| | |
| .procedure-box__content {
| |
| grid-template-rows: 0fr;
| |
| | |
| > div {
| |
| padding-top: 0;
| |
| padding-bottom: 0;
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| transform: scale(0.75);
| |
| }
| |
| }
| |
| }
| |
| }
| |
| }} | | }} |
