Skip to content

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

labels

parent aec2f84f
Show whitespace changes
Inline Side-by-side
Showing with 241 additions and 1 deletion
.lesshintrc
View file @ a73cfc47
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
"btn-mixins.less", "btn-mixins.less",
"grid-mixins.less", "grid-mixins.less",
"responsive-mixins.less", "responsive-mixins.less",
"table-responsive-mixins.less" "table-responsive-mixins.less",
"label--tag.less"
], ],
"emptyRule": false, "emptyRule": false,
"importantRule": false, "importantRule": false,
......
src/blocks/label/label--absolute.less 0 → 100644
View file @ a73cfc47
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
&--absolute {
position: absolute;
z-index: 1;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
src/blocks/label/label--tag.less 0 → 100644
View file @ a73cfc47
@import "../../less/variables.less"; // только для удобства обращения к переменным
.label {
&--tag {
margin-left: 1em;
padding-left: 0.7em;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:before {
content: '';
// Изображение: svg_to_bg/tag-bg.svg
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{gray}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: 100% 0;
position: absolute;
top: 0;
right: 100%;
transform: translateX(0.15em);
width: 1em;
height: 1.45em; // line-height + patting-top + padding-bottom
.label--main& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-main}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
.label--danger& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-danger}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
.label--success& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-success}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
}
&:after {
position: absolute;
content: '';
top: 50%;
left: -0.2em;
margin-top: -0.25em;
background-color: #fff !important;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
}
}
}
src/blocks/label/label.html 0 → 100644
View file @ a73cfc47
<!--DEV
<div class="label">
Метка-<code>div</code>
<span class="label__detail">23</span>
</div>
<span class="label">
Метка-<code>span</code>
<span class="label__detail">999</span>
</span>
<a href="" class="label">
Метка-<code>a</code>
<span class="label__detail">7</span>
</a>
-->
src/blocks/label/label.less 0 → 100644
View file @ a73cfc47
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
display: inline-block;
position: relative;
margin: 0 0.1em;
vertical-align: baseline;
line-height: 1;
padding: 0.25em 0.4em 0.2em;
background-color: @gray;
color: #fff;
text-decoration: none;
text-transform: none;
font-weight: 700;
font-size: 75%;
white-space: nowrap;
border-radius: @border-radius;
&:hover, &:focus {
color: #fff;
text-decoration: none;
}
&--main {
background-color: @color-main;
}
&--danger {
background-color: @color-danger;
}
&--success {
background-color: @color-success;
}
svg {
fill: #fff;
}
}
src/blocks/label/label__detail.less 0 → 100644
View file @ a73cfc47
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
&__detail {
display: inline-block;
margin-left: 0.4em;
opacity: 0.7;
}
}
src/blocks/label/svg_to_bg/tag-bg.svg 0 → 100644
View file @ a73cfc47
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="#000" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>
src/blocks_library.html
View file @ a73cfc47
...@@ -9,6 +9,14 @@ ...@@ -9,6 +9,14 @@
</head> </head>
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="block-library-camera" viewBox="0 0 30 28"><path d="M15 10.5q1.86 0 3.18 1.32T19.5 15t-1.32 3.18T15 19.5t-3.18-1.32T10.5 15t1.32-3.18T15 10.5zM26 4q1.656 0 2.828 1.172T30 8v14q0 1.656-1.172 2.828T26 26H4q-1.656 0-2.828-1.172T0 22V8q0-1.656 1.172-2.828T4 4h3.5l.797-2.125q.297-.766 1.086-1.32T11 0h8q.828 0 1.617.555t1.086 1.32L22.5 4H26zM15 22q2.89 0 4.945-2.055T22 15t-2.055-4.945T15 8t-4.945 2.055T8 15t2.055 4.945T15 22z"/></symbol>
<symbol id="block-library-folder-open" viewBox="0 0 29 28"><path d="M29.36 14.875q0 .484-.485 1.03l-5.25 6.19q-.672.796-1.883 1.35t-2.242.556h-17q-.53 0-.945-.202t-.414-.672q0-.484.485-1.03l5.25-6.19q.672-.796 1.883-1.35T11 14h17q.53 0 .945.203t.414.672zM24 9.5V12H11q-1.47 0-3.078.742T5.36 14.61L.016 20.89q0-.063-.008-.195T0 20.5v-15q0-1.437 1.03-2.47T3.5 2h5q1.437 0 2.47 1.03T12 5.5V6h8.5q1.437 0 2.47 1.03T24 9.5z"/></symbol>
<symbol id="block-library-road" viewBox="0 0 30 28"><path d="M17.36 15.563V15.5l-.376-5q-.016-.203-.172-.352t-.36-.148h-2.905q-.203 0-.36.148t-.17.352l-.376 5v.063q-.015.187.126.313t.328.125h3.813q.187 0 .328-.124t.125-.313zm11.86 7.296q0 1.14-.72 1.14h-11q.203 0 .344-.148t.125-.352l-.314-4q-.016-.203-.172-.352t-.36-.148h-4.25q-.202 0-.358.148t-.172.352l-.313 4q-.015.203.126.352T12.5 24h-11q-.72 0-.72-1.14 0-.845.407-1.814L7.703 4.734q.125-.297.406-.516t.593-.22H14q-.203 0-.36.15t-.17.35l-.235 3q-.016.22.125.36t.344.14h2.594q.203 0 .344-.14t.125-.36l-.234-3q-.016-.202-.172-.35t-.358-.15H21.3q.312 0 .593.22t.406.516l6.515 16.312q.406.97.406 1.813z"/></symbol>
<symbol id="block-library-search" viewBox="0 0 26 28"><path d="M18 13q0-2.89-2.055-4.945T11 6 6.055 8.055 4 13t2.055 4.945T11 20t4.945-2.055T18 13zm8 13q0 .812-.594 1.406T24 28q-.844 0-1.406-.594l-5.36-5.344Q14.44 24 11.002 24q-2.233 0-4.272-.868t-3.516-2.344-2.344-3.516T0 13 .87 8.725 3.212 5.21t3.516-2.344T11 2t4.274.866T18.79 5.21t2.344 3.516T22 13q0 3.436-1.936 6.233l5.36 5.36q.577.577.577 1.405z"/></symbol>
</svg>
@@include('blocks/page-header/page-header.html') @@include('blocks/page-header/page-header.html')
<section class="container blocks-library"> <section class="container blocks-library">
...@@ -1371,6 +1379,90 @@ $('#test').on('hidden.nth.dropdown', function () { ...@@ -1371,6 +1379,90 @@ $('#test').on('hidden.nth.dropdown', function () {
</ol> </ol>
</section> </section>
<section class="blocks-library__item" id="label" data-name=".label">
<div>
Обычный текст
<span class="label">Метка</span>
<span class="label label--main">Метка</span>
<span class="label label--danger">Метка</span>
<span class="label label--success">Метка</span>
|
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--main"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg> Метка</span>
<span class="label label--danger"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-road"></use></svg> Метка</span>
<span class="label label--success"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg> Метка</span>
|
<span class="label label--tag">Метка</span>
<span class="label label--tag label--main">Метка</span>
<span class="label label--tag label--danger">Метка</span>
<span class="label label--tag label--success">Метка</span>
<br>
Обычный текст
<div class="label">
Метка-div с доп. примечанием
<span class="label__detail">23</span>
</div>
Обычный текст
<span class="label">
Метка-span с доп. примечанием
<span class="label__detail">999</span>
</span>
Обычный текст
<a href="" class="label">
Метка-ссылка с доп. примечанием
<span class="label__detail">7</span>
</a>
</div>
<div class="row">
<div class="col-md-6">
<h1>Заголовок 1
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
</h1>
<h2>Заголовок 2
<span class="label label--main"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
</h2>
<h3>Заголовок 3
<span class="label label--danger"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
</h3>
<h4>Заголовок 4
<span class="label label--success"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
</h4>
<h5>Заголовок 5
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
</h5>
<h6>Заголовок 6
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
</h6>
</div>
<div class="col-md-6">
<h1>Только иконка:
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg></span>
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg></span>
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-road"></use></svg></span>
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg></span>
</h1>
<p>
Лейблы в кнопках:
<a href="" class="btn">Кнопка <span class="label">1</span></a>
<a href="" class="btn btn--danger">Кнопка <span class="label label--danger">1</span></a>
<a href="" class="btn btn--success">Кнопка <span class="label label--success">1</span></a>
</p>
<p>
Лейблы в кнопках:
<a href="" class="btn">Кнопка <span class="label label--absolute">1</span></a>
<a href="" class="btn btn--danger">Кнопка <span class="label label--absolute label--danger">1</span></a>
<a href="" class="btn btn--success">Кнопка <span class="label label--absolute label--success">1</span></a>
</p>
</div>
</div>
</section>
</section> </section>
......
src/less/mixins/btn-mixins.less
View file @ a73cfc47
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
.btn() { .btn() {
display: inline-block; display: inline-block;
position: relative;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom; padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
......
src/less/style.less
View file @ a73cfc47
...@@ -34,3 +34,7 @@ ...@@ -34,3 +34,7 @@
@import './src/blocks/list-nums/list-nums.less'; @import './src/blocks/list-nums/list-nums.less';
@import './src/blocks/list-bullet/list-bullet.less'; @import './src/blocks/list-bullet/list-bullet.less';
@import './src/blocks/step-list/step-list.less'; @import './src/blocks/step-list/step-list.less';
@import './src/blocks/label/label.less';
@import './src/blocks/label/label__detail.less';
@import './src/blocks/label/label--absolute.less';
@import './src/blocks/label/label--tag.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