Skip to content

Instantly share code, notes, and snippets.

@pa7lux
Created August 8, 2020 14:13
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save pa7lux/aec8fef3645b3b5540d187af58f7614d to your computer and use it in GitHub Desktop.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--color-white: #fff;
--color-black: #000;
--color-dark: #1e1e1e;
--color-red: #ff007a;
--color-blue: #005cff;
--color-lightblue: #d4e4ff;
}
/* Фон всей страницы и цвет текста внутри неё заданы кастомными свойствами,
но они еще не определены. Поэтому сработает альтернативный цвет из палитры */
.page {
margin: 0;
font-family: "Roboto", sans-serif;
min-height: 100vh;
padding: 100px 40px;
min-width: 600px;
background-color: var(--color-lightblue);
background-color: var(--bg-color, var(--color-lightblue));
color: var(--color-black);
color: var(--text-color, var(--color-black));
}
.page__main-title {
font-size: 64px;
width: 80%;
text-transform: uppercase;
font-weight: normal;
margin: 40px 0 20px;
}
.page__text-accent {
font-weight: 700;
}
/* Фон, цвета текста, цвет границы
тоже заданы еще не определенным кастомным свойством,
но работают из-за описанных альтернативных значений.
По умолчанию все цвета назначаются из палитры */
.page__title {
font-size: 36px;
text-transform: uppercase;
font-weight: 700;
color: var(--color-blue);
color: var(--title-color, var(--color-blue));
}
.card {
width: 100%;
padding: 40px;
position: relative;
border: 1px solid var(--color-blue);
border: 1px solid var(--border-color, var(--color-blue));
border-radius: 40px;
border-top-left-radius: 0;
background-color: var(--color-pink);
background-color: var(--bg-color, var(--color-pink));
color: var(--color-black);
color: var(--text-color, var(--color-black));
margin-bottom: 44px;
}
.card__title {
margin: 0;
font-size: 48px;
font-weight: 700;
}
.card__description {
margin: 20px 0 0;
font-size: 36px;
}
/* В модификаторе с нужным значением определяем кастомные для цвета границы и заголовка.
Все наследники модификатора увидят изменение
и воспользуются этим свойством вместо альтернативного значения */
.page__section_type_canceled {
--title-color: var(--color-red);
--border-color: var(--color-red);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment