Часто приходится сталкиваться с невозможностью применения стандартных элементов в том или ином дизайне визуализации. Как пример имеем стандартные управляющие элементы:
Дизайнеры видят решение в таком виде:
Будем приводить стандартные элементы к желаемым с помощью возможности LogicMachine — Custom css. Редактор можно найти в разделе LogicMachine — > Графика -> Редактировать пользовательский CSS (Logic Machine – Vis. Graphics – Custom css).
Изменение стилей в Пользовательском CSS приведёт их к изменению во всей визуализации, если не применять дополнительные классы.
Начнем с горизонтальных слайдеров.
Для начала требуется сделать их «тонкими» и с прозрачным фоном:
.progress {
background-color: #382d2b;
height: 2px;
border: 1px #7f655a solid !important;
}
.slider-h .slider {
width: 240px;
padding: 31px 0px;
}
.slider-h .slider .progress {
margin: 0px 0px;
width: 238px;
}Далее убираем кнопки минимума и максимума, оставляя место под них (так удобнее будет выравнивать слайдеры в конструкторе):
.slider-min.icon {
padding: 5px 5px;
visibility: hidden;
}
.slider-max.icon {
padding: 5px 5px;
visibility: hidden;
}Для замены «бегунка» слайдера будем использовать кодирование картинки в формат BASE64 и вставим картинку сразу в css. Для кодирования я использовал данный сервис http://www.base64-image.de/:
.slider-handle{
padding: 0px 0px !important;
width: 61px !important;
height: 61px !important;
background-image: url("data:image/png;base64,iVBORw0K… (код картинки)");
background-color: transparent !important;
border: 0px;
box-shadow: none !important;
}Здесь так же указывается, что нам не нужен фон (будет прозрачным) и не нужны границы и тени.
Для отключения визуальных эффектов при выставлении значения в слайдере применим следующий код:
.slider-handle:hover { background-position: 0 0; }
.slider-handle:hover { background-color: transparent; }Получилось вот так,
Исходя из макета, во втором столбце нам нужны другие «бегунки». Для этого в объектах, отвечающих за эти слайдеры, сделаем дополнительный класс
В данном случае класс имеет название sliderdark, но в целом это непринципиально. Теперь необходимо прописать для дополнительного класса свой «бегунок». Правим только те позиции, которые отличаются от базового «бегунка»:
.sliderdark .slider-handle{
background-image: url("data:image/png;base64,iVBORw….. ");
background-color: transparent;
border: 0px;
box-shadow: none !important;
}Также с помощью параметра !important указываем браузеру на необходимость использования именно этих параметров.
Получилось вот так:
С первым планом закончили. Переходим ко второму. Так он выгладит на данный момент.
Необходимо сделать progress bar тонким и сделать ему нужный размер:
.slider-v .slider .progress {
bottom: 0;
left: 35px;
right: auto;
top: 0;
width: 2px;
}
.slider-v .slider {
height: 295px;
width: 3px;
padding: 0px 33px;
}Получилось вот так:
Осталось поменять сам «бегунок» на необходимый. Аналогично применяем дополнительный класс. Пусть это будет sliderbronze:
.sliderbronze .slider-handle{
background-image: url("data:image/png;base64,iVBORw0….") !important;
background-color: transparent;
border: 0px;
box-shadow: none !important;
}Результат:
Что и требовалось изначально.