Skip to content

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

responsive fixs

parent ec0407a6
Show whitespace changes
Inline Side-by-side
Showing with 117 additions and 46 deletions
src/blocks/blockquote-right/blockquote-right.less
View file @ 2c35bb76
......@@ -5,6 +5,13 @@
.blockquote-right {
text-align: right;
border-left: 0;
padding: 0 0.5em 0 0;
border-right: 1px solid @border-color;
@media (min-width: @screen-sm) {
padding: 0 1.8em 0 0;
border-right: 5px solid @border-color;
margin-left: 0;
border-right-width: 5px;
border-left: 0;
}
}
src/blocks/blocks-library/blocks-library.less
View file @ 2c35bb76
......@@ -5,29 +5,38 @@
.blocks-library {
&__item {
position: relative;
padding: 1.5rem 2rem 1.5rem 5rem;
padding: 1rem;
border: 2px dashed @gray-lighter;
margin-bottom: 2rem;
@media (min-width: @screen-md) {
padding: 1.5rem 2rem 1.5rem 5rem;
min-height: 18rem;
}
&:before {
content: attr(data-name);
position: absolute;
top: -1em;
left: 0;
font-weight: 700;
text-transform: lowercase;
left: 2.5rem;
top: 14rem;
color: @gray;
display: block;
font-size: 1.7rem;
line-height: 2rem;
height: 2rem;
text-align: right;
white-space: nowrap;
color: @gray-light;
@media (min-width: @screen-md) {
left: 2.5rem;
top: 14rem;
width: 15rem;
transform: rotate(-90deg);
transform-origin: 0 100%;
}
}
}
&__title {
margin-top: 0;
......
src/blocks/dropdown/dropdown.js
View file @ 2c35bb76
......@@ -32,7 +32,6 @@
}
function clearMenus(e) {
console.log('e: ' + e);
if (e && e.which === 3) return
$(backdrop).remove()
$(toggle).each(function () {
......@@ -101,8 +100,6 @@
Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
console.log(e.which);
var $this = $(this)
e.preventDefault()
......@@ -133,7 +130,6 @@
if (!~index) index = 0
$items.eq(index).trigger('focus')
console.log($items.eq(index));
}
......
src/blocks/dropdown/dropdown.less
View file @ 2c35bb76
......@@ -11,6 +11,7 @@
z-index: @z-index-dropdown;
visibility: visible;
opacity: 1;
width: auto;
}
}
......@@ -29,6 +30,8 @@
// }
&__menu {
max-width: 90vw;
width: 1px;
position: absolute;
top: 100%;
left: 0;
......@@ -59,16 +62,15 @@
ul& {
min-width: 16rem;
// max-width: 30rem;
list-style: none;
padding: .3em 0;
> li > a {
display: block;
white-space: nowrap;
// width: 100%;
// overflow: hidden;
// text-overflow: ellipsis;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding: .3em 1em;
color: @text-color;
text-decoration: none;
......
src/blocks/step-list/step-list.less
View file @ 2c35bb76
......@@ -9,14 +9,13 @@
&__item {
position: relative;
@media (min-width: @screen-sm) {
margin-left: 5rem;
padding-left: 1.2rem;
border-left: 1px solid @border-color;
&:not(:last-child) {
margin-bottom: 1.5rem;
}
// На ширинах больше SM показываем цифру сбоку от элемента
&:before {
content: counter(step-list) '.';
counter-increment: step-list;
......@@ -25,11 +24,30 @@
left: -5rem;
font-size: @font-size--h1;
width: 1.2em;
height: @line-height;
line-height: @line-height;
height: 1em;
line-height: 1em;
color: @gray-light;
text-align: right;
}
}
&:not(:last-child) {
margin-bottom: 1.5rem;
}
// На узких ширинах показываем цифру в заголовке
& .step-list__title {
&:before {
content: counter(step-list) '. ';
counter-increment: step-list;
color: @gray-light;
// На ширинах больше SM скроем
@media (min-width: @screen-sm) {
display: none;
}
}
}
&--main {
.step-list__title {
......@@ -53,8 +71,8 @@
&__title {
font-size: @font-size--h1;
font-weight: 400;
line-height: @line-height;
padding: 0 0 .7rem;
line-height: 1em;
padding: 0 0 1rem;
margin: 0 0 1.5rem;
border-bottom: 2px solid @border-color;
}
......
src/blocks_library.html
View file @ 2c35bb76
......@@ -21,6 +21,8 @@
<h2 class="blocks-library__title" id="typo">Текст, теги</h2>
<section class="blocks-library__item" id="text" data-name="Текст">
<p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
......@@ -79,9 +81,11 @@
<div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
</section>
<section class="blocks-library__item" id="inline-tags" data-name="Строчные теги">
<div class="row">
<div class="col-md-6">
<div class="col-lg-6">
<table>
<tr>
<td><code>&lt;a&gt;</code></td>
......@@ -117,7 +121,7 @@
</tr>
</table>
</div>
<div class="col-md-6">
<div class="col-lg-6">
<table>
<tr>
<td><code>&lt;mark&gt;</code></td>
......@@ -152,6 +156,8 @@
</div>
</section>
<section class="blocks-library__item" id="address" data-name="address">
<address>
<strong>Имя Фамилия</strong>
......@@ -161,6 +167,8 @@
</address>
</section>
<section class="blocks-library__item" id="blockquote" data-name="blockquote">
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
......@@ -175,6 +183,8 @@
</blockquote>
</section>
<section class="blocks-library__item" id="pre" data-name="pre">
<pre>// Блочный код<br>// Вторая строка</pre>
<pre>
......@@ -182,8 +192,12 @@
// Вторая строка</pre>
</section>
<h3 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h3>
<section class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
<dl class="dl-horizontal">
<dt>Ассоциативный список</dt>
......@@ -196,6 +210,8 @@
</dl>
</section>
<section class="blocks-library__item" id="blockquote-right" data-name=".blockquote-right">
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
......@@ -210,9 +226,11 @@
</blockquote>
</section>
<section class="blocks-library__item" id="list-nums" data-name=".list-nums">
<div class="row">
<div class="col-sm-6">
<div class="col-md-6">
<ol class="list-nums">
<li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
......@@ -225,7 +243,7 @@
<li>Власти, она себя за?</li>
</ol>
</div>
<div class="col-sm-6">
<div class="col-md-6">
<ul class="list-nums">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
......@@ -237,9 +255,11 @@
</div>
</section>
<section class="blocks-library__item" id="list-bullet" data-name=".list-bullet">
<div class="row">
<div class="col-sm-6">
<div class="col-md-6">
<ul class="list-bullet">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
......@@ -253,7 +273,7 @@
<li>Решила алфавит, назад маленький.</li>
</ul>
</div>
<div class="col-sm-6">
<div class="col-md-6">
<ol class="list-bullet">
<li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
......@@ -264,11 +284,15 @@
</div>
</section>
<section class="alert alert--danger" id="text-sizes">
<h2>Текстовые хелперы</h2>
<p>Классов, вроде <code>.test-accent</code> (увеличенный текст), <code>.test-secondary</code> (уменьшенный текст), <code>.test-muted</code> («приглушенный» текст), <code>.align-center</code> (выравнивание текста по центру), <code>.bg-primary</code> (заданный цвет фона) и т.п. тут не будет. Это не фреймворк, это стартовая библиотека блоков. Предполагается, что пользователь в состоянии прицельно применить любую стилизацию по семантическому классу уровня блока/элемента/модификатора.</p>
</section>
<hr>
......
src/less/global/global-scaffolding.less
View file @ 2c35bb76
......@@ -60,12 +60,16 @@ textarea {
html {
box-sizing: border-box;
font-size: 10px;
font-size: 8px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%;
min-width: 320px;
site: be cool; // :)
@media (min-width: @screen-sm) {
font-size: 10px;
}
}
body {
......@@ -178,7 +182,11 @@ dt {
}
dd {
margin-left: 0;
@media (min-width: @screen-sm) {
margin-left: 1.8em;
}
& + dt {
margin-top: (@line-height / 2);
......@@ -218,9 +226,16 @@ abbr[title] {
}
blockquote {
padding: 0 0 0 .5em;
margin-left: 0;
margin-right: 0;
border-left: 1px solid @border-color;
@media (min-width: @screen-sm) {
padding: 0 0 0 1.8em;
margin-left: 0;
border-left: 5px solid @border-color;
border-left-width: 5px;
}
p,
ul,
......
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