Skip to content

K
kpp
Commit 020d88ad authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

fields-group fix

parent 4cc66cd2
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 11 deletions
src/blocks/fields-group/fields-group.less
View file @ 020d88ad
......@@ -41,9 +41,11 @@
}
}
// &--dropdown {} // Вынесено в отдельный файл, т.к. ситуация специфическая, редкая
&:not(:last-child) {
input,
select {
.field-text__input,
.field-select__select {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
......@@ -52,19 +54,22 @@
&:not(:first-child) {
margin-left: -1px;
input,
select {
.field-text__input,
.field-select__select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
* {
.field-text__input,
.field-select__select,
.btn {
position: relative;
z-index: 1;
&:focus {
z-index: 1;
&:not(:focus) {
z-index: 0;
}
}
}
src/blocks/fields-group/fields-group__item--dropdown.less 0 → 100644
View file @ 020d88ad
@import "../../less/variables.less"; // только для удобства обращения к переменным
@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
.fields-group {
&__item {
&--dropdown {
&:not(:last-child) {
.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
margin-left: -1px;
.btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
}
}
src/blocks_library.html
View file @ 020d88ad
......@@ -634,6 +634,22 @@
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
</div>
<div class="fields-group">
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
$
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
</div>
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
.00
</span>
</div>
<div class="fields-group">
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
$
......@@ -642,7 +658,7 @@
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
какой-то текст
.00
</span>
</div>
<div class="fields-group">
......@@ -655,8 +671,85 @@
<button class="btn fields-group__item fields-group__item--addon">Отправить</button>
<button class="btn fields-group__item fields-group__item--addon">Отменить</button>
</div>
<div class="field-actions">
<button class="btn">Отправить</button>
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
</div>
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение
</button>
<ul class="dropdown__menu">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
</div>
<div class="fields-group">
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение
</button>
<ul class="dropdown__menu">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
</div>
<div class="fields-group">
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение
</button>
<ul class="dropdown__menu">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
</div>
</fieldset>
</form>
......
src/less/mixins/btn-mixins.less
View file @ 020d88ad
......@@ -95,7 +95,7 @@
.btn-color--active(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: darken(@background, 15%);
border-color: darken(@border, 50%);
border-color: darken(@border, 17%);
}
......
src/less/style.less
View file @ 020d88ad
......@@ -24,5 +24,6 @@
@import "./src/blocks/field-toggler/field-toggler.less";
@import "./src/blocks/dropdown/dropdown.less";
@import "./src/blocks/fields-group/fields-group.less";
@import "./src/blocks/fields-group/fields-group__item--dropdown.less";
@import "./src/blocks/btn-group/btn-group.less";
@import "./src/blocks/checked-btn/checked-btn.less";
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