Commit 52ec8f46 authored by Nikolay Gromov's avatar Nikolay Gromov

Поправил положение радиокнопок при увеличении font-size родителя

parent 0c2f8848
...@@ -5,9 +5,5 @@ ...@@ -5,9 +5,5 @@
&--lg { &--lg {
font-size: @font-size--h3; font-size: @font-size--h3;
.field-radio__input {
top: 0.5em;
}
} }
} }
...@@ -5,17 +5,5 @@ ...@@ -5,17 +5,5 @@
&--sm { &--sm {
font-size: @font-size--small; font-size: @font-size--small;
.field-radio__input {
top: 0.1em;
}
.field-radio__name {
padding-left: 1.6em;
}
.field-radio__help-text {
padding-left: round(1.6em * (100 / @font-size--small-percent), 2);
}
} }
} }
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
&__name { &__name {
position: relative; position: relative;
padding-left: 1.3em; padding-left: 2rem;
font-weight: 400; font-weight: 400;
display: inline-block; display: inline-block;
margin-right: 0.6em; margin-right: 0.6em;
...@@ -26,17 +26,13 @@ ...@@ -26,17 +26,13 @@
&__input { &__input {
position: absolute; position: absolute;
top: 0.25em; top: 0.7em;
transform: translateY(-50%);
left: 0; left: 0;
} }
&__help-text { &__help-text {
.help-text(); .help-text();
// Задача: здесь левый padding должен совпадать с левым padding .field-checkbox__name-text и должен быть padding-left: 2rem;
// в относительных единицах.
// Левый padding у .field-checkbox__name-text = 1.3em от размера шрифта родителя (указано выше в этом файле).
// Нужно получить 1.3em от размера шрифта родителя, отталкиваясь от здешнего (уменьшенного) размера шрифта.
// Фактор увеличения: 100 / @font-size--small-percent
padding-left: round(1.3em * (100 / @font-size--small-percent), 2);
} }
} }
...@@ -1879,7 +1879,6 @@ ...@@ -1879,7 +1879,6 @@
<h1 class="blocks-library__item-title">Радиокнопки</h1> <h1 class="blocks-library__item-title">Радиокнопки</h1>
<p>Размеры задаются в <code>em</code> — зависят от размера шрифта родительского элемента.</p> <p>Размеры задаются в <code>em</code> — зависят от размера шрифта родительского элемента.</p>
<p>Поскольку при увеличении шрифта изображение радиокнопки в некоторых браузерах не увеличивается, на больших размерах шрифта смотрится — так себе.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row"> <div class="row">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment