В настоящее время у меня есть файлы темы, которые выглядят примерно так:
export const Theme = {
//Primary is accessible on white or beige bckgrnd, others are not //
primary: "#036c5f",
secondary: "#f89d3e",
primaryGreen: "#083D35",
accentGreen: "#62CDB1",
midGreen: "#0E6C5F",
// Background and neutral colours //
backgroundBeige: "#F6F5F1",
lightGray: "#eaeaea",
ultraLightGray: "#fafafa",
gray: "#d0d3d4",
charcoalGrey: "#636363",
darkBlack: "#242627",
lightBlack: "#2d2f31",
// Focus State colours //
focusBlue: "#2C81FF",
borderRadius: "8px",
borderRadiusElliptic: "32px 0px 32px 0px",
boxShadow:
"0 0 0 1px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 5%), 0 12px 24px rgb(0 0 0 / 5%);",
boxShadowMedium: "0 8px 30px rgba(0,0,0,.12)",
border: "1px solid #eaeaea",
breakpointPhone: "299px",
breakpointPhoneM: "420px",
breakpointPhoneL: "620px",
breakpointTablet: "899px",
breakpointLaptop: "1024px",
breakpointLaptopBig: "1224px",
};
export default Theme;
Я хочу структурировать интервал на основе корневой переменной (заданной в единицах em), как в этом примере CSS в приведенном выше файле темы:
:root {
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
}
НО я хочу написать это на JavaScript в приведенном выше файле theme.js.
Какой синтаксис мне следует использовать?
Любая помощь буду признателен.
Я пробовал следующее:
spaceUnit: "1em";
spaceXS: "calc(0.5 * var(--spaceUnit))",
spaceS: "calc(1 * var(--spaceUnit))",
spaceM: "calc(1.5 * var(--spaceUnit))",
spaceL: "calc(2 * var(--spaceUnit))",
spaceXL: "calc(3.5 * var(--spaceUnit))",
НО я не думаю, что это правильно.
Я ссылаюсь на это на таких страницах:
Подробнее здесь: https://stackoverflow.com/questions/787 ... m-variable
Установка гибкого приращения интервалов для полей на основе корневой переменной em ⇐ CSS
Разбираемся в CSS
1721062372
Anonymous
В настоящее время у меня есть файлы темы, которые выглядят примерно так:
export const Theme = {
//Primary is accessible on white or beige bckgrnd, others are not //
primary: "#036c5f",
secondary: "#f89d3e",
primaryGreen: "#083D35",
accentGreen: "#62CDB1",
midGreen: "#0E6C5F",
// Background and neutral colours //
backgroundBeige: "#F6F5F1",
lightGray: "#eaeaea",
ultraLightGray: "#fafafa",
gray: "#d0d3d4",
charcoalGrey: "#636363",
darkBlack: "#242627",
lightBlack: "#2d2f31",
// Focus State colours //
focusBlue: "#2C81FF",
borderRadius: "8px",
borderRadiusElliptic: "32px 0px 32px 0px",
boxShadow:
"0 0 0 1px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 5%), 0 12px 24px rgb(0 0 0 / 5%);",
boxShadowMedium: "0 8px 30px rgba(0,0,0,.12)",
border: "1px solid #eaeaea",
breakpointPhone: "299px",
breakpointPhoneM: "420px",
breakpointPhoneL: "620px",
breakpointTablet: "899px",
breakpointLaptop: "1024px",
breakpointLaptopBig: "1224px",
};
export default Theme;
Я хочу структурировать интервал на основе корневой переменной (заданной в единицах em), как в этом примере CSS в приведенном выше файле темы:
:root {
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
}
НО я хочу написать это на JavaScript в приведенном выше файле theme.js.
Какой синтаксис мне следует использовать?
Любая помощь буду признателен.
Я пробовал следующее:
spaceUnit: "1em";
spaceXS: "calc(0.5 * var(--spaceUnit))",
spaceS: "calc(1 * var(--spaceUnit))",
spaceM: "calc(1.5 * var(--spaceUnit))",
spaceL: "calc(2 * var(--spaceUnit))",
spaceXL: "calc(3.5 * var(--spaceUnit))",
НО я не думаю, что это правильно.
Я ссылаюсь на это на таких страницах:
Подробнее здесь: [url]https://stackoverflow.com/questions/78747513/setting-flexible-spacing-increments-for-margins-based-off-root-em-variable[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия