.menu {
position: relative;
&__item {
display: block;
margin-bottom: 5px;
position: relative;
}
&__link {
display: block;
font-size: 1rem;
color: blue;
}
&__img {
position: absolute;
width: 10px;
height: 10px;
display: none;
}
//==
//== Hover & active states
//== ======================================= ==//
&__link:hover,
&__link_active {
color: red;
}
&__link:hover + &__img,
&__link_active + &__img {
display block;
}
}function getInfo( ) {
return new Promise((resolve, reject) => {
$.ajax({
type: "POST",
url: "handler.php",
data: {action:'getInfo'},
success: function(resp) {
resolve(resp);
},
error: function() {
reject()
}
});
});
}
getInfo().then(result=> {
console.log(result);
});.heading {
position: relative;
…
&::before {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100vw; /* или 99999px; */
background: rgba(blue, 0.5);
z-index: -1;
transform: skewX(30deg);
}
}я хочу научиться, но уже на готовом к моему слайдер коду.
setInterval(plusSlide, 4000);
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/config/env-production.scss";`,
},
},
},{
"name": "mysite.local",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"bs-grid-system": "^2.0.3",
"jquery": "^3.3.1",
"normalize.css": "^8.0.1",
"tiny-slider": "^2.9.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"browser-sync": "^2.26.3",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^6.0.0",
"gulp-babel": "^8.0.0",
"gulp-changed-in-place": "^2.3.0",
"gulp-concat": "^2.6.1",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^4.0.2",
"gulp-sequence": "^1.0.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-twig": "^1.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "delphinpro <delphinpro@yandex.ru>",
"license": "MIT"
}const gulp = require('gulp');
const sass = require('gulp-sass');
const twig = require('gulp-twig');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');
const sequence = require('gulp-sequence');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const changed = require('gulp-changed-in-place');
const bs = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src([
'./node_modules/normalize.css/normalize.css',
'./node_modules/tiny-slider/dist/tiny-slider.css',
'./src/sass/**/*.scss',
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'nested' }))
.pipe(autoprefixer())
.pipe(concat('main.css'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public_html/design/'))
.pipe(bs.stream())
;
});
gulp.task('js:vendor', function (done) {
gulp.src([
'./node_modules/jquery/dist/jquery.min.js',
'./node_modules/whatwg-fetch/dist/fetch.umd.js',
'./node_modules/tiny-slider/dist/min/tiny-slider.js',
])
.pipe(plumber())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(concat('vendor.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public_html/design/'))
.on('end', done)
;
});
gulp.task('js', function (done) {
gulp.src([
'./src/js/main.js',
'./src/js/**/*.js',
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat('main.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public_html/design/'))
.on('end', function () {
bs.reload();
done();
})
;
});
gulp.task('twig', function (done) {
gulp.src([
'./src/twig/*.twig',
])
.pipe(plumber())
.pipe(twig({
base: [__dirname],
}))
.pipe(changed({ firstPass: true }))
.pipe(gulp.dest('./public_html/'))
.on('end', function () {
bs.reload();
done();
})
;
});
gulp.task('serve', function () {
bs.init({
ui: false,
//proxy: 'mysite.local',
server : './public_html',
browser: ['chrome'],
});
// gulp.watch('./public_html/*.html').on('change', bs.reload);
gulp.watch('./src/sass/**/*.scss', ['sass']);
gulp.watch('./src/js/**/*.js', ['js']);
gulp.watch('./src/twig/**/*.twig', ['twig']);
});
gulp.task('default', sequence(['twig', 'sass', 'js', 'js:vendor'], 'serve'));
<div class="page">
<div class="page__main"> ... </div>
<div class="page__side"> ... </div>
</div><div class="page__main">
<div class="section">
<div class="section__body">
...
</div>
</div>
</div>/*==
*== Page layout
*== ======================================= ==*/
.page {
@include make-row();
&__main,
&__side {
@include make-col-ready();
}
&__side {
z-index: 1;
}
// <…cut>
@include media-breakpoint-up(lg) {
&__main {
@include make-col(9);
}
&__side {
@include make-col(3);
order: -1;
}
}
}$default-scrollbar-width: 16px;
.section {
@include make-row();
position: relative;
&__body { @include make-col-ready(); }
&::before {
z-index: -1;
position: absolute;
top: 0;
right: percentage(6/9);
width: 100vw;
height: 100%;
transform: translateX(50%);
margin-right: ($default-scrollbar-width / 2);
}
}App.compensateWidthScrollbar = function () {
let width = this.getScrollbarWidth();
let css = '.section::before{margin-right:'+ (width / 2) + 'px';
let style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
(document.head || document.getElementsByTagName('head')[0]).appendChild(style);
};
.input_boxes_flex {
display: grid;
/* grid-template-columns: 50% 50%; */
grid-template-columns: 1fr 1fr;
gap: 10px;
}const sm = $('.side-menu');
if (!sm.length) return;
sm.on('click', 'button', function () {
let item = $(this).closest('li');
item.toggleClass('open');
item.children('ul').slideToggle();
item.closest('ul').children('li').not(item).find('ul').slideUp();
});
sm.find('.open').children('ul').show();<ul class="side-menu">
<li class="open">
<span><a href="#">Металлопрокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class="open">
<span><a href="#">Сортовой прокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class="">
<span><a href="#">Квадратный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class=""><span><a href="#">Балка</a></span></li>
<li class=""><span><a href="#">Уголок</a></span></li>
<li class="current"><span><a href="#">Швеллер</a></span></li>
<li class=""><span><a href="#">Арматура</a></span></li>
</ul>
</li>
<li class="">
<span><a href="#">Круглый</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class=""><span><a href="#">Балка</a></span></li>
<li class=""><span><a href="#">Уголок</a></span></li>
<li class="current"><span><a href="#">Швеллер</a></span></li>
<li class=""><span><a href="#">Арматура</a></span></li>
</ul>
</li>
<li class="">
<span><a href="#">Шестигранный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class=""><span><a href="#">Балка</a></span></li>