Skip to content

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

Поправил компиляцию

parent 869caa9e
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 225 deletions
gulpfile.js
View file @ 25015b58
......@@ -95,7 +95,7 @@ gulp.task('style:single', function () {
.pipe(plumber({
errorHandler: function(err) {
notify.onError({
title: 'Styles compilation error',
title: 'Single style compilation error',
message: err.message
})(err);
this.emit('end');
......@@ -368,8 +368,10 @@ gulp.task('serve', ['build'], function() {
});
// Слежение за стилями
gulp.watch([
dirs.srcPath + 'scss/style.scss',
dirs.srcPath + dirs.blocksDirName + '/**/*.scss',
dirs.srcPath + '/scss/**/*.scss',
pjson.configProject.addCssBefore,
pjson.configProject.addCssAfter,
], ['style']);
// Слежение за отдельными стилями
gulp.watch(pjson.configProject.singleCompiled, ['style:single',]);
......
src/blocks/blocks-library/blocks-library.html deleted 100644 → 0
View file @ 869caa9e
<!--DEV
<section class="blocks-library__item" id="" data-name="Пояснение сбоку">
<h1 class="blocks-library__item-title">Раздел</h1>
Контент
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Подраздел</h2>
Контент
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre>
<code class="html">&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;</code>
</pre>
</div>
</div>
</div>
</section>
-->
src/blocks/blocks-library/blocks-library.js deleted 100644 → 0
View file @ 869caa9e
// Не работает в IE11
ready(function(){
// Открытие/закрытие блока с кодом
var codeShowTriggers = document.querySelectorAll('.blocks-library__code-show-trigger');
for (var i = 0; i < codeShowTriggers.length; i++) {
codeShowTriggers[i].addEventListener('click', function(){
this.closest('.blocks-library__code-wrapper').querySelector('.blocks-library__code').classList.toggle('blocks-library__code--shown');
});
}
// Изменение размера шрифта на произвольном блоке
var parent, fontSizeEm;
$('.js-font-resizer')
.css('font-size', '1em')
.append('<div class="js-font-resizer__btns"><button class="btn btn--sm js-button-plus">+</button><button class="btn btn--sm js-button-null">0</button><button class="btn btn--sm js-button-minus">-</button></div>')
.on('click', 'button.js-button-plus', function(){
parent = $(this).closest('.js-font-resizer');
fontSizeEm = /(\d*\.?\d?)(em)/g.exec(parent.attr('style'));
parent.css('font-size', parent.css('font-size', parseFloat(fontSizeEm[0], 10) + 0.1 + 'em') );
}).on('click', 'button.js-button-minus', function(){
parent = $(this).closest('.js-font-resizer');
fontSizeEm = /(\d*\.?\d?)(em)/g.exec(parent.attr('style'));
parent.css('font-size', parent.css('font-size', parseFloat(fontSizeEm[0], 10) - 0.1 + 'em') );
}).on('click', 'button.js-button-null', function(){
parent = $(this).closest('.js-font-resizer');
parent.css('font-size', '1em' );
});
});
src/blocks/blocks-library/blocks-library.scss deleted 100644 → 0
View file @ 869caa9e
.blocks-library {
&__item {
position: relative;
padding: 1rem;
border: 2px dashed $gray-lighter;
margin-bottom: 2.5em;
@media (min-width: $screen-md) {
padding: 1.5rem 2rem 1.5rem 5rem;
min-height: 18rem;
margin-bottom: 5rem;
}
&:before {
content: attr(data-name);
position: absolute;
top: -1em;
left: 0;
font-weight: 700;
text-transform: lowercase;
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: 20rem;
width: 21rem;
transform: rotate(-90deg);
transform-origin: 0 100%;
}
}
}
&__item-title {
margin: 0.3em 0;
}
&__sub-item {}
&__sub-item-title {}
&__code-wrapper {
position: relative;
}
&__code-show-trigger {
display: block;
width: 3rem;
height: 20px;
cursor: pointer;
margin-bottom: 0.3em;
@media (min-width: $screen-md) {
position: absolute;
top: -1.8rem;
left: -4rem;
}
}
&__code-icon {
display: block;
width: 3rem;
height: 2px;
background-color: $gray-light;
&:before,
&:after {
position: absolute;
background-color: $gray-light;
width: 3rem;
height: 2px;
left: 0;
content: '';
}
&:before {
top: 8px;
}
&:after {
top: 16px;
}
}
&__code {
overflow: hidden;
.js & {
max-height: 0;
transition-duration: $transition-time;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.js &--shown {
transition-duration: $transition-time;
transition-timing-function: ease-in;
max-height: 1000px;
}
pre {
margin: 0;
max-height: 500px;
}
}
.js-font-resizer {
position: relative;
@media (min-width: $screen-md) {
&:hover {
.js-font-resizer__btns {
opacity: 1;
}
}
}
}
.js-font-resizer__btns {
margin-bottom: 1em;
font-size: 2rem;
transition: opacity 0.3s;
@media (min-width: $screen-md) {
opacity: 0.2;
position: absolute;
top: 0;
left: -4rem;
width: 4rem;
}
.btn {
width: 3rem;
text-align: center;
}
}
}
src/blocks/code/code.scss
View file @ 25015b58
......@@ -7,19 +7,19 @@ $gray-lightest: hsl(0, 0%, 90%) !default;
$border-radius: 3px !default;
.code {
display: block;
width: 100%;
max-height: 50rem;
overflow-x: auto;
padding: 1em;
background-color: $gray-lightest;
border-radius: $border-radius;
border: 1px solid $gray-lighter;
white-space: normal;
tab-size: 2;
// display: block;
// width: 100%;
// max-height: 50rem;
// overflow-x: auto;
// padding: 1em;
// background-color: $gray-lightest;
// border-radius: $border-radius;
// border: 1px solid $gray-lighter;
// white-space: normal;
// tab-size: 2;
code {
display: block;
white-space: pre;
}
// code {
// display: block;
// white-space: pre;
// }
}
src/blocks/typo/typo.scss
View file @ 25015b58
......@@ -228,7 +228,7 @@ samp {
code {
color: $text-color;
background-color: $gray-lighter;
background-color: $gray-lightest;
padding: 0.06em 0.3em;
border-radius: $border-radius;
}
......@@ -236,7 +236,7 @@ code {
kbd {
padding: 0.06em 0.3em;
color: $text-color;
background-color: $gray-lighter;
background-color: $gray-lightest;
border-radius: $border-radius;
kbd {
......@@ -254,4 +254,8 @@ pre {
border: 1px solid $gray-lighter;
white-space: normal;
tab-size: 2;
code {
background-color: transparent;
}
}
src/index.html
View file @ 25015b58
......@@ -12,7 +12,7 @@
<h1>NTH start project 1</h1>
<p><a href="components-demo.html">Страница с демкой компонентов</a></p>
<p><a href="blocks-demo.html">Страница с демкой компонентов</a></p>
@@include('_include/page_bottom.html')
</body>
......
src/scss/blocks-library.scss
View file @ 25015b58
@import "./src/scss/variables.scss";
@import "./src/scss/mixins.scss";
@import "./src/blocks/blocks-library/blocks-library.scss";
.blocks-library {
&__item {
position: relative;
padding: 1rem;
border: 2px dashed $gray-lighter;
margin: 2.5em 0;
@media (min-width: $screen-md) {
padding: 1.5rem 2rem 1.5rem 5rem;
min-height: 18rem;
margin: 5rem 0;
}
&:before {
content: attr(data-name);
position: absolute;
top: -1em;
left: 0;
font-weight: 700;
text-transform: lowercase;
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: 20rem;
width: 21rem;
transform: rotate(-90deg);
transform-origin: 0 100%;
}
}
}
&__item-title {
margin: 0.3em 0;
}
&__sub-item {}
&__sub-item-title {}
&__code-wrapper {
position: relative;
}
&__code-show-trigger {
display: block;
width: 3rem;
height: 20px;
cursor: pointer;
margin-bottom: 0.3em;
@media (min-width: $screen-md) {
position: absolute;
top: -1.8rem;
left: -4rem;
}
}
&__code-icon {
display: block;
width: 3rem;
height: 2px;
background-color: $gray-light;
&:before,
&:after {
position: absolute;
background-color: $gray-light;
width: 3rem;
height: 2px;
left: 0;
content: '';
}
&:before {
top: 8px;
}
&:after {
top: 16px;
}
}
&__code {
overflow: hidden;
.js & {
max-height: 0;
transition-duration: $transition-time;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.js &--shown {
transition-duration: $transition-time;
transition-timing-function: ease-in;
max-height: 1000px;
}
pre {
margin: 0;
max-height: 500px;
}
}
.js-font-resizer {
position: relative;
@media (min-width: $screen-md) {
&:hover {
.js-font-resizer__btns {
opacity: 1;
}
}
}
}
.js-font-resizer__btns {
margin-bottom: 1em;
font-size: 2rem;
transition: opacity 0.3s;
@media (min-width: $screen-md) {
opacity: 0.2;
position: absolute;
top: 0;
left: -4rem;
width: 4rem;
}
.btn {
width: 3rem;
text-align: center;
}
}
}
src/scss/print.scss
View file @ 25015b58
......@@ -18,15 +18,15 @@
content: ' (' attr(href) ')';
}
abbr[title]:after {
content: ' (' attr(title) ')';
}
a[href^='#']:after,
a[href^='javascript:']:after {
content: '';
}
abbr[title]:after {
content: ' (' attr(title) ')';
}
pre,
blockquote {
border: 1px solid #999 !important;
......
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