Created
August 8, 2020 14:13
Star
You must be signed in to star a gist
Result of postcss-custom-properties with input https://codesandbox.io/s/angry-joliot-oj0mt?fontsize=14&hidenavigation=1&theme=dark
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*, | |
*::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