Merge pull request #875 from a2nt/master
FIX: Fonts for Cyrilic languages
This commit is contained in:
James Barnsley
GitHub
@ -19,10 +19,10 @@ errors:
|
||||
title: Невозможно изменить порядок элементов
|
||||
description: Удалить сортировку/фильтры и повторить попытку
|
||||
actions:
|
||||
play: Играть
|
||||
play: Воспроизвести
|
||||
play_all: Воспроизвести все
|
||||
play_next: Играть дальше
|
||||
shuffle_play: Играть в случайном порядке
|
||||
play_next: Воспроизвести следующим
|
||||
shuffle_play: Воспроизвести в случайном порядке
|
||||
pause: Пауза
|
||||
stop: Стоп
|
||||
add_to_playlist: Добавить в плейлист
|
||||
@ -31,7 +31,7 @@ actions:
|
||||
remove_from_library: Удалить из библиотеки
|
||||
add_to_queue: Добавить в очередь
|
||||
reset: Сброс
|
||||
back: Отменить
|
||||
back: Назад
|
||||
refresh: Oбновить
|
||||
enable: Включить
|
||||
disable: Выключить
|
||||
@ -59,7 +59,7 @@ common:
|
||||
by: 'после'
|
||||
loading_library: 'Загружается %{provider} %{type}'
|
||||
play_state:
|
||||
playing: Играет
|
||||
playing: Воспроизведение
|
||||
paused: Приостановлено
|
||||
stopped: Остановлено
|
||||
idle: Бездействие
|
||||
@ -78,7 +78,7 @@ fields:
|
||||
all: Все
|
||||
thumbnails: Миниатюры
|
||||
list: Список
|
||||
as_loaded: Как загружено
|
||||
as_loaded: Время добавления
|
||||
name: Имя
|
||||
artist: Исполнитель
|
||||
album: Альбом
|
||||
@ -132,7 +132,7 @@ services:
|
||||
restore_defaults: Восстановить значения по умолчанию
|
||||
mopidy:
|
||||
title: Mopidy
|
||||
local: Local
|
||||
local: Локальные
|
||||
adding_uris: 'Добавление %{count} URI(s)'
|
||||
adding_uris_broadcast: '%{username} добавил %{count} URI(s)'
|
||||
searching: 'Поиск %{provider} %{type}'
|
||||
@ -165,8 +165,8 @@ services:
|
||||
sidebar:
|
||||
now_playing: Сейчас играет
|
||||
search: Поиск
|
||||
discover: Обнаружить
|
||||
genre: Жанр / Настроение
|
||||
discover: Найти новое
|
||||
moods: Жанр / Настроение
|
||||
featured_playlists: Избранные плейлисты.
|
||||
new_releases: Новые релизы
|
||||
my_music: Моя музыка
|
||||
@ -174,7 +174,7 @@ sidebar:
|
||||
artists: Исполнитель
|
||||
albums: Альбомы
|
||||
tracks: Треки
|
||||
browse: Смотреть
|
||||
browse: Сервисы
|
||||
settings: Настройки
|
||||
servers: Серверы
|
||||
not_connected: '%{name} не подключен'
|
||||
@ -185,7 +185,7 @@ context_menu:
|
||||
title: Добавить в плейлист
|
||||
new_playlist: Создать плейлист
|
||||
no_playlists: Нет доступных для записи плейлистов
|
||||
play_next: Играть дальше
|
||||
play_next: Воспроизвести следующим
|
||||
play_top_tracks: Воспроизвести лучшие треки
|
||||
play_all_tracks: Воспроизвести все треки
|
||||
love_track: Любимые треки
|
||||
@ -213,7 +213,7 @@ snapcast:
|
||||
show_disconnected_clients: Показать отключенные клиенты
|
||||
no_connected_clients: Нет подключенных клиентов
|
||||
host: Host
|
||||
port: Port
|
||||
port: Порт
|
||||
name: Имя
|
||||
name_disconnected: Имя (Отключен)
|
||||
group: Группа
|
||||
@ -229,9 +229,9 @@ snapcast:
|
||||
incompatible: ' (требуется при подключении из сеанса браузера HTTPS)'
|
||||
authentication:
|
||||
popup_blocked: Всплывающее окно заблокировано. Разрешите всплывающие окна и повторите попытку.
|
||||
failed: Авторизация не удалась. %{origin} is not the configured authorization_url.
|
||||
log_out: Log out
|
||||
log_in: Log in
|
||||
failed: Авторизация не удалась. %{origin}, не настроен authorization_url.
|
||||
log_out: Выйти
|
||||
log_in: Войти
|
||||
|
||||
|
||||
##
|
||||
@ -255,7 +255,7 @@ album:
|
||||
title: О
|
||||
published: 'Опубликовано: %{date}'
|
||||
tracks:
|
||||
title: Треке
|
||||
title: Треки
|
||||
sort:
|
||||
disc_track: Номер трека
|
||||
name: Имя
|
||||
@ -418,14 +418,17 @@ settings:
|
||||
upgrade_available: 'Доступно обновление (%{version})'
|
||||
upgrade: 'Обновить до %{version}'
|
||||
up_to_date: Актуально
|
||||
share_configuration: Поделиться конфигурацией
|
||||
shared_configuration:
|
||||
label: Конфигурация
|
||||
share: Поделиться
|
||||
import: Импортировать
|
||||
restart: Перезапустить сервер
|
||||
reset: Сброс настроек
|
||||
about:
|
||||
title: О
|
||||
blurb_1: ' это проект с открытым исходным кодом от '
|
||||
blurb_2: '. It is provided free and with absolutely no warranty. If you paid someone for this software, please let me know.'
|
||||
donate: Donate
|
||||
donate: Поддержать
|
||||
github: GitHub
|
||||
pusher_connection_list:
|
||||
not_connected: Не подключен
|
||||
@ -454,7 +457,7 @@ settings:
|
||||
unknown: Неизвестно
|
||||
current_user: Текущий пользователь
|
||||
authorization: Авторизация
|
||||
refresh_token: RОбновить токен
|
||||
refresh_token: Обновить токен
|
||||
authorized: Авторизованный
|
||||
read_only: Только для чтения
|
||||
unauthorized: Неавторизованный
|
||||
@ -563,9 +566,45 @@ modal:
|
||||
title: Добро пожаловать в Ирис
|
||||
username: Пользователь
|
||||
kiosk:
|
||||
title: Сейчас играет
|
||||
title: Воспроизведение
|
||||
title_window: '%{name} by %{artist} (сейчас воспроизводится)'
|
||||
lyrics: Текст песни
|
||||
shared_config:
|
||||
no_peers: Нет соединений
|
||||
recipients: Получатели
|
||||
configurations: Настройки
|
||||
import_now: Импортировать
|
||||
imported: Импортирование завершено
|
||||
share: Поделиться
|
||||
shared: Настройки предоставлены
|
||||
push:
|
||||
title: Поделиться настройками
|
||||
subtitle: Поделиться авторизациями и настройками интерфейса с другими подключенными пользователями
|
||||
pushed:
|
||||
title: Настройки получены
|
||||
subtitle: Другой пользователь поделилился настройками с вами
|
||||
server:
|
||||
title: Импортировать настройки
|
||||
subtitle: Импортировать авторизации сторонних серверов и настройки интерфейса
|
||||
label: Сервер
|
||||
description: Сохранить на сервер чтобы другие пользователи могли импортировать
|
||||
config:
|
||||
label: Настройки
|
||||
ui:
|
||||
label: Пользовательский интерфейс
|
||||
description: Тема, сортировка, фильтры и т.д.
|
||||
spotify:
|
||||
label: Авторизация Spotify
|
||||
description: 'Вы вошли в систему как %{name}'
|
||||
lastfm:
|
||||
label: Авторизация LastFM
|
||||
description: 'Вы вошли в систему как %{name}'
|
||||
genius:
|
||||
label: Авторизация Genius
|
||||
description: 'Вы вошли в систему как %{name}'
|
||||
snapcast:
|
||||
label: Сервер Snapcast
|
||||
description: Настройки подключения
|
||||
share_configuration:
|
||||
title: Поделиться конфигурацией
|
||||
subtitle: Передайте свои авторизации и настройки интерфейса другому подключенному пользователю
|
||||
|
||||
@ -1,375 +1,375 @@
|
||||
|
||||
@include responsive($bp_medium){
|
||||
body.context-menu-open {
|
||||
.body {
|
||||
@include blur(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: "Overpass";
|
||||
|
||||
&__section {
|
||||
@include animate();
|
||||
overflow-y: scroll;
|
||||
|
||||
&--submenu {
|
||||
z-index: 3;
|
||||
border-radius: 3px;
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
|
||||
.context-menu {
|
||||
&__item {
|
||||
width: 100%;
|
||||
|
||||
&--functional {
|
||||
color: colour('mid_grey');
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 1px solid colour('middle_grey');
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
.icon {
|
||||
margin-bottom: 0.4em;
|
||||
padding-right: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--items {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
|
||||
&--disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@include gradient_overlay(3px);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 9px 12px 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&--inactive {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notouch &:hover {
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
.notouch &:active {
|
||||
background: colour('turquoise');
|
||||
color: colour('white');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
|
||||
&.submenu-icon {
|
||||
display: inline-block;
|
||||
padding-top: 4px;
|
||||
margin-left: 10px;
|
||||
vertical-align: baseline
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loader {
|
||||
padding-top: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
|
||||
&.context-menu__item:last-of-type {
|
||||
border-bottom: 1px solid colour('middle_grey');
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: colour('middle_grey');
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&--submenu-expanded {
|
||||
.context-menu {
|
||||
|
||||
&__section {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
|
||||
&--submenu {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive(null, $bp_medium){
|
||||
width: 200px;
|
||||
overflow-x: hidden;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
|
||||
@include theme('dark') {
|
||||
background: colour('grey');
|
||||
}
|
||||
|
||||
&--closing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__section {
|
||||
background: none;
|
||||
overflow: visible;
|
||||
|
||||
&--submenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@include theme('dark') {
|
||||
background: colour('grey');
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
@include fadein(0.2s, 40px);
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
|
||||
&--closing {
|
||||
@include fadeout(0.2s, 40px);
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(rgba(24,24,24,0) 0%, rgba(24,24,24,1) 20%);
|
||||
z-index: 1;
|
||||
|
||||
@include theme('light') {
|
||||
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include clearfix();
|
||||
color: colour('mid_grey');
|
||||
padding: 16px 22px;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
float: left;
|
||||
width: 36px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&__type {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 0.3;
|
||||
font-weight: 200;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__deselect {
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 10%;
|
||||
max-height: 80%;
|
||||
overflow: auto;
|
||||
|
||||
&--submenu {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&--items {
|
||||
|
||||
/**
|
||||
* The following is for buttons automatically pulled from
|
||||
* a page header, so we don't have classname control
|
||||
**/
|
||||
.button {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
color: colour('white');
|
||||
background: none;
|
||||
transform: none;
|
||||
padding: 16px 22px;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
@include noanimate();
|
||||
color: colour('white') !important;
|
||||
background: colour('turquoise') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
opacity: 1;
|
||||
|
||||
&__link {
|
||||
@include animate();
|
||||
padding: 16px 22px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
@include noanimate();
|
||||
color: colour('white') !important;
|
||||
background: colour('turquoise') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-trigger {
|
||||
position: relative;
|
||||
|
||||
.actions & {
|
||||
font-size: 24px;
|
||||
padding: 2px 10px 1px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h4 &,
|
||||
h4 &:active {
|
||||
margin: -8px 0 0 10px;
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
body.context-menu-open {
|
||||
.body {
|
||||
@include blur(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: $font-family-alt;
|
||||
|
||||
&__section {
|
||||
@include animate();
|
||||
overflow-y: scroll;
|
||||
|
||||
&--submenu {
|
||||
z-index: 3;
|
||||
border-radius: 3px;
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
|
||||
.context-menu {
|
||||
&__item {
|
||||
width: 100%;
|
||||
|
||||
&--functional {
|
||||
color: colour('mid_grey');
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 1px solid colour('middle_grey');
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
.icon {
|
||||
margin-bottom: 0.4em;
|
||||
padding-right: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--items {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
|
||||
&--disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@include gradient_overlay(3px);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 9px 12px 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&--inactive {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notouch &:hover {
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
.notouch &:active {
|
||||
background: colour('turquoise');
|
||||
color: colour('white');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
|
||||
&.submenu-icon {
|
||||
display: inline-block;
|
||||
padding-top: 4px;
|
||||
margin-left: 10px;
|
||||
vertical-align: baseline
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loader {
|
||||
padding-top: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
|
||||
&.context-menu__item:last-of-type {
|
||||
border-bottom: 1px solid colour('middle_grey');
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: colour('middle_grey');
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&--submenu-expanded {
|
||||
.context-menu {
|
||||
|
||||
&__section {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
|
||||
&--submenu {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive(null, $bp_medium){
|
||||
width: 200px;
|
||||
overflow-x: hidden;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
|
||||
@include theme('dark') {
|
||||
background: colour('grey');
|
||||
}
|
||||
|
||||
&--closing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__section {
|
||||
background: none;
|
||||
overflow: visible;
|
||||
|
||||
&--submenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@include theme('dark') {
|
||||
background: colour('grey');
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
@include fadein(0.2s, 40px);
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
|
||||
&--closing {
|
||||
@include fadeout(0.2s, 40px);
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(rgba(24,24,24,0) 0%, rgba(24,24,24,1) 20%);
|
||||
z-index: 1;
|
||||
|
||||
@include theme('light') {
|
||||
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include clearfix();
|
||||
color: colour('mid_grey');
|
||||
padding: 16px 22px;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
float: left;
|
||||
width: 36px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&__type {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 0.3;
|
||||
font-weight: 200;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__deselect {
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 10%;
|
||||
max-height: 80%;
|
||||
overflow: auto;
|
||||
|
||||
&--submenu {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&--items {
|
||||
|
||||
/**
|
||||
* The following is for buttons automatically pulled from
|
||||
* a page header, so we don't have classname control
|
||||
**/
|
||||
.button {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
color: colour('white');
|
||||
background: none;
|
||||
transform: none;
|
||||
padding: 16px 22px;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
@include noanimate();
|
||||
color: colour('white') !important;
|
||||
background: colour('turquoise') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
opacity: 1;
|
||||
|
||||
&__link {
|
||||
@include animate();
|
||||
padding: 16px 22px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
@include noanimate();
|
||||
color: colour('white') !important;
|
||||
background: colour('turquoise') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-trigger {
|
||||
position: relative;
|
||||
|
||||
.actions & {
|
||||
font-size: 24px;
|
||||
padding: 2px 10px 1px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h4 &,
|
||||
h4 &:active {
|
||||
margin: -8px 0 0 10px;
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,208 +1,208 @@
|
||||
|
||||
.dropdown-field {
|
||||
@include noselect();
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: "Overpass";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
font-weight: 800;
|
||||
|
||||
&__name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&:not(.button) {
|
||||
@include animate();
|
||||
padding: 14px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.notouch &:hover {
|
||||
color: colour('blue');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
.label:not(.button) {
|
||||
color: colour('blue');
|
||||
}
|
||||
.dropdown-field__options {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--no-status-icon {
|
||||
.dropdown-field__options {
|
||||
&__item {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--no-label {
|
||||
.label > .text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
right: 10px;
|
||||
z-index: 97;
|
||||
display: none;
|
||||
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: colour('white');
|
||||
-ms-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 9px;
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
}
|
||||
|
||||
&__liner {
|
||||
color: colour('black');
|
||||
background: colour('white');
|
||||
min-width: 120px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include animate();
|
||||
@include gradient_overlay(3px);
|
||||
position: relative;
|
||||
padding: 9px 12px 8px 24px;
|
||||
cursor: pointer;
|
||||
color: colour('darkest_grey');
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.notouch &:hover {
|
||||
color: colour('darkest_grey');
|
||||
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#context-menu {
|
||||
.dropdown-field {
|
||||
padding: 16px 0;
|
||||
display: block;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
&__label {
|
||||
padding: 0 0 3px 0;
|
||||
opacity: 0.5;
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
cursor: default;
|
||||
|
||||
&__value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__name {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: colour('white');
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('dark_grey') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
display: block;
|
||||
position: static;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__liner {
|
||||
background: transparent;
|
||||
color: colour('white') !important;
|
||||
margin: -3px -5px;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('dark_grey') !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
padding: 3px 5px;
|
||||
border-radius: 0;
|
||||
color: colour('white') !important;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('dark_grey') !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-field {
|
||||
@include noselect();
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: $font-family-alt;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
font-weight: 800;
|
||||
|
||||
&__name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&:not(.button) {
|
||||
@include animate();
|
||||
padding: 14px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.notouch &:hover {
|
||||
color: colour('blue');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
.label:not(.button) {
|
||||
color: colour('blue');
|
||||
}
|
||||
.dropdown-field__options {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--no-status-icon {
|
||||
.dropdown-field__options {
|
||||
&__item {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--no-label {
|
||||
.label > .text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
right: 10px;
|
||||
z-index: 97;
|
||||
display: none;
|
||||
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: colour('white');
|
||||
-ms-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 9px;
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
}
|
||||
|
||||
&__liner {
|
||||
color: colour('black');
|
||||
background: colour('white');
|
||||
min-width: 120px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
|
||||
@include theme('light') {
|
||||
background: colour('white');
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include animate();
|
||||
@include gradient_overlay(3px);
|
||||
position: relative;
|
||||
padding: 9px 12px 8px 24px;
|
||||
cursor: pointer;
|
||||
color: colour('darkest_grey');
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.notouch &:hover {
|
||||
color: colour('darkest_grey');
|
||||
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#context-menu {
|
||||
.dropdown-field {
|
||||
padding: 16px 0;
|
||||
display: block;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
&__label {
|
||||
padding: 0 0 3px 0;
|
||||
opacity: 0.5;
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
cursor: default;
|
||||
|
||||
&__value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__name {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: colour('white');
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('dark_grey') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
display: block;
|
||||
position: static;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__liner {
|
||||
background: transparent;
|
||||
color: colour('white') !important;
|
||||
margin: -3px -5px;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('dark_grey') !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
padding: 3px 5px;
|
||||
border-radius: 0;
|
||||
color: colour('white') !important;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('dark_grey') !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,118 +1,118 @@
|
||||
|
||||
main {
|
||||
header {
|
||||
box-sizing: border-box;
|
||||
padding: 40px;
|
||||
margin-bottom: -40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
h1 {
|
||||
& > .icon {
|
||||
display: inline-block;
|
||||
padding-right: 14px;
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.header__options {
|
||||
margin-left: auto;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.context-menu-trigger {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.button,
|
||||
button {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-family: "Overpass";
|
||||
background: transparent;
|
||||
text-transform: none;
|
||||
padding: 13px 10px;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
color: colour('light_grey');
|
||||
vertical-align: unset;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
color: colour('blue');
|
||||
box-shadow: none;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
|
||||
&:hover {
|
||||
color: colour('blue');
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
padding: 10px 10px 10px 0;
|
||||
margin-bottom: -10px;
|
||||
|
||||
h1 {
|
||||
vertical-align: top;
|
||||
padding-top: 6px;
|
||||
|
||||
& > .icon {
|
||||
margin-bottom: 2px;
|
||||
padding-right: 6px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header__options {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
.context-menu-trigger {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
header {
|
||||
box-sizing: border-box;
|
||||
padding: 40px;
|
||||
margin-bottom: -40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
h1 {
|
||||
& > .icon {
|
||||
display: inline-block;
|
||||
padding-right: 14px;
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.header__options {
|
||||
margin-left: auto;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.context-menu-trigger {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.button,
|
||||
button {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-family: $font-family-alt;
|
||||
background: transparent;
|
||||
text-transform: none;
|
||||
padding: 13px 10px;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
color: colour('light_grey');
|
||||
vertical-align: unset;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
color: colour('blue');
|
||||
box-shadow: none;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
|
||||
&:hover {
|
||||
color: colour('blue');
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
padding: 10px 10px 10px 0;
|
||||
margin-bottom: -10px;
|
||||
|
||||
h1 {
|
||||
vertical-align: top;
|
||||
padding-top: 6px;
|
||||
|
||||
& > .icon {
|
||||
margin-bottom: 2px;
|
||||
padding-right: 6px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header__options {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
.context-menu-trigger {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,211 +1,211 @@
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 96;
|
||||
width: 220px;
|
||||
overflow: hidden;
|
||||
color: colour('white');
|
||||
box-sizing: border-box;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
&__liner {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60px;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
line-height: 1em;
|
||||
|
||||
&__item {
|
||||
font-family: "Overpass";
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
color: colour('white');
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
padding: 0.75em 0.85em;
|
||||
margin: 0 1.1em;
|
||||
border-radius: 3px;
|
||||
line-break: after-white-space;
|
||||
|
||||
@include theme('dark') {
|
||||
@include gradient_overlay(3px);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
@include animate();
|
||||
color: colour('darkest_grey');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: 8px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: auto;
|
||||
|
||||
.icon {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&--submenu {
|
||||
font-size: 1rem;
|
||||
padding: 0.6em 0.7em;
|
||||
font-weight: 400 !important;
|
||||
margin: 0 1.1em 0 3em;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.sidebar__menu__item {
|
||||
color: colour('mid_grey');
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('soft_grey');
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: transparent !important;
|
||||
color: colour('turquoise') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: colour('turquoise');
|
||||
color: colour('white') !important;
|
||||
|
||||
.status {
|
||||
.icon {
|
||||
color: colour('white') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: lighten(colour('darkest_grey'), 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not([disabled]):not(.sidebar__menu__item--active) {
|
||||
background: rgba(128, 128, 128, 0.25);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include noanimate();
|
||||
transform: translate(1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
padding-bottom: 25px;
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
padding: 0 26px 5px 26px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: colour('middle_grey');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
@include click_feedback();
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
z-index: 99;
|
||||
font-size: 1.2rem;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium) {
|
||||
@include animate(0.15s);
|
||||
width: 250px;
|
||||
left: auto;
|
||||
right: -250px;
|
||||
padding-bottom: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
|
||||
@include theme('light') {
|
||||
background: lighten(colour('faint_grey'), 2%);
|
||||
}
|
||||
|
||||
@include theme('dark') {
|
||||
background: colour('darkest_grey');
|
||||
}
|
||||
|
||||
.sidebar-open & {
|
||||
-ms-transform: translate(-250px, 0);
|
||||
-webkit-transform: translate(-250px, 0);
|
||||
transform: translate(-250px, 0);
|
||||
}
|
||||
|
||||
&__liner {
|
||||
bottom: 0 !important;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
&__section {
|
||||
padding-bottom: 10px;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 96;
|
||||
width: 220px;
|
||||
overflow: hidden;
|
||||
color: colour('white');
|
||||
box-sizing: border-box;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
&__liner {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60px;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
line-height: 1em;
|
||||
|
||||
&__item {
|
||||
font-family: $font-family-alt;
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
color: colour('white');
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
padding: 0.75em 0.85em;
|
||||
margin: 0 1.1em;
|
||||
border-radius: 3px;
|
||||
line-break: after-white-space;
|
||||
|
||||
@include theme('dark') {
|
||||
@include gradient_overlay(3px);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
@include animate();
|
||||
color: colour('darkest_grey');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: 8px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: auto;
|
||||
|
||||
.icon {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&--submenu {
|
||||
font-size: 1rem;
|
||||
padding: 0.6em 0.7em;
|
||||
font-weight: 400 !important;
|
||||
margin: 0 1.1em 0 3em;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.sidebar__menu__item {
|
||||
color: colour('mid_grey');
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('soft_grey');
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: transparent !important;
|
||||
color: colour('turquoise') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: colour('turquoise');
|
||||
color: colour('white') !important;
|
||||
|
||||
.status {
|
||||
.icon {
|
||||
color: colour('white') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
color: lighten(colour('darkest_grey'), 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not([disabled]):not(.sidebar__menu__item--active) {
|
||||
background: rgba(128, 128, 128, 0.25);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include noanimate();
|
||||
transform: translate(1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
padding-bottom: 25px;
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
padding: 0 26px 5px 26px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: colour('middle_grey');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
@include click_feedback();
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
z-index: 99;
|
||||
font-size: 1.2rem;
|
||||
|
||||
@include theme('light') {
|
||||
color: colour('darkest_grey');
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium) {
|
||||
@include animate(0.15s);
|
||||
width: 250px;
|
||||
left: auto;
|
||||
right: -250px;
|
||||
padding-bottom: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
|
||||
@include theme('light') {
|
||||
background: lighten(colour('faint_grey'), 2%);
|
||||
}
|
||||
|
||||
@include theme('dark') {
|
||||
background: colour('darkest_grey');
|
||||
}
|
||||
|
||||
.sidebar-open & {
|
||||
-ms-transform: translate(-250px, 0);
|
||||
-webkit-transform: translate(-250px, 0);
|
||||
transform: translate(-250px, 0);
|
||||
}
|
||||
|
||||
&__liner {
|
||||
bottom: 0 !important;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
&__section {
|
||||
padding-bottom: 10px;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: "Overpass", Helvetica, Arial, sans-serif;
|
||||
font-family: $font-family-alt;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.02rem;
|
||||
touch-action: manipulation;
|
||||
|
||||
@ -17,7 +17,7 @@ select {
|
||||
padding: 10px 14px;
|
||||
background: rgba(128, 128, 128, 0.05);
|
||||
color: colour('white');
|
||||
font-family: "Overpass", Helvetica, Arial, sans-serif;
|
||||
font-family: $font-family-alt;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: -0.01rem;
|
||||
|
||||
@ -4,6 +4,7 @@ $bp_medium: 800px;
|
||||
$bp_small: 500px;
|
||||
$bp_narrow: 360px;
|
||||
$bp_shallow: 650px;
|
||||
$font-family-alt: "Overpass", Helvetica, Arial, sans-serif;
|
||||
|
||||
@mixin one_line_text {
|
||||
white-space: nowrap;
|
||||
@ -343,7 +344,7 @@ $bp_shallow: 650px;
|
||||
}
|
||||
|
||||
@mixin feature_font() {
|
||||
font-family: "Overpass";
|
||||
font-family: $font-family-alt;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user