0010-cnil-update-steps-36765.patch
| static/cnil/_custom.scss | ||
|---|---|---|
| 96 | 96 |
} |
| 97 | 97 |
} |
| 98 | 98 | |
| 99 |
div#rub_service div#steps {
|
|
| 100 |
ol {
|
|
| 101 |
display: flex; |
|
| 99 |
// STEPS |
|
| 100 | ||
| 101 |
.wcs-step--label {
|
|
| 102 |
text-transform: uppercase; |
|
| 103 |
} |
|
| 104 | ||
| 105 |
@media (min-width: $very-small-limit + 1) {
|
|
| 106 |
.wcs-steps--list {
|
|
| 102 | 107 |
justify-content: center; |
| 103 |
li {
|
|
| 104 |
position: relative; |
|
| 108 |
align-items: flex-end; |
|
| 109 |
overflow: hidden; |
|
| 110 |
} |
|
| 111 | ||
| 112 |
.wcs-step {
|
|
| 113 |
flex-direction: column; |
|
| 114 |
align-items: center; |
|
| 115 |
flex: 1 1 6em; |
|
| 116 |
max-width: 11em; |
|
| 117 |
position: relative; |
|
| 118 |
font-size: 1.2em; |
|
| 119 | ||
| 120 |
&--label {
|
|
| 121 |
position: static; |
|
| 122 |
font-size: 0.67em; |
|
| 123 |
order: -1; |
|
| 124 |
padding-bottom: .66em; |
|
| 105 | 125 |
text-align: center; |
| 106 |
display: flex; |
|
| 107 |
flex: 1; |
|
| 108 |
flex-direction: column; |
|
| 109 |
margin-bottom: 0; |
|
| 110 |
span.marker {
|
|
| 111 |
position: relative; |
|
| 112 |
z-index: 100; |
|
| 113 |
order: 1; |
|
| 114 |
margin: 0 auto; |
|
| 115 |
font-size: 120%; |
|
| 116 |
font-weight: bold; |
|
| 117 |
background: #c6bfa5; |
|
| 118 |
color: white; |
|
| 119 |
width: 50px; |
|
| 120 |
height: 50px; |
|
| 121 |
line-height: 50px; |
|
| 122 |
border-radius: 50px; |
|
| 123 |
padding: 0; |
|
| 124 |
} |
|
| 125 |
span.label {
|
|
| 126 |
order: 0; |
|
| 127 |
padding-bottom: 10px; |
|
| 128 |
font-size: 80%; |
|
| 129 |
text-transform: uppercase; |
|
| 130 |
height: 2rem; |
|
| 131 |
@media screen and (max-width: $mobile-limit) {
|
|
| 132 |
height: auto; |
|
| 133 |
} |
|
| 134 |
} |
|
| 135 |
&.current {
|
|
| 136 |
span.marker {
|
|
| 137 |
background: $lightblue; |
|
| 138 |
} |
|
| 139 |
span.label {
|
|
| 140 |
font-weight: normal; |
|
| 141 |
} |
|
| 142 |
} |
|
| 143 |
&::after {
|
|
| 144 |
content: ''; |
|
| 126 |
} |
|
| 127 | ||
| 128 |
&:not(.current) & {
|
|
| 129 |
&--label {
|
|
| 145 | 130 |
display: block; |
| 146 |
height: 3px; |
|
| 147 |
background: #c6bfa5; |
|
| 148 |
width: 100%; |
|
| 149 |
position: absolute; |
|
| 150 |
z-index: 10; |
|
| 151 |
bottom: 35px; |
|
| 152 |
left: 50%; |
|
| 153 |
} |
|
| 154 |
&.last::after {
|
|
| 155 |
content: none; |
|
| 156 | 131 |
} |
| 157 | 132 |
} |
| 158 |
@media screen and (max-width: $mobile-limit) {
|
|
| 159 |
flex-direction: column; |
|
| 160 |
li {
|
|
| 161 |
margin: 0 auto; |
|
| 162 |
&::after {
|
|
| 163 |
content: none; |
|
| 164 |
} |
|
| 165 |
} |
|
| 133 | ||
| 134 |
// Tie |
|
| 135 |
&::after {
|
|
| 136 |
position: absolute; |
|
| 137 |
bottom: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important;
|
|
| 138 |
left: 50%; |
|
| 139 |
width: calc(100% + #{$wcs-step-marker-size});
|
|
| 166 | 140 |
} |
| 167 | 141 |
} |
| 168 | 142 |
} |
| static/cnil/_vars.scss | ||
|---|---|---|
| 34 | 34 |
$widget-focus-border: 2px solid #66afe9; |
| 35 | 35 | |
| 36 | 36 |
$form-sidebar-position: top; |
| 37 | ||
| 38 |
$wcs-steps-spacing: .7rem; |
|
| 39 |
$wcs-step-border-bottom: none; |
|
| 40 |
$wcs-step-marker-type: disc tied; |
|
| 41 |
$wcs-step-current-color: #333; |
|
| 42 |
$wcs-step-marker-color: white; |
|
| 43 |
$wcs-step-current-marker-color: white; |
|
| 44 |
$wcs-step-current-marker-background: $lightblue; |
|
| 45 |
$wcs-step-marker-background: $gray; |
|
| 46 |
$wcs-step-marker-tie-color: $gray; |
|
| 47 |
$wcs-step-marker-tie-width: 3px; |
|
| 48 | ||
| 49 | ||
| 37 |
- |
|