Category: scss

06
Июл
2021

Почему sprite.svg не отображаются через gulp (но отображается через live server)?

Написал gulp – все работает, все компилируется
let project_folder="dist"; //выгружаемая папка для демонстрации заказчику
let source_folder="src"; //папка с исходниками

//создание объектов, которые содержат пути к файла…

06
Июл
2021

Почему sprite.svg не отображаются через gulp (но отображается через live server)?

Написал gulp – все работает, все компилируется
let project_folder="dist"; //выгружаемая папка для демонстрации заказчику
let source_folder="src"; //папка с исходниками

//создание объектов, которые содержат пути к файла…

25
Июн
2021

Липкое меню которое двигается за мышкой

При наведении мышки в красную область, нужно что бы темный блок с меню двигался за мышкой вверх – вниз не отлипая от правого края, как такое реализовать, буду благодарен за помощь.
Стек на котором нужно сделать React/ReactHooks но можно и …

21
Июн
2021

При сборке путь шрифтов генерируется не правильно. Как это исправить?

У меня тут такая проблема с webpack, что пути в font-face для шрифтов после сборки генерируются не правильно.
Вот так выглядит файл конфигураций:
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",

29
Май
2021

Angular active class ngFor

у меня есть массив который состоит из объектов,этот массив я добавляю в HTML с помощью *ngFor и обрабатываю событие клик,чтобы при нажатии добавить активный класс.
@Directive({
selector: ‘[appHome]’
})
export class HomeDirective {

@Ho…

05
Май
2021

Как правильно вписать большую картинку в маленький блок целиком на CSS/SCSS?

В макете есть такой блок:

Тут две строки по 4 примера работ. Решил сделать на flex одну строку, чтоб по кнопке можно было догружать еще работы, но пока до JS не дошел. Нужно вписать картинку любого размера в квадрат.
Есть например картинк…

14
Апр
2021

Как реализовать прокрутку таблицы при выполнении условий?

Есть таблица в которой юзер с помощью клавиатуры может влево/вправо/вниз/вверх перемещаться по ячейкам (это все работает), сейчас ячейка перемещается к примеру вправо и таблица скролится, а нужно что бы таблица скролилась только если ячейк…

14
Апр
2021

Как реализовать прокрутку таблицы при выполнении условий?

Есть таблица в которой юзер с помощью клавиатуры может влево/вправо/вниз/вверх перемещаться по ячейкам (это все работает), сейчас ячейка перемещается к примеру вправо и таблица скролится, а нужно что бы таблица скролилась только если ячейк…

19
Мар
2021

При написании media запросов Gulp выдаёт ошибку: Error in plugin "sass"

Всем доброго дня! Подскажите, пожалуйста, в чем может быть причина?
При написании медиа запросов возникает данная ошибка: Error in plugin "sass"
Message:
src\sass\style.scss
Error: File to import not found or unreadable: base…

23
Фев
2021

Flip-cards на IOS устройствах. Текст бликует при закрытии карточки

Всем привет! У меня такая проблема. Я создал флип-кард. При нажатии на карточку она переворачивается. Есть сразу несколько карточек. Есть открытая карта и при нажатии на другую закрытую карту открытая закрывается. НО прикол в том что на IO…

22
Янв
2021

Слайдер с табами

Подскажите слайдер с табами, что бы при переключении по стрелкам активный таб менялся,
и по клику на таб, активный слайд менялся, можно библиотеку, нашел только как вариант Coda Slider, но он не совсем подходит.
Может есть варианты не би…

21
Янв
2021

Активные ссылки в навигации

не могу понять как сделать что бы желтый прямоугольник плавно переезжал к активному пункту меню при наведении(mouseenter), нужно реализовать на js.
пробовал добавлять активный класс каждой ссылке при mouseenter,
но тогда желтый прямоугльн…

21
Янв
2021

Менять цвет линий и кругов при скроле вниз и обратно

Нужно сделать так что бы при скроле линии меняли цвет(когда цвет фона черный то круги и линии белые) и менялся активный круг с Продукция на другой, (скролл вверх и обратно).
Я начал писать на jquery, сделал что бы при скроле вниз менял…

12
Янв
2021

Помогите пожалуйста сделать маленький функционал для калькулятора на vue.js

Помогите пожалуйста сделать функционал на vue.js! У меня есть калькулятор. Заказчик попросил сделать что бы при нажатии и выборе определенного элемента из списка, появлялись несколько картинок(цветов), которую можно выбрать и в процессе от…

13
Дек
2020

Не работает backround url (GULP + SASS)

Выдает Cannot GET /images/img.png при просмотре в режиме разработчика (Open in new tab), при этом через img в HTML все хорошо.
На SCSS подключение не ругается, дает зеленый свет.
Через ссылку получается background-image: url("https:/…

29
Ноя
2020

Как подружить свойства display, opacity и transition?

Мне нужно, чтобы элемент плавно появлялся из ниоткуда. Его изначальные стили:
transition: ‘all 1s linear’;
display: ‘none’;
opacity: 0;

При клике он должен появляться и становиться в:
display: ‘block’;
opacity: 1;

В моем коде он появляет…

24
Окт
2020

Как поместить стрелки внутрь swiper?

По макету нужно сделать такой блок:

Вроде бы ничего особенного. Я решил использовать swiper т.к. его дефолтные стили похожи на макетные. Я пока просто подключил его и получил следующие:

Как поставить стрелки на картинку?
Моя разметка:
&l…

13
Окт
2020

Как вообще должна работать эта функция?

С помощью Node.js хочу получить из директории fonts все шрифты (они там в формате woff и woff2) и подключить их в файл fonts.scss, но функция, которую я нашел в интернете не работает. После запуска gulp файл так и остается пустым. Помогите…

12
Окт
2020

Как два разные сss файла подключить к 2-ум разным html файлам с помощью webpack? типа: style1.css -> index1.html, style2.css -> index2.html

const HTMLWebpackPlugin = require(‘html-webpack-plugin’)
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin’)
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

const isDev = process.env.NODE_ENV === ‘development’

mo…

11
Окт
2020

@import в js файлах

В scss у меня есть главный файл common.scss в который я добавляю новые файлы с помошью команды @import
Потом все это дело обарабатывается с помощью gulp
common.scss
@import ‘./my-file’;

my-file.scss
.container {
color: red;
}

Как так…