diff --git a/client-config.js b/client-config.js index f5d84966..c9ab1a93 100644 --- a/client-config.js +++ b/client-config.js @@ -5,18 +5,6 @@ module.exports = { favicon: '/favicon.ico', logo: '/logo.svg', poweredBy: true, - show_components: { - alert: 'Alert', - button: 'Button', - checkbox:'Checkbox', - input:'Input', - modal:'Modal', - pagination: null, - radio:'Radio', - select:'Select', - switch:'Switch', - tooltip: 'Tooltip', - }, type_sort: [ 'Heading 1', 'Heading 2', @@ -33,5 +21,4 @@ module.exports = { type_copy: 'Almost before we knew it, we had left the ground.', color_sort: ['primary', 'secondary', 'extra', 'system'], component_sort: ['primary', 'secondary', 'transparent'], - }; diff --git a/components/ComponentNotFound.tsx b/components/ComponentNotFound.tsx new file mode 100644 index 00000000..d8929f63 --- /dev/null +++ b/components/ComponentNotFound.tsx @@ -0,0 +1,38 @@ +import * as util from 'components/util'; +import Head from 'next/head'; +import Header from './Header'; +import Icon from './Icon'; +import CustomNav from './SideNav/Custom'; +export interface ComponentNotFoundProps extends util.DocumentationProps { + children?: JSX.Element; +} +export const ComponentNotFound: React.FC = ({ metadata, menu, current, children }) => { + return ( +
+ + {metadata.metaTitle} + + +
+ {current.subSections.length > 0 && } +
+
+
+
+

{`${metadata.title} Not Found`}

+

+ No {metadata.title.toLowerCase()} tokens were found. Either they couldn’t be extracted from figma, or the component was not found in figma. + Check to make sure that the component is being imported on fetch. If you see a red message indicating the component cannot + be retrieved, check to make sure the component exists in figma. +
+
+ Read More +

+
+ {metadata.image && } +
+
+
+
+ ); +}; diff --git a/components/util/index.ts b/components/util/index.ts index 8748967f..ccdd93a4 100644 --- a/components/util/index.ts +++ b/components/util/index.ts @@ -1,3 +1,4 @@ +import { Config } from 'client-config'; import { getConfig } from 'config'; import { filter } from 'domutils'; import * as fs from 'fs-extra'; @@ -42,6 +43,12 @@ export interface DocumentationProps { current: SectionLink; } +export interface ComponentDocumentationProps extends DocumentationProps{ + componentFound: boolean; +} +/** + * List the default paths + */ export const knownPaths = [ 'assets', 'assets/fonts', @@ -66,6 +73,32 @@ export const knownPaths = [ 'components/checkbox', ]; +/** + * Get the plural name of a component + * @param singular + * @returns + */ +export const pluralizeComponent = (singular: string): string => { + return ( + { + button: 'buttons', + select: 'selects', + checkbox: 'checkboxes', + radio: 'radios', + input: 'inputs', + tooltip: 'tooltips', + alert: 'alerts', + switch: 'switches', + pagination: 'pagination', + modal: 'modal', + }[singular] ?? singular + ); +}; + +/** + * Build level 1 static path parameters + * @returns + */ export const buildL1StaticPaths = () => { const files = fs.readdirSync('docs'); const paths = files @@ -84,6 +117,10 @@ export const buildL1StaticPaths = () => { return paths; }; +/** + * Build static paths for level 2 + * @returns SubPathType[] + */ export const buildL2StaticPaths = () => { const files = fs.readdirSync('docs'); const paths: SubPageType[] = files @@ -109,6 +146,26 @@ export const buildL2StaticPaths = () => { return paths; }; +/** + * Does a component exist in figma? Check the length of the component tokens + * @param component + * @param config + * @returns + */ +export const componentExists = (component: string, config?: Config): boolean => { + if (!config) { + config = getConfig(); + } + const componentKey = pluralizeComponent(component) ?? false; + // If this is a component (we define it in the tokens file) + // but it has a length of 0, return the menu as undefined even + // if its set in the file list + if (config.components[componentKey] && config.components[componentKey].length === 0) { + return false; + } + return true; +}; + /** * Build the static menu for rendeirng pages * @returns SectionLink[] @@ -117,6 +174,7 @@ export const staticBuildMenu = () => { // Contents of docs const files = fs.readdirSync('docs'); const sections: SectionLink[] = []; + const config = getConfig(); // Build path tree const custom = files @@ -128,15 +186,23 @@ export const staticBuildMenu = () => { if (metadata.enabled === false) { return undefined; } + const path = `/${fileName.replace('.md', '')}`; return { title: metadata.menuTitle ?? metadata.title, weight: metadata.weight, - path: `/${fileName.replace('.md', '')}`, + path, // Build the submenus subSections: metadata.menu ? Object.keys(metadata.menu) .map((key) => { const sub = metadata.menu[key]; + // Component menus are filtered by the presence of tokens + if (path === '/components' && sub.path) { + const componentName = sub.path.replace('components/', ''); + if (!componentExists(componentName, config)) { + return undefined; + } + } if (sub.enabled !== false) { return sub; } @@ -158,13 +224,14 @@ export const staticBuildMenu = () => { */ export const getCurrentSection = (menu: SectionLink[], path: string): SectionLink | null => menu.filter((section) => section.path === path)[0]; -/** + + /** * Build a static object for rending markdown pages * @param path * @param slug * @returns */ -export const fetchDocPageMarkdown = (path: string, slug: string | string[] | undefined, id: string) => { +export const fetchDocPageMarkdown = (path: string, slug: string | undefined, id: string)=> { const menu = staticBuildMenu(); const { metadata, content } = fetchDocPageMetadataAndContent(path, slug); // Return props @@ -174,19 +241,69 @@ export const fetchDocPageMarkdown = (path: string, slug: string | string[] | und content, menu, current: getCurrentSection(menu, `${id}`) ?? [], + }, }; }; +/** + * Fetch Component Doc Page Markdown + * @param path + * @param slug + * @param id + * @returns + */ +export const fetchCompDocPageMarkdown = (path: string, slug: string | undefined, id: string) => { + return { + props: { + ...fetchDocPageMarkdown(path, slug, id).props, + componentFound: (slug) ? componentExists(pluralizeComponent(slug), undefined) : false + }, + }; +} + +/** + * Reduce a slug which can be either an array or string, to just a string by + * plucking the first element + * @param slug + * @returns + */ +export const reduceSlugToString = (slug: string | string[] | undefined) : string | undefined => { + let prop: string | undefined; + if (Array.isArray(slug)) { + if(slug[0]){ + prop = slug[0]; + } + }else{ + prop = slug; + } + return prop; +} + +/** + * Get doc meta and content from markdown + * @param path + * @param slug + * @returns + */ export const fetchDocPageMetadataAndContent = (path: string, slug: string | string[] | undefined) => { const currentContents = fs.readFileSync(`${path}${slug}.md`, 'utf-8'); const { data: metadata, content } = matter(currentContents); return { metadata, content }; -} - +}; +/** + * Filter out undefined elements + * @param value + * @returns + */ export const filterOutUndefined = (value: T): value is NonNullable => value !== undefined; +/** + * Create a title string from a prefix + * @param prefix + * @returns + */ export const titleString = (prefix: string | null): string => { const config = getConfig(); const prepend = prefix ? `${prefix} | ` : ''; diff --git a/docs/components.md b/docs/components.md index 3290d006..499da78e 100644 --- a/docs/components.md +++ b/docs/components.md @@ -14,6 +14,8 @@ menu: title: Alert - path: components/button title: Button + - path: components/pagination + title: Pagination - path: components/modal title: Modal - path: components/tooltip diff --git a/installer/template/templates/main.scss b/installer/template/templates/main.scss index 7bbb75ae..cab6b52b 100644 --- a/installer/template/templates/main.scss +++ b/installer/template/templates/main.scss @@ -13,7 +13,7 @@ $prefix: ''; $enable-shadows: true; - +@import '../sass/project/default_vars/defaults'; @import '../sass/project/buttons'; @import '../sass/project/checkbox'; @import '../sass/project/radio'; diff --git a/pages/[level1]/[level2]/index.tsx b/pages/[level1]/[level2]/index.tsx index 86ef9516..392cda9d 100644 --- a/pages/[level1]/[level2]/index.tsx +++ b/pages/[level1]/[level2]/index.tsx @@ -1,4 +1,4 @@ -import { buildL2StaticPaths, DocumentationProps, fetchDocPageMarkdown, IParams } from 'components/util'; +import { buildL2StaticPaths, DocumentationProps, fetchDocPageMarkdown, IParams, reduceSlugToString } from 'components/util'; import { GetStaticProps } from 'next'; import { getConfig } from 'config'; import Head from 'next/head'; @@ -39,7 +39,7 @@ export const getStaticProps: GetStaticProps = async (context) => { if (!level2) { level2 = '404'; } - return fetchDocPageMarkdown(`docs/${level1}/`, level2, `/${level1}`); + return fetchDocPageMarkdown(`docs/${level1}/`, reduceSlugToString(level2), `/${level1}`); }; const config = getConfig(); diff --git a/pages/[level1]/index.tsx b/pages/[level1]/index.tsx index f356bedc..b000c8f4 100644 --- a/pages/[level1]/index.tsx +++ b/pages/[level1]/index.tsx @@ -1,6 +1,6 @@ import Header from 'components/Header'; import CustomNav from 'components/SideNav/Custom'; -import { buildL1StaticPaths, DocumentationProps, fetchDocPageMarkdown, IParams } from 'components/util'; +import { buildL1StaticPaths, DocumentationProps, fetchDocPageMarkdown, IParams, reduceSlugToString } from 'components/util'; import { MarkdownComponents } from 'components/Markdown/MarkdownComponents'; import { getConfig } from 'config'; import { GetStaticProps } from 'next'; @@ -30,7 +30,7 @@ export async function getStaticPaths() { export const getStaticProps: GetStaticProps = async (context) => { // Read current slug const { level1 } = context.params as IParams; - return fetchDocPageMarkdown('docs/', level1, `/${level1}`); + return fetchDocPageMarkdown('docs/', reduceSlugToString(level1), `/${level1}`); }; const config = getConfig(); diff --git a/pages/components/alert.tsx b/pages/components/alert.tsx index c400d365..e33b9fc1 100644 --- a/pages/components/alert.tsx +++ b/pages/components/alert.tsx @@ -16,6 +16,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const AlertDisplay: React.FC<{ alert: PreviewObject | undefined }> = ({ alert }) => { @@ -80,12 +81,16 @@ const alerts = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'alert', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'alert', `/components`); }; -const AlertPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const AlertPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/button.tsx b/pages/components/button.tsx index b945a86f..bf7c8215 100644 --- a/pages/components/button.tsx +++ b/pages/components/button.tsx @@ -16,7 +16,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; - +import { ComponentNotFound } from 'components/ComponentNotFound'; const ButtonDisplay: React.FC<{ button: PreviewObject | undefined }> = ({ button }) => { return ( @@ -66,7 +66,7 @@ const buttons = { const preview = getPreview().components.buttons.find((item) => item.id === button.id); return { ...button, - preview + preview, }; }), }; @@ -80,12 +80,16 @@ const buttons = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'button', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'button', `/components`); }; -const ButtonsPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const ButtonsPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/checkbox.tsx b/pages/components/checkbox.tsx index 07b8264b..d0d54de2 100644 --- a/pages/components/checkbox.tsx +++ b/pages/components/checkbox.tsx @@ -16,6 +16,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const CheckboxDisplay: React.FC<{ checkbox: PreviewObject | undefined }> = ({ checkbox }) => { return ( @@ -83,12 +84,16 @@ const checkboxes = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'checkbox', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'checkbox', `/components`); }; -const CheckboxPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const CheckboxPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/input.tsx b/pages/components/input.tsx index 0cbec4b2..9d60d801 100644 --- a/pages/components/input.tsx +++ b/pages/components/input.tsx @@ -15,6 +15,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const InputDisplay: React.FC<{ input: InputThemePair; theme: 'light' | 'dark' }> = ({ input, theme }) => { @@ -99,12 +100,16 @@ const states = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'input', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'input', `/components`); }; -const InputPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const InputPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/modal.tsx b/pages/components/modal.tsx index 8001a46a..a143220b 100644 --- a/pages/components/modal.tsx +++ b/pages/components/modal.tsx @@ -17,6 +17,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const ModalDisplay: React.FC<{ modal: PreviewObject | undefined }> = ({ modal }) => { return ( @@ -48,12 +49,16 @@ const designComponents = config.components.modal.filter( */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'modal', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'modal', `/components`); }; -const ModalPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const ModalPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/pagination.tsx b/pages/components/pagination.tsx index aebb5fc8..689abff7 100644 --- a/pages/components/pagination.tsx +++ b/pages/components/pagination.tsx @@ -15,6 +15,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const PaginationDisplay: React.FC<{ pagination: PreviewObject | undefined }> = ({ pagination }) => { @@ -74,12 +75,16 @@ const pagination = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'pagination', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'pagination', `/components`); }; -const PaginationPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const PaginationPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/radio.tsx b/pages/components/radio.tsx index ddf0e297..d5aa5278 100644 --- a/pages/components/radio.tsx +++ b/pages/components/radio.tsx @@ -13,11 +13,12 @@ import { ComponentTab } from 'types/tabs'; import ComponentDesignTokens from 'components/ComponentDesignTokens'; import Head from 'next/head'; import Header from 'components/Header'; -import { DocumentationProps, fetchDocPageMarkdown } from 'components/util'; +import { ComponentDocumentationProps, DocumentationProps, fetchCompDocPageMarkdown, fetchDocPageMarkdown } from 'components/util'; import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const RadioDisplay: React.FC<{ radio: PreviewObject | undefined }> = ({ radio }) => { return ( @@ -83,12 +84,16 @@ const radios = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return fetchDocPageMarkdown('docs/components/', 'radio', `/components`); + return fetchCompDocPageMarkdown('docs/components/', 'radio', `/components`); }; -const RadioPage = ({ content, menu, metadata, current }: DocumentationProps) => { +const RadioPage = ({ content, menu, metadata, current, componentFound }: ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/select.tsx b/pages/components/select.tsx index 259ca529..258b6050 100644 --- a/pages/components/select.tsx +++ b/pages/components/select.tsx @@ -15,6 +15,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const SelectDisplay: React.FC<{ select: SelectThemePair; theme: 'light' | 'dark' }> = ({ select, theme }) => { @@ -96,12 +97,16 @@ const states = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'select', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'select', `/components`); }; -const SelectPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const SelectPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/switch.tsx b/pages/components/switch.tsx index 5d098b76..ae94b59a 100644 --- a/pages/components/switch.tsx +++ b/pages/components/switch.tsx @@ -16,6 +16,7 @@ import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const SwitchDisplay: React.FC<{ component: PreviewObject | undefined }> = ({ component }) => { return ( @@ -84,12 +85,15 @@ const switches = { */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return util.fetchDocPageMarkdown('docs/components/', 'switch', `/components`); + return util.fetchCompDocPageMarkdown('docs/components/', 'switch', `/components`); }; -const SwitchPage = ({ content, menu, metadata, current }: util.DocumentationProps) => { +const SwitchPage = ({ content, menu, metadata, current, componentFound }: util.ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); - + if (!componentFound) { + return ; + } + return (
diff --git a/pages/components/tooltip.tsx b/pages/components/tooltip.tsx index f94699d4..c819d280 100644 --- a/pages/components/tooltip.tsx +++ b/pages/components/tooltip.tsx @@ -9,11 +9,12 @@ import { ComponentTab } from 'types/tabs'; import Head from 'next/head'; import ComponentDesignTokens from 'components/ComponentDesignTokens'; import Header from 'components/Header'; -import { DocumentationProps, fetchDocPageMarkdown } from 'components/util'; +import { ComponentDocumentationProps, DocumentationProps, fetchCompDocPageMarkdown, fetchDocPageMarkdown } from 'components/util'; import CustomNav from 'components/SideNav/Custom'; import AnchorNav from 'components/AnchorNav'; import ComponentGuidelines from 'components/ComponentGuidelines'; import { CodeHighlight } from 'components/Markdown/CodeHighlight'; +import { ComponentNotFound } from 'components/ComponentNotFound'; const TooltipDisplay: React.FC<{ tooltip: PreviewObject | undefined }> = ({ tooltip }) => { return ( @@ -45,11 +46,14 @@ const tooltips = config.components.tooltips.filter((tooltip) => tooltip.horizont */ export const getStaticProps: GetStaticProps = async (context) => { // Read current slug - return fetchDocPageMarkdown('docs/components/', 'tooltip', `/components`); + return fetchCompDocPageMarkdown('docs/components/', 'tooltip', `/components`); }; -const TooltipPage = ({ content, menu, metadata, current }: DocumentationProps) => { +const TooltipPage = ({ content, menu, metadata, current, componentFound }: ComponentDocumentationProps) => { const [activeTab, setActiveTab] = React.useState(ComponentTab.Overview); + if (!componentFound) { + return ; + } return (
@@ -158,8 +162,8 @@ const TooltipPage = ({ content, menu, metadata, current }: DocumentationProps) = layout={{ cols: { left: 4, - right: 8 - } + right: 8, + }, }} > item.id === tooltip.id)} /> diff --git a/sass/main.scss b/sass/main.scss index 2de26fa4..f7d996f4 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -35,6 +35,7 @@ $enable-shadows: true; @import 'generic/all'; @import 'elements/all'; @import 'objects/all'; +@import 'project/default_vars/defaults'; @import 'project/buttons'; @import 'project/checkbox'; @import 'project/radio'; diff --git a/sass/project/default_vars/alerts.scss b/sass/project/default_vars/alerts.scss new file mode 100644 index 00000000..6a44ade1 --- /dev/null +++ b/sass/project/default_vars/alerts.scss @@ -0,0 +1,488 @@ +$alert-variants: ( "primary", "secondary", "dark", "light", "info", "success", "warning", "danger", "type9"); + +.alert { + + // alert Primary undefinedundefined + --alert-primary-background: #d3e7fa; + --alert-primary-padding-top: 18px; + --alert-primary-padding-right: 16px; + --alert-primary-padding-bottom: 18px; + --alert-primary-padding-left: 16px; + --alert-primary-border-width: 1px; + --alert-primary-border-radius: 6px; + --alert-primary-border-color: #0073e6; + --alert-primary-box-shadow: none; + --alert-primary-spacing: 12px; + --alert-primary-close-color: #ffffff; + --alert-primary-icon-color: #0f69c1; + --alert-primary-body-spacing: 12px; + --alert-primary-content-spacing: 5px; + --alert-primary-title-font-family: 'Inter'; + --alert-primary-title-font-size: 14px; + --alert-primary-title-font-weight: 700; + --alert-primary-title-line-height: 1.6; + --alert-primary-title-letter-spacing: -0.28px; + --alert-primary-title-text-align: left; + --alert-primary-title-text-decoration: none; + --alert-primary-title-text-transform: none; + --alert-primary-title-color: #ffffff; + --alert-primary-text-font-family: 'Inter'; + --alert-primary-text-font-size: 14px; + --alert-primary-text-font-weight: 400; + --alert-primary-text-line-height: 1.6; + --alert-primary-text-letter-spacing: -0.28px; + --alert-primary-text-text-align: left; + --alert-primary-text-text-decoration: none; + --alert-primary-text-text-transform: none; + --alert-primary-text-color: #0f69c1; + --alert-primary-actions-spacing: 10px; + --alert-primary-actions-font-family: 'Inter'; + --alert-primary-actions-font-size: 12px; + --alert-primary-actions-font-weight: 600; + --alert-primary-actions-line-height: 1.3333332824707032; + --alert-primary-actions-letter-spacing: -0.24px; + --alert-primary-actions-text-align: left; + --alert-primary-actions-text-decoration: none; + --alert-primary-actions-text-transform: none; + --alert-primary-actions-color: #ffffff; + + // alert Secondary undefinedundefined + --alert-secondary-background: #ded7ff; + --alert-secondary-padding-top: 18px; + --alert-secondary-padding-right: 16px; + --alert-secondary-padding-bottom: 18px; + --alert-secondary-padding-left: 16px; + --alert-secondary-border-width: 1px; + --alert-secondary-border-radius: 6px; + --alert-secondary-border-color: #7158dd; + --alert-secondary-box-shadow: none; + --alert-secondary-spacing: 12px; + --alert-secondary-close-color: #ffffff; + --alert-secondary-icon-color: #ffffff; + --alert-secondary-body-spacing: 12px; + --alert-secondary-content-spacing: 5px; + --alert-secondary-title-font-family: 'Inter'; + --alert-secondary-title-font-size: 14px; + --alert-secondary-title-font-weight: 700; + --alert-secondary-title-line-height: 1.6; + --alert-secondary-title-letter-spacing: -0.28px; + --alert-secondary-title-text-align: left; + --alert-secondary-title-text-decoration: none; + --alert-secondary-title-text-transform: none; + --alert-secondary-title-color: #ffffff; + --alert-secondary-text-font-family: 'Inter'; + --alert-secondary-text-font-size: 14px; + --alert-secondary-text-font-weight: 400; + --alert-secondary-text-line-height: 1.6; + --alert-secondary-text-letter-spacing: -0.28px; + --alert-secondary-text-text-align: left; + --alert-secondary-text-text-decoration: none; + --alert-secondary-text-text-transform: none; + --alert-secondary-text-color: #3b2794; + --alert-secondary-actions-spacing: 10px; + --alert-secondary-actions-font-family: 'Inter'; + --alert-secondary-actions-font-size: 12px; + --alert-secondary-actions-font-weight: 600; + --alert-secondary-actions-line-height: 1.3333332824707032; + --alert-secondary-actions-letter-spacing: -0.24px; + --alert-secondary-actions-text-align: left; + --alert-secondary-actions-text-decoration: none; + --alert-secondary-actions-text-transform: none; + --alert-secondary-actions-color: #ffffff; + + // alert Dark undefinedundefined + --alert-dark-background: #191919; + --alert-dark-padding-top: 18px; + --alert-dark-padding-right: 16px; + --alert-dark-padding-bottom: 18px; + --alert-dark-padding-left: 16px; + --alert-dark-border-width: 1px; + --alert-dark-border-radius: 6px; + --alert-dark-border-color: transparent; + --alert-dark-box-shadow: none; + --alert-dark-spacing: 12px; + --alert-dark-close-color: #ffffff; + --alert-dark-icon-color: #ffffff; + --alert-dark-body-spacing: 12px; + --alert-dark-content-spacing: 5px; + --alert-dark-title-font-family: 'Inter'; + --alert-dark-title-font-size: 14px; + --alert-dark-title-font-weight: 700; + --alert-dark-title-line-height: 1.6; + --alert-dark-title-letter-spacing: -0.28px; + --alert-dark-title-text-align: left; + --alert-dark-title-text-decoration: none; + --alert-dark-title-text-transform: none; + --alert-dark-title-color: #ffffff; + --alert-dark-text-font-family: 'Inter'; + --alert-dark-text-font-size: 14px; + --alert-dark-text-font-weight: 400; + --alert-dark-text-line-height: 1.6; + --alert-dark-text-letter-spacing: -0.28px; + --alert-dark-text-text-align: left; + --alert-dark-text-text-decoration: none; + --alert-dark-text-text-transform: none; + --alert-dark-text-color: rgba(255, 255, 255, 0.8500000238418579); + --alert-dark-actions-spacing: 10px; + --alert-dark-actions-font-family: 'Inter'; + --alert-dark-actions-font-size: 12px; + --alert-dark-actions-font-weight: 600; + --alert-dark-actions-line-height: 1.3333332824707032; + --alert-dark-actions-letter-spacing: -0.24px; + --alert-dark-actions-text-align: left; + --alert-dark-actions-text-decoration: none; + --alert-dark-actions-text-transform: none; + --alert-dark-actions-color: #ffffff; + + // alert Light undefinedundefined + --alert-light-background: #f8f8f8; + --alert-light-padding-top: 18px; + --alert-light-padding-right: 16px; + --alert-light-padding-bottom: 18px; + --alert-light-padding-left: 16px; + --alert-light-border-width: 1px; + --alert-light-border-radius: 6px; + --alert-light-border-color: transparent; + --alert-light-box-shadow: none; + --alert-light-spacing: 12px; + --alert-light-close-color: #000000; + --alert-light-icon-color: #0073e6; + --alert-light-body-spacing: 12px; + --alert-light-content-spacing: 5px; + --alert-light-title-font-family: 'Inter'; + --alert-light-title-font-size: 14px; + --alert-light-title-font-weight: 700; + --alert-light-title-line-height: 1.6; + --alert-light-title-letter-spacing: -0.28px; + --alert-light-title-text-align: left; + --alert-light-title-text-decoration: none; + --alert-light-title-text-transform: none; + --alert-light-title-color: #000000; + --alert-light-text-font-family: 'Inter'; + --alert-light-text-font-size: 14px; + --alert-light-text-font-weight: 400; + --alert-light-text-line-height: 1.6; + --alert-light-text-letter-spacing: -0.28px; + --alert-light-text-text-align: left; + --alert-light-text-text-decoration: none; + --alert-light-text-text-transform: none; + --alert-light-text-color: rgba(0, 0, 0, 0.800000011920929); + --alert-light-actions-spacing: 10px; + --alert-light-actions-font-family: 'Inter'; + --alert-light-actions-font-size: 12px; + --alert-light-actions-font-weight: 600; + --alert-light-actions-line-height: 1.3333332824707032; + --alert-light-actions-letter-spacing: -0.24px; + --alert-light-actions-text-align: left; + --alert-light-actions-text-decoration: none; + --alert-light-actions-text-transform: none; + --alert-light-actions-color: #000000; + + // alert Info undefinedundefined + --alert-info-background: #307abf; + --alert-info-padding-top: 18px; + --alert-info-padding-right: 16px; + --alert-info-padding-bottom: 18px; + --alert-info-padding-left: 16px; + --alert-info-border-width: 1px; + --alert-info-border-radius: 6px; + --alert-info-border-color: transparent; + --alert-info-box-shadow: none; + --alert-info-spacing: 12px; + --alert-info-close-color: #ffffff; + --alert-info-icon-color: #ffffff; + --alert-info-body-spacing: 12px; + --alert-info-content-spacing: 5px; + --alert-info-title-font-family: 'Inter'; + --alert-info-title-font-size: 14px; + --alert-info-title-font-weight: 700; + --alert-info-title-line-height: 1.6; + --alert-info-title-letter-spacing: -0.28px; + --alert-info-title-text-align: left; + --alert-info-title-text-decoration: none; + --alert-info-title-text-transform: none; + --alert-info-title-color: #ffffff; + --alert-info-text-font-family: 'Inter'; + --alert-info-text-font-size: 14px; + --alert-info-text-font-weight: 400; + --alert-info-text-line-height: 1.6; + --alert-info-text-letter-spacing: -0.28px; + --alert-info-text-text-align: left; + --alert-info-text-text-decoration: none; + --alert-info-text-text-transform: none; + --alert-info-text-color: rgba(255, 255, 255, 0.8500000238418579); + --alert-info-actions-spacing: 10px; + --alert-info-actions-font-family: 'Inter'; + --alert-info-actions-font-size: 12px; + --alert-info-actions-font-weight: 600; + --alert-info-actions-line-height: 1.3333332824707032; + --alert-info-actions-letter-spacing: -0.24px; + --alert-info-actions-text-align: left; + --alert-info-actions-text-decoration: none; + --alert-info-actions-text-transform: none; + --alert-info-actions-color: #ffffff; + + // alert Success undefinedundefined + --alert-success-background: #198754; + --alert-success-padding-top: 18px; + --alert-success-padding-right: 16px; + --alert-success-padding-bottom: 18px; + --alert-success-padding-left: 16px; + --alert-success-border-width: 1px; + --alert-success-border-radius: 6px; + --alert-success-border-color: transparent; + --alert-success-box-shadow: none; + --alert-success-spacing: 12px; + --alert-success-close-color: #ffffff; + --alert-success-icon-color: #ffffff; + --alert-success-body-spacing: 12px; + --alert-success-content-spacing: 5px; + --alert-success-title-font-family: 'Inter'; + --alert-success-title-font-size: 14px; + --alert-success-title-font-weight: 700; + --alert-success-title-line-height: 1.6; + --alert-success-title-letter-spacing: -0.28px; + --alert-success-title-text-align: left; + --alert-success-title-text-decoration: none; + --alert-success-title-text-transform: none; + --alert-success-title-color: #ffffff; + --alert-success-text-font-family: 'Inter'; + --alert-success-text-font-size: 14px; + --alert-success-text-font-weight: 400; + --alert-success-text-line-height: 1.6; + --alert-success-text-letter-spacing: -0.28px; + --alert-success-text-text-align: left; + --alert-success-text-text-decoration: none; + --alert-success-text-text-transform: none; + --alert-success-text-color: rgba(255, 255, 255, 0.8500000238418579); + --alert-success-actions-spacing: 10px; + --alert-success-actions-font-family: 'Inter'; + --alert-success-actions-font-size: 12px; + --alert-success-actions-font-weight: 600; + --alert-success-actions-line-height: 1.3333332824707032; + --alert-success-actions-letter-spacing: -0.24px; + --alert-success-actions-text-align: left; + --alert-success-actions-text-decoration: none; + --alert-success-actions-text-transform: none; + --alert-success-actions-color: #ffffff; + + // alert Warning undefinedundefined + --alert-warning-background: #ffc107; + --alert-warning-padding-top: 18px; + --alert-warning-padding-right: 16px; + --alert-warning-padding-bottom: 18px; + --alert-warning-padding-left: 16px; + --alert-warning-border-width: 1px; + --alert-warning-border-radius: 6px; + --alert-warning-border-color: transparent; + --alert-warning-box-shadow: none; + --alert-warning-spacing: 12px; + --alert-warning-close-color: #000000; + --alert-warning-icon-color: #000000; + --alert-warning-body-spacing: 12px; + --alert-warning-content-spacing: 5px; + --alert-warning-title-font-family: 'Inter'; + --alert-warning-title-font-size: 14px; + --alert-warning-title-font-weight: 700; + --alert-warning-title-line-height: 1.6; + --alert-warning-title-letter-spacing: -0.28px; + --alert-warning-title-text-align: left; + --alert-warning-title-text-decoration: none; + --alert-warning-title-text-transform: none; + --alert-warning-title-color: #000000; + --alert-warning-text-font-family: 'Inter'; + --alert-warning-text-font-size: 14px; + --alert-warning-text-font-weight: 400; + --alert-warning-text-line-height: 1.6; + --alert-warning-text-letter-spacing: -0.28px; + --alert-warning-text-text-align: left; + --alert-warning-text-text-decoration: none; + --alert-warning-text-text-transform: none; + --alert-warning-text-color: rgba(0, 0, 0, 0.800000011920929); + --alert-warning-actions-spacing: 10px; + --alert-warning-actions-font-family: 'Inter'; + --alert-warning-actions-font-size: 12px; + --alert-warning-actions-font-weight: 600; + --alert-warning-actions-line-height: 1.3333332824707032; + --alert-warning-actions-letter-spacing: -0.24px; + --alert-warning-actions-text-align: left; + --alert-warning-actions-text-decoration: none; + --alert-warning-actions-text-transform: none; + --alert-warning-actions-color: #000000; + + // alert Danger undefinedundefined + --alert-danger-background: #dc3545; + --alert-danger-padding-top: 18px; + --alert-danger-padding-right: 16px; + --alert-danger-padding-bottom: 18px; + --alert-danger-padding-left: 16px; + --alert-danger-border-width: 1px; + --alert-danger-border-radius: 6px; + --alert-danger-border-color: transparent; + --alert-danger-box-shadow: none; + --alert-danger-spacing: 12px; + --alert-danger-close-color: #ffffff; + --alert-danger-icon-color: #ffffff; + --alert-danger-body-spacing: 12px; + --alert-danger-content-spacing: 5px; + --alert-danger-title-font-family: 'Inter'; + --alert-danger-title-font-size: 14px; + --alert-danger-title-font-weight: 700; + --alert-danger-title-line-height: 1.6; + --alert-danger-title-letter-spacing: -0.28px; + --alert-danger-title-text-align: left; + --alert-danger-title-text-decoration: none; + --alert-danger-title-text-transform: none; + --alert-danger-title-color: #ffffff; + --alert-danger-text-font-family: 'Inter'; + --alert-danger-text-font-size: 14px; + --alert-danger-text-font-weight: 400; + --alert-danger-text-line-height: 1.6; + --alert-danger-text-letter-spacing: -0.28px; + --alert-danger-text-text-align: left; + --alert-danger-text-text-decoration: none; + --alert-danger-text-text-transform: none; + --alert-danger-text-color: rgba(255, 255, 255, 0.8500000238418579); + --alert-danger-actions-spacing: 10px; + --alert-danger-actions-font-family: 'Inter'; + --alert-danger-actions-font-size: 12px; + --alert-danger-actions-font-weight: 600; + --alert-danger-actions-line-height: 1.3333332824707032; + --alert-danger-actions-letter-spacing: -0.24px; + --alert-danger-actions-text-align: left; + --alert-danger-actions-text-decoration: none; + --alert-danger-actions-text-transform: none; + --alert-danger-actions-color: #ffffff; + + // alert Type9 undefinedundefined + --alert-type9-background: #4c34b6; + --alert-type9-padding-top: 18px; + --alert-type9-padding-right: 16px; + --alert-type9-padding-bottom: 18px; + --alert-type9-padding-left: 16px; + --alert-type9-border-width: 1px; + --alert-type9-border-radius: 6px; + --alert-type9-border-color: transparent; + --alert-type9-box-shadow: none; + --alert-type9-spacing: 12px; + --alert-type9-close-color: #ffffff; + --alert-type9-icon-color: #ffffff; + --alert-type9-body-spacing: 12px; + --alert-type9-content-spacing: 5px; + --alert-type9-title-font-family: 'Inter'; + --alert-type9-title-font-size: 14px; + --alert-type9-title-font-weight: 700; + --alert-type9-title-line-height: 1.6; + --alert-type9-title-letter-spacing: -0.28px; + --alert-type9-title-text-align: left; + --alert-type9-title-text-decoration: none; + --alert-type9-title-text-transform: none; + --alert-type9-title-color: #ffffff; + --alert-type9-text-font-family: 'Inter'; + --alert-type9-text-font-size: 14px; + --alert-type9-text-font-weight: 400; + --alert-type9-text-line-height: 1.6; + --alert-type9-text-letter-spacing: -0.28px; + --alert-type9-text-text-align: left; + --alert-type9-text-text-decoration: none; + --alert-type9-text-text-transform: none; + --alert-type9-text-color: rgba(255, 255, 255, 0.8500000238418579); + --alert-type9-actions-spacing: 10px; + --alert-type9-actions-font-family: 'Inter'; + --alert-type9-actions-font-size: 12px; + --alert-type9-actions-font-weight: 600; + --alert-type9-actions-line-height: 1.3333332824707032; + --alert-type9-actions-letter-spacing: -0.24px; + --alert-type9-actions-text-align: left; + --alert-type9-actions-text-decoration: none; + --alert-type9-actions-text-transform: none; + --alert-type9-actions-color: #ffffff; + + // alert falsefalse + --alert-horizontal-background: #000000; + --alert-horizontal-padding-top: 18px; + --alert-horizontal-padding-right: 16px; + --alert-horizontal-padding-bottom: 18px; + --alert-horizontal-padding-left: 16px; + --alert-horizontal-border-width: 1px; + --alert-horizontal-border-radius: 6px; + --alert-horizontal-border-color: transparent; + --alert-horizontal-box-shadow: none; + --alert-horizontal-spacing: 12px; + --alert-horizontal-close-color: #ffffff; + --alert-horizontal-icon-color: #ffffff; + --alert-horizontal-body-spacing: 12px; + --alert-horizontal-content-spacing: 5px; + --alert-horizontal-title-font-family: 'Inter'; + --alert-horizontal-title-font-size: 14px; + --alert-horizontal-title-font-weight: 700; + --alert-horizontal-title-line-height: 1.6; + --alert-horizontal-title-letter-spacing: -0.28px; + --alert-horizontal-title-text-align: left; + --alert-horizontal-title-text-decoration: none; + --alert-horizontal-title-text-transform: none; + --alert-horizontal-title-color: #ffffff; + --alert-horizontal-text-font-family: 'Inter'; + --alert-horizontal-text-font-size: 14px; + --alert-horizontal-text-font-weight: 400; + --alert-horizontal-text-line-height: 1.6; + --alert-horizontal-text-letter-spacing: -0.28px; + --alert-horizontal-text-text-align: left; + --alert-horizontal-text-text-decoration: none; + --alert-horizontal-text-text-transform: none; + --alert-horizontal-text-color: rgba(255, 255, 255, 0.8500000238418579); + --alert-horizontal-actions-spacing: 10px; + --alert-horizontal-actions-font-family: 'Inter'; + --alert-horizontal-actions-font-size: 12px; + --alert-horizontal-actions-font-weight: 600; + --alert-horizontal-actions-line-height: 1.3333332824707032; + --alert-horizontal-actions-letter-spacing: -0.24px; + --alert-horizontal-actions-text-align: left; + --alert-horizontal-actions-text-decoration: none; + --alert-horizontal-actions-text-transform: none; + --alert-horizontal-actions-color: #ffffff; + + // alert falsefalse + --alert-vertical-background: #000000; + --alert-vertical-padding-top: 13px; + --alert-vertical-padding-right: 16px; + --alert-vertical-padding-bottom: 13px; + --alert-vertical-padding-left: 16px; + --alert-vertical-border-width: 1px; + --alert-vertical-border-radius: 6px; + --alert-vertical-border-color: transparent; + --alert-vertical-box-shadow: none; + --alert-vertical-spacing: 12px; + --alert-vertical-close-color: #ffffff; + --alert-vertical-icon-color: #ffffff; + --alert-vertical-body-spacing: 10px; + --alert-vertical-content-spacing: 5px; + --alert-vertical-title-font-family: 'Inter'; + --alert-vertical-title-font-size: 14px; + --alert-vertical-title-font-weight: 700; + --alert-vertical-title-line-height: 1.6; + --alert-vertical-title-letter-spacing: -0.28px; + --alert-vertical-title-text-align: left; + --alert-vertical-title-text-decoration: none; + --alert-vertical-title-text-transform: none; + --alert-vertical-title-color: #ffffff; + --alert-vertical-text-font-family: 'Inter'; + --alert-vertical-text-font-size: 14px; + --alert-vertical-text-font-weight: 400; + --alert-vertical-text-line-height: 1.6; + --alert-vertical-text-letter-spacing: -0.28px; + --alert-vertical-text-text-align: left; + --alert-vertical-text-text-decoration: none; + --alert-vertical-text-text-transform: none; + --alert-vertical-text-color: rgba(255, 255, 255, 0.8500000238418579); + --alert-vertical-actions-spacing: 10px; + --alert-vertical-actions-font-family: 'Inter'; + --alert-vertical-actions-font-size: 12px; + --alert-vertical-actions-font-weight: 600; + --alert-vertical-actions-line-height: 1.3333332824707032; + --alert-vertical-actions-letter-spacing: -0.24px; + --alert-vertical-actions-text-align: left; + --alert-vertical-actions-text-decoration: none; + --alert-vertical-actions-text-transform: none; + --alert-vertical-actions-color: #ffffff; +} \ No newline at end of file diff --git a/sass/project/default_vars/alerts_vars.scss b/sass/project/default_vars/alerts_vars.scss new file mode 100644 index 00000000..c69e7228 --- /dev/null +++ b/sass/project/default_vars/alerts_vars.scss @@ -0,0 +1,483 @@ +// Primary alert +$alert-primary-background: #d3e7fa; +$alert-primary-padding-top: 18px; +$alert-primary-padding-right: 16px; +$alert-primary-padding-bottom: 18px; +$alert-primary-padding-left: 16px; +$alert-primary-border-width: 1px; +$alert-primary-border-radius: 6px; +$alert-primary-border-color: #0073e6; +$alert-primary-box-shadow: none; +$alert-primary-spacing: 12px; +$alert-primary-close-color: #ffffff; +$alert-primary-icon-color: #0f69c1; +$alert-primary-body-spacing: 12px; +$alert-primary-content-spacing: 5px; +$alert-primary-title-font-family: 'Inter'; +$alert-primary-title-font-size: 14px; +$alert-primary-title-font-weight: 700; +$alert-primary-title-line-height: 1.6; +$alert-primary-title-letter-spacing: -0.28px; +$alert-primary-title-text-align: left; +$alert-primary-title-text-decoration: none; +$alert-primary-title-text-transform: none; +$alert-primary-title-color: #ffffff; +$alert-primary-text-font-family: 'Inter'; +$alert-primary-text-font-size: 14px; +$alert-primary-text-font-weight: 400; +$alert-primary-text-line-height: 1.6; +$alert-primary-text-letter-spacing: -0.28px; +$alert-primary-text-text-align: left; +$alert-primary-text-text-decoration: none; +$alert-primary-text-text-transform: none; +$alert-primary-text-color: #0f69c1; +$alert-primary-actions-spacing: 10px; +$alert-primary-actions-font-family: 'Inter'; +$alert-primary-actions-font-size: 12px; +$alert-primary-actions-font-weight: 600; +$alert-primary-actions-line-height: 1.3333332824707032; +$alert-primary-actions-letter-spacing: -0.24px; +$alert-primary-actions-text-align: left; +$alert-primary-actions-text-decoration: none; +$alert-primary-actions-text-transform: none; +$alert-primary-actions-color: #ffffff; + +// Secondary alert +$alert-secondary-background: #ded7ff; +$alert-secondary-padding-top: 18px; +$alert-secondary-padding-right: 16px; +$alert-secondary-padding-bottom: 18px; +$alert-secondary-padding-left: 16px; +$alert-secondary-border-width: 1px; +$alert-secondary-border-radius: 6px; +$alert-secondary-border-color: #7158dd; +$alert-secondary-box-shadow: none; +$alert-secondary-spacing: 12px; +$alert-secondary-close-color: #ffffff; +$alert-secondary-icon-color: #ffffff; +$alert-secondary-body-spacing: 12px; +$alert-secondary-content-spacing: 5px; +$alert-secondary-title-font-family: 'Inter'; +$alert-secondary-title-font-size: 14px; +$alert-secondary-title-font-weight: 700; +$alert-secondary-title-line-height: 1.6; +$alert-secondary-title-letter-spacing: -0.28px; +$alert-secondary-title-text-align: left; +$alert-secondary-title-text-decoration: none; +$alert-secondary-title-text-transform: none; +$alert-secondary-title-color: #ffffff; +$alert-secondary-text-font-family: 'Inter'; +$alert-secondary-text-font-size: 14px; +$alert-secondary-text-font-weight: 400; +$alert-secondary-text-line-height: 1.6; +$alert-secondary-text-letter-spacing: -0.28px; +$alert-secondary-text-text-align: left; +$alert-secondary-text-text-decoration: none; +$alert-secondary-text-text-transform: none; +$alert-secondary-text-color: #3b2794; +$alert-secondary-actions-spacing: 10px; +$alert-secondary-actions-font-family: 'Inter'; +$alert-secondary-actions-font-size: 12px; +$alert-secondary-actions-font-weight: 600; +$alert-secondary-actions-line-height: 1.3333332824707032; +$alert-secondary-actions-letter-spacing: -0.24px; +$alert-secondary-actions-text-align: left; +$alert-secondary-actions-text-decoration: none; +$alert-secondary-actions-text-transform: none; +$alert-secondary-actions-color: #ffffff; + +// Dark alert +$alert-dark-background: #191919; +$alert-dark-padding-top: 18px; +$alert-dark-padding-right: 16px; +$alert-dark-padding-bottom: 18px; +$alert-dark-padding-left: 16px; +$alert-dark-border-width: 1px; +$alert-dark-border-radius: 6px; +$alert-dark-border-color: transparent; +$alert-dark-box-shadow: none; +$alert-dark-spacing: 12px; +$alert-dark-close-color: #ffffff; +$alert-dark-icon-color: #ffffff; +$alert-dark-body-spacing: 12px; +$alert-dark-content-spacing: 5px; +$alert-dark-title-font-family: 'Inter'; +$alert-dark-title-font-size: 14px; +$alert-dark-title-font-weight: 700; +$alert-dark-title-line-height: 1.6; +$alert-dark-title-letter-spacing: -0.28px; +$alert-dark-title-text-align: left; +$alert-dark-title-text-decoration: none; +$alert-dark-title-text-transform: none; +$alert-dark-title-color: #ffffff; +$alert-dark-text-font-family: 'Inter'; +$alert-dark-text-font-size: 14px; +$alert-dark-text-font-weight: 400; +$alert-dark-text-line-height: 1.6; +$alert-dark-text-letter-spacing: -0.28px; +$alert-dark-text-text-align: left; +$alert-dark-text-text-decoration: none; +$alert-dark-text-text-transform: none; +$alert-dark-text-color: rgba(255, 255, 255, 0.8500000238418579); +$alert-dark-actions-spacing: 10px; +$alert-dark-actions-font-family: 'Inter'; +$alert-dark-actions-font-size: 12px; +$alert-dark-actions-font-weight: 600; +$alert-dark-actions-line-height: 1.3333332824707032; +$alert-dark-actions-letter-spacing: -0.24px; +$alert-dark-actions-text-align: left; +$alert-dark-actions-text-decoration: none; +$alert-dark-actions-text-transform: none; +$alert-dark-actions-color: #ffffff; + +// Light alert +$alert-light-background: #f8f8f8; +$alert-light-padding-top: 18px; +$alert-light-padding-right: 16px; +$alert-light-padding-bottom: 18px; +$alert-light-padding-left: 16px; +$alert-light-border-width: 1px; +$alert-light-border-radius: 6px; +$alert-light-border-color: transparent; +$alert-light-box-shadow: none; +$alert-light-spacing: 12px; +$alert-light-close-color: #000000; +$alert-light-icon-color: #0073e6; +$alert-light-body-spacing: 12px; +$alert-light-content-spacing: 5px; +$alert-light-title-font-family: 'Inter'; +$alert-light-title-font-size: 14px; +$alert-light-title-font-weight: 700; +$alert-light-title-line-height: 1.6; +$alert-light-title-letter-spacing: -0.28px; +$alert-light-title-text-align: left; +$alert-light-title-text-decoration: none; +$alert-light-title-text-transform: none; +$alert-light-title-color: #000000; +$alert-light-text-font-family: 'Inter'; +$alert-light-text-font-size: 14px; +$alert-light-text-font-weight: 400; +$alert-light-text-line-height: 1.6; +$alert-light-text-letter-spacing: -0.28px; +$alert-light-text-text-align: left; +$alert-light-text-text-decoration: none; +$alert-light-text-text-transform: none; +$alert-light-text-color: rgba(0, 0, 0, 0.800000011920929); +$alert-light-actions-spacing: 10px; +$alert-light-actions-font-family: 'Inter'; +$alert-light-actions-font-size: 12px; +$alert-light-actions-font-weight: 600; +$alert-light-actions-line-height: 1.3333332824707032; +$alert-light-actions-letter-spacing: -0.24px; +$alert-light-actions-text-align: left; +$alert-light-actions-text-decoration: none; +$alert-light-actions-text-transform: none; +$alert-light-actions-color: #000000; + +// Info alert +$alert-info-background: #307abf; +$alert-info-padding-top: 18px; +$alert-info-padding-right: 16px; +$alert-info-padding-bottom: 18px; +$alert-info-padding-left: 16px; +$alert-info-border-width: 1px; +$alert-info-border-radius: 6px; +$alert-info-border-color: transparent; +$alert-info-box-shadow: none; +$alert-info-spacing: 12px; +$alert-info-close-color: #ffffff; +$alert-info-icon-color: #ffffff; +$alert-info-body-spacing: 12px; +$alert-info-content-spacing: 5px; +$alert-info-title-font-family: 'Inter'; +$alert-info-title-font-size: 14px; +$alert-info-title-font-weight: 700; +$alert-info-title-line-height: 1.6; +$alert-info-title-letter-spacing: -0.28px; +$alert-info-title-text-align: left; +$alert-info-title-text-decoration: none; +$alert-info-title-text-transform: none; +$alert-info-title-color: #ffffff; +$alert-info-text-font-family: 'Inter'; +$alert-info-text-font-size: 14px; +$alert-info-text-font-weight: 400; +$alert-info-text-line-height: 1.6; +$alert-info-text-letter-spacing: -0.28px; +$alert-info-text-text-align: left; +$alert-info-text-text-decoration: none; +$alert-info-text-text-transform: none; +$alert-info-text-color: rgba(255, 255, 255, 0.8500000238418579); +$alert-info-actions-spacing: 10px; +$alert-info-actions-font-family: 'Inter'; +$alert-info-actions-font-size: 12px; +$alert-info-actions-font-weight: 600; +$alert-info-actions-line-height: 1.3333332824707032; +$alert-info-actions-letter-spacing: -0.24px; +$alert-info-actions-text-align: left; +$alert-info-actions-text-decoration: none; +$alert-info-actions-text-transform: none; +$alert-info-actions-color: #ffffff; + +// Success alert +$alert-success-background: #198754; +$alert-success-padding-top: 18px; +$alert-success-padding-right: 16px; +$alert-success-padding-bottom: 18px; +$alert-success-padding-left: 16px; +$alert-success-border-width: 1px; +$alert-success-border-radius: 6px; +$alert-success-border-color: transparent; +$alert-success-box-shadow: none; +$alert-success-spacing: 12px; +$alert-success-close-color: #ffffff; +$alert-success-icon-color: #ffffff; +$alert-success-body-spacing: 12px; +$alert-success-content-spacing: 5px; +$alert-success-title-font-family: 'Inter'; +$alert-success-title-font-size: 14px; +$alert-success-title-font-weight: 700; +$alert-success-title-line-height: 1.6; +$alert-success-title-letter-spacing: -0.28px; +$alert-success-title-text-align: left; +$alert-success-title-text-decoration: none; +$alert-success-title-text-transform: none; +$alert-success-title-color: #ffffff; +$alert-success-text-font-family: 'Inter'; +$alert-success-text-font-size: 14px; +$alert-success-text-font-weight: 400; +$alert-success-text-line-height: 1.6; +$alert-success-text-letter-spacing: -0.28px; +$alert-success-text-text-align: left; +$alert-success-text-text-decoration: none; +$alert-success-text-text-transform: none; +$alert-success-text-color: rgba(255, 255, 255, 0.8500000238418579); +$alert-success-actions-spacing: 10px; +$alert-success-actions-font-family: 'Inter'; +$alert-success-actions-font-size: 12px; +$alert-success-actions-font-weight: 600; +$alert-success-actions-line-height: 1.3333332824707032; +$alert-success-actions-letter-spacing: -0.24px; +$alert-success-actions-text-align: left; +$alert-success-actions-text-decoration: none; +$alert-success-actions-text-transform: none; +$alert-success-actions-color: #ffffff; + +// Warning alert +$alert-warning-background: #ffc107; +$alert-warning-padding-top: 18px; +$alert-warning-padding-right: 16px; +$alert-warning-padding-bottom: 18px; +$alert-warning-padding-left: 16px; +$alert-warning-border-width: 1px; +$alert-warning-border-radius: 6px; +$alert-warning-border-color: transparent; +$alert-warning-box-shadow: none; +$alert-warning-spacing: 12px; +$alert-warning-close-color: #000000; +$alert-warning-icon-color: #000000; +$alert-warning-body-spacing: 12px; +$alert-warning-content-spacing: 5px; +$alert-warning-title-font-family: 'Inter'; +$alert-warning-title-font-size: 14px; +$alert-warning-title-font-weight: 700; +$alert-warning-title-line-height: 1.6; +$alert-warning-title-letter-spacing: -0.28px; +$alert-warning-title-text-align: left; +$alert-warning-title-text-decoration: none; +$alert-warning-title-text-transform: none; +$alert-warning-title-color: #000000; +$alert-warning-text-font-family: 'Inter'; +$alert-warning-text-font-size: 14px; +$alert-warning-text-font-weight: 400; +$alert-warning-text-line-height: 1.6; +$alert-warning-text-letter-spacing: -0.28px; +$alert-warning-text-text-align: left; +$alert-warning-text-text-decoration: none; +$alert-warning-text-text-transform: none; +$alert-warning-text-color: rgba(0, 0, 0, 0.800000011920929); +$alert-warning-actions-spacing: 10px; +$alert-warning-actions-font-family: 'Inter'; +$alert-warning-actions-font-size: 12px; +$alert-warning-actions-font-weight: 600; +$alert-warning-actions-line-height: 1.3333332824707032; +$alert-warning-actions-letter-spacing: -0.24px; +$alert-warning-actions-text-align: left; +$alert-warning-actions-text-decoration: none; +$alert-warning-actions-text-transform: none; +$alert-warning-actions-color: #000000; + +// Danger alert +$alert-danger-background: #dc3545; +$alert-danger-padding-top: 18px; +$alert-danger-padding-right: 16px; +$alert-danger-padding-bottom: 18px; +$alert-danger-padding-left: 16px; +$alert-danger-border-width: 1px; +$alert-danger-border-radius: 6px; +$alert-danger-border-color: transparent; +$alert-danger-box-shadow: none; +$alert-danger-spacing: 12px; +$alert-danger-close-color: #ffffff; +$alert-danger-icon-color: #ffffff; +$alert-danger-body-spacing: 12px; +$alert-danger-content-spacing: 5px; +$alert-danger-title-font-family: 'Inter'; +$alert-danger-title-font-size: 14px; +$alert-danger-title-font-weight: 700; +$alert-danger-title-line-height: 1.6; +$alert-danger-title-letter-spacing: -0.28px; +$alert-danger-title-text-align: left; +$alert-danger-title-text-decoration: none; +$alert-danger-title-text-transform: none; +$alert-danger-title-color: #ffffff; +$alert-danger-text-font-family: 'Inter'; +$alert-danger-text-font-size: 14px; +$alert-danger-text-font-weight: 400; +$alert-danger-text-line-height: 1.6; +$alert-danger-text-letter-spacing: -0.28px; +$alert-danger-text-text-align: left; +$alert-danger-text-text-decoration: none; +$alert-danger-text-text-transform: none; +$alert-danger-text-color: rgba(255, 255, 255, 0.8500000238418579); +$alert-danger-actions-spacing: 10px; +$alert-danger-actions-font-family: 'Inter'; +$alert-danger-actions-font-size: 12px; +$alert-danger-actions-font-weight: 600; +$alert-danger-actions-line-height: 1.3333332824707032; +$alert-danger-actions-letter-spacing: -0.24px; +$alert-danger-actions-text-align: left; +$alert-danger-actions-text-decoration: none; +$alert-danger-actions-text-transform: none; +$alert-danger-actions-color: #ffffff; + +// Type9 alert +$alert-type9-background: #4c34b6; +$alert-type9-padding-top: 18px; +$alert-type9-padding-right: 16px; +$alert-type9-padding-bottom: 18px; +$alert-type9-padding-left: 16px; +$alert-type9-border-width: 1px; +$alert-type9-border-radius: 6px; +$alert-type9-border-color: transparent; +$alert-type9-box-shadow: none; +$alert-type9-spacing: 12px; +$alert-type9-close-color: #ffffff; +$alert-type9-icon-color: #ffffff; +$alert-type9-body-spacing: 12px; +$alert-type9-content-spacing: 5px; +$alert-type9-title-font-family: 'Inter'; +$alert-type9-title-font-size: 14px; +$alert-type9-title-font-weight: 700; +$alert-type9-title-line-height: 1.6; +$alert-type9-title-letter-spacing: -0.28px; +$alert-type9-title-text-align: left; +$alert-type9-title-text-decoration: none; +$alert-type9-title-text-transform: none; +$alert-type9-title-color: #ffffff; +$alert-type9-text-font-family: 'Inter'; +$alert-type9-text-font-size: 14px; +$alert-type9-text-font-weight: 400; +$alert-type9-text-line-height: 1.6; +$alert-type9-text-letter-spacing: -0.28px; +$alert-type9-text-text-align: left; +$alert-type9-text-text-decoration: none; +$alert-type9-text-text-transform: none; +$alert-type9-text-color: rgba(255, 255, 255, 0.8500000238418579); +$alert-type9-actions-spacing: 10px; +$alert-type9-actions-font-family: 'Inter'; +$alert-type9-actions-font-size: 12px; +$alert-type9-actions-font-weight: 600; +$alert-type9-actions-line-height: 1.3333332824707032; +$alert-type9-actions-letter-spacing: -0.24px; +$alert-type9-actions-text-align: left; +$alert-type9-actions-text-decoration: none; +$alert-type9-actions-text-transform: none; +$alert-type9-actions-color: #ffffff; + +// Horizontal alert +$alert-horizontal-background: #000000; +$alert-horizontal-padding-top: 18px; +$alert-horizontal-padding-right: 16px; +$alert-horizontal-padding-bottom: 18px; +$alert-horizontal-padding-left: 16px; +$alert-horizontal-border-width: 1px; +$alert-horizontal-border-radius: 6px; +$alert-horizontal-border-color: transparent; +$alert-horizontal-box-shadow: none; +$alert-horizontal-spacing: 12px; +$alert-horizontal-close-color: #ffffff; +$alert-horizontal-icon-color: #ffffff; +$alert-horizontal-body-spacing: 12px; +$alert-horizontal-content-spacing: 5px; +$alert-horizontal-title-font-family: 'Inter'; +$alert-horizontal-title-font-size: 14px; +$alert-horizontal-title-font-weight: 700; +$alert-horizontal-title-line-height: 1.6; +$alert-horizontal-title-letter-spacing: -0.28px; +$alert-horizontal-title-text-align: left; +$alert-horizontal-title-text-decoration: none; +$alert-horizontal-title-text-transform: none; +$alert-horizontal-title-color: #ffffff; +$alert-horizontal-text-font-family: 'Inter'; +$alert-horizontal-text-font-size: 14px; +$alert-horizontal-text-font-weight: 400; +$alert-horizontal-text-line-height: 1.6; +$alert-horizontal-text-letter-spacing: -0.28px; +$alert-horizontal-text-text-align: left; +$alert-horizontal-text-text-decoration: none; +$alert-horizontal-text-text-transform: none; +$alert-horizontal-text-color: rgba(255, 255, 255, 0.8500000238418579); +$alert-horizontal-actions-spacing: 10px; +$alert-horizontal-actions-font-family: 'Inter'; +$alert-horizontal-actions-font-size: 12px; +$alert-horizontal-actions-font-weight: 600; +$alert-horizontal-actions-line-height: 1.3333332824707032; +$alert-horizontal-actions-letter-spacing: -0.24px; +$alert-horizontal-actions-text-align: left; +$alert-horizontal-actions-text-decoration: none; +$alert-horizontal-actions-text-transform: none; +$alert-horizontal-actions-color: #ffffff; + +// Vertical alert +$alert-vertical-background: #000000; +$alert-vertical-padding-top: 13px; +$alert-vertical-padding-right: 16px; +$alert-vertical-padding-bottom: 13px; +$alert-vertical-padding-left: 16px; +$alert-vertical-border-width: 1px; +$alert-vertical-border-radius: 6px; +$alert-vertical-border-color: transparent; +$alert-vertical-box-shadow: none; +$alert-vertical-spacing: 12px; +$alert-vertical-close-color: #ffffff; +$alert-vertical-icon-color: #ffffff; +$alert-vertical-body-spacing: 10px; +$alert-vertical-content-spacing: 5px; +$alert-vertical-title-font-family: 'Inter'; +$alert-vertical-title-font-size: 14px; +$alert-vertical-title-font-weight: 700; +$alert-vertical-title-line-height: 1.6; +$alert-vertical-title-letter-spacing: -0.28px; +$alert-vertical-title-text-align: left; +$alert-vertical-title-text-decoration: none; +$alert-vertical-title-text-transform: none; +$alert-vertical-title-color: #ffffff; +$alert-vertical-text-font-family: 'Inter'; +$alert-vertical-text-font-size: 14px; +$alert-vertical-text-font-weight: 400; +$alert-vertical-text-line-height: 1.6; +$alert-vertical-text-letter-spacing: -0.28px; +$alert-vertical-text-text-align: left; +$alert-vertical-text-text-decoration: none; +$alert-vertical-text-text-transform: none; +$alert-vertical-text-color: rgba(255, 255, 255, 0.8500000238418579); +$alert-vertical-actions-spacing: 10px; +$alert-vertical-actions-font-family: 'Inter'; +$alert-vertical-actions-font-size: 12px; +$alert-vertical-actions-font-weight: 600; +$alert-vertical-actions-line-height: 1.3333332824707032; +$alert-vertical-actions-letter-spacing: -0.24px; +$alert-vertical-actions-text-align: left; +$alert-vertical-actions-text-decoration: none; +$alert-vertical-actions-text-transform: none; +$alert-vertical-actions-color: #ffffff; \ No newline at end of file diff --git a/sass/project/default_vars/buttons.scss b/sass/project/default_vars/buttons.scss new file mode 100644 index 00000000..24acfe26 --- /dev/null +++ b/sass/project/default_vars/buttons.scss @@ -0,0 +1,955 @@ +$button-variants: ( "primary", "custom-type", "outline-secondary", "danger", "light", "dark", "secondary"); + +$button-sizes: ( "sm", "md", "lg" ); + +$button-themes: ( "dark", "light" ); + +$button-states: ( "", "hover", "disabled" ); + +.btn { + + // button Primary , theme: Dark, state: Default + --button-primary-dark-background: #0073e6; + --button-primary-dark-padding-top: 13px; + --button-primary-dark-padding-right: 20px; + --button-primary-dark-padding-bottom: 13px; + --button-primary-dark-padding-left: 20px; + --button-primary-dark-border-width: 1px; + --button-primary-dark-border-radius: 4px; + --button-primary-dark-border-color: transparent; + --button-primary-dark-font-family: 'Inter'; + --button-primary-dark-font-size: 14px; + --button-primary-dark-font-weight: 600; + --button-primary-dark-line-height: 1.2857142639160157; + --button-primary-dark-letter-spacing: -0.28px; + --button-primary-dark-text-align: center; + --button-primary-dark-text-decoration: none; + --button-primary-dark-text-transform: none; + --button-primary-dark-color: #ffffff; + --button-primary-dark-box-shadow: none; + --button-primary-dark-opacity: 1; + + // button Primary , theme: Dark, state: Hover + --button-primary-dark-hover-background: #258cf2; + --button-primary-dark-hover-padding-top: 13px; + --button-primary-dark-hover-padding-right: 20px; + --button-primary-dark-hover-padding-bottom: 13px; + --button-primary-dark-hover-padding-left: 20px; + --button-primary-dark-hover-border-width: 1px; + --button-primary-dark-hover-border-radius: 4px; + --button-primary-dark-hover-border-color: transparent; + --button-primary-dark-hover-font-family: 'Inter'; + --button-primary-dark-hover-font-size: 14px; + --button-primary-dark-hover-font-weight: 600; + --button-primary-dark-hover-line-height: 1.2857142639160157; + --button-primary-dark-hover-letter-spacing: -0.28px; + --button-primary-dark-hover-text-align: center; + --button-primary-dark-hover-text-decoration: none; + --button-primary-dark-hover-text-transform: none; + --button-primary-dark-hover-color: #ffffff; + --button-primary-dark-hover-box-shadow: none; + --button-primary-dark-hover-opacity: 1; + + // button Primary , theme: Dark, state: Disabled + --button-primary-dark-disabled-background: #333333; + --button-primary-dark-disabled-padding-top: 13px; + --button-primary-dark-disabled-padding-right: 20px; + --button-primary-dark-disabled-padding-bottom: 13px; + --button-primary-dark-disabled-padding-left: 20px; + --button-primary-dark-disabled-border-width: 1px; + --button-primary-dark-disabled-border-radius: 4px; + --button-primary-dark-disabled-border-color: transparent; + --button-primary-dark-disabled-font-family: 'Inter'; + --button-primary-dark-disabled-font-size: 14px; + --button-primary-dark-disabled-font-weight: 600; + --button-primary-dark-disabled-line-height: 1.2857142639160157; + --button-primary-dark-disabled-letter-spacing: -0.28px; + --button-primary-dark-disabled-text-align: center; + --button-primary-dark-disabled-text-decoration: none; + --button-primary-dark-disabled-text-transform: none; + --button-primary-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --button-primary-dark-disabled-box-shadow: none; + --button-primary-dark-disabled-opacity: 0.699999988079071; + + // button Custom-type , theme: Dark, state: Default + --button-custom-type-dark-background: #ffc107; + --button-custom-type-dark-padding-top: 13px; + --button-custom-type-dark-padding-right: 20px; + --button-custom-type-dark-padding-bottom: 13px; + --button-custom-type-dark-padding-left: 20px; + --button-custom-type-dark-border-width: 1px; + --button-custom-type-dark-border-radius: 4px; + --button-custom-type-dark-border-color: transparent; + --button-custom-type-dark-font-family: 'Inter'; + --button-custom-type-dark-font-size: 14px; + --button-custom-type-dark-font-weight: 600; + --button-custom-type-dark-line-height: 1.2857142639160157; + --button-custom-type-dark-letter-spacing: -0.28px; + --button-custom-type-dark-text-align: center; + --button-custom-type-dark-text-decoration: none; + --button-custom-type-dark-text-transform: none; + --button-custom-type-dark-color: #333333; + --button-custom-type-dark-box-shadow: none; + --button-custom-type-dark-opacity: 1; + + // button Custom-type , theme: Dark, state: Hover + --button-custom-type-dark-hover-background: #e0aa09, rgba(0, 0, 0, 0.20000000298023224), rgba(0, 0, 0, 0.20000000298023224), rgba(0, 0, 0, 0.20000000298023224); + --button-custom-type-dark-hover-padding-top: 13px; + --button-custom-type-dark-hover-padding-right: 20px; + --button-custom-type-dark-hover-padding-bottom: 13px; + --button-custom-type-dark-hover-padding-left: 20px; + --button-custom-type-dark-hover-border-width: 1px; + --button-custom-type-dark-hover-border-radius: 4px; + --button-custom-type-dark-hover-border-color: #c32b3a; + --button-custom-type-dark-hover-font-family: 'Inter'; + --button-custom-type-dark-hover-font-size: 14px; + --button-custom-type-dark-hover-font-weight: 600; + --button-custom-type-dark-hover-line-height: 1.2857142639160157; + --button-custom-type-dark-hover-letter-spacing: -0.28px; + --button-custom-type-dark-hover-text-align: center; + --button-custom-type-dark-hover-text-decoration: none; + --button-custom-type-dark-hover-text-transform: none; + --button-custom-type-dark-hover-color: #c32b3a; + --button-custom-type-dark-hover-box-shadow: none; + --button-custom-type-dark-hover-opacity: 1; + + // button Custom-type , theme: Dark, state: Disabled + --button-custom-type-dark-disabled-background: #333333; + --button-custom-type-dark-disabled-padding-top: 13px; + --button-custom-type-dark-disabled-padding-right: 20px; + --button-custom-type-dark-disabled-padding-bottom: 13px; + --button-custom-type-dark-disabled-padding-left: 20px; + --button-custom-type-dark-disabled-border-width: 1px; + --button-custom-type-dark-disabled-border-radius: 4px; + --button-custom-type-dark-disabled-border-color: transparent; + --button-custom-type-dark-disabled-font-family: 'Inter'; + --button-custom-type-dark-disabled-font-size: 14px; + --button-custom-type-dark-disabled-font-weight: 600; + --button-custom-type-dark-disabled-line-height: 1.2857142639160157; + --button-custom-type-dark-disabled-letter-spacing: -0.28px; + --button-custom-type-dark-disabled-text-align: center; + --button-custom-type-dark-disabled-text-decoration: none; + --button-custom-type-dark-disabled-text-transform: none; + --button-custom-type-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --button-custom-type-dark-disabled-box-shadow: none; + --button-custom-type-dark-disabled-opacity: 0.699999988079071; + + // button Outline-secondary , theme: Dark, state: Default + --button-outline-secondary-dark-background: transparent; + --button-outline-secondary-dark-padding-top: 13px; + --button-outline-secondary-dark-padding-right: 20px; + --button-outline-secondary-dark-padding-bottom: 13px; + --button-outline-secondary-dark-padding-left: 20px; + --button-outline-secondary-dark-border-width: 1px; + --button-outline-secondary-dark-border-radius: 4px; + --button-outline-secondary-dark-border-color: #4c34b6; + --button-outline-secondary-dark-font-family: 'Inter'; + --button-outline-secondary-dark-font-size: 14px; + --button-outline-secondary-dark-font-weight: 600; + --button-outline-secondary-dark-line-height: 1.2857142639160157; + --button-outline-secondary-dark-letter-spacing: -0.28px; + --button-outline-secondary-dark-text-align: center; + --button-outline-secondary-dark-text-decoration: none; + --button-outline-secondary-dark-text-transform: none; + --button-outline-secondary-dark-color: #4c34b6; + --button-outline-secondary-dark-box-shadow: none; + --button-outline-secondary-dark-opacity: 1; + + // button Outline-secondary , theme: Dark, state: Hover + --button-outline-secondary-dark-hover-background: transparent; + --button-outline-secondary-dark-hover-padding-top: 13px; + --button-outline-secondary-dark-hover-padding-right: 20px; + --button-outline-secondary-dark-hover-padding-bottom: 13px; + --button-outline-secondary-dark-hover-padding-left: 20px; + --button-outline-secondary-dark-hover-border-width: 1px; + --button-outline-secondary-dark-hover-border-radius: 4px; + --button-outline-secondary-dark-hover-border-color: #7158dd; + --button-outline-secondary-dark-hover-font-family: 'Inter'; + --button-outline-secondary-dark-hover-font-size: 14px; + --button-outline-secondary-dark-hover-font-weight: 600; + --button-outline-secondary-dark-hover-line-height: 1.2857142639160157; + --button-outline-secondary-dark-hover-letter-spacing: -0.28px; + --button-outline-secondary-dark-hover-text-align: center; + --button-outline-secondary-dark-hover-text-decoration: none; + --button-outline-secondary-dark-hover-text-transform: none; + --button-outline-secondary-dark-hover-color: #7158dd; + --button-outline-secondary-dark-hover-box-shadow: none; + --button-outline-secondary-dark-hover-opacity: 1; + + // button Outline-secondary , theme: Dark, state: Disabled + --button-outline-secondary-dark-disabled-background: #333333; + --button-outline-secondary-dark-disabled-padding-top: 13px; + --button-outline-secondary-dark-disabled-padding-right: 20px; + --button-outline-secondary-dark-disabled-padding-bottom: 13px; + --button-outline-secondary-dark-disabled-padding-left: 20px; + --button-outline-secondary-dark-disabled-border-width: 1px; + --button-outline-secondary-dark-disabled-border-radius: 4px; + --button-outline-secondary-dark-disabled-border-color: transparent; + --button-outline-secondary-dark-disabled-font-family: 'Inter'; + --button-outline-secondary-dark-disabled-font-size: 14px; + --button-outline-secondary-dark-disabled-font-weight: 600; + --button-outline-secondary-dark-disabled-line-height: 1.2857142639160157; + --button-outline-secondary-dark-disabled-letter-spacing: -0.28px; + --button-outline-secondary-dark-disabled-text-align: center; + --button-outline-secondary-dark-disabled-text-decoration: none; + --button-outline-secondary-dark-disabled-text-transform: none; + --button-outline-secondary-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --button-outline-secondary-dark-disabled-box-shadow: none; + --button-outline-secondary-dark-disabled-opacity: 0.699999988079071; + + // button Danger , theme: Dark, state: Default + --button-danger-dark-background: #dc3545; + --button-danger-dark-padding-top: 13px; + --button-danger-dark-padding-right: 20px; + --button-danger-dark-padding-bottom: 13px; + --button-danger-dark-padding-left: 20px; + --button-danger-dark-border-width: 1px; + --button-danger-dark-border-radius: 4px; + --button-danger-dark-border-color: transparent; + --button-danger-dark-font-family: 'Inter'; + --button-danger-dark-font-size: 14px; + --button-danger-dark-font-weight: 600; + --button-danger-dark-line-height: 1.2857142639160157; + --button-danger-dark-letter-spacing: -0.28px; + --button-danger-dark-text-align: center; + --button-danger-dark-text-decoration: none; + --button-danger-dark-text-transform: none; + --button-danger-dark-color: #ffffff; + --button-danger-dark-box-shadow: none; + --button-danger-dark-opacity: 1; + + // button Danger , theme: Dark, state: Hover + --button-danger-dark-hover-background: #f35d6c; + --button-danger-dark-hover-padding-top: 13px; + --button-danger-dark-hover-padding-right: 20px; + --button-danger-dark-hover-padding-bottom: 13px; + --button-danger-dark-hover-padding-left: 20px; + --button-danger-dark-hover-border-width: 1px; + --button-danger-dark-hover-border-radius: 4px; + --button-danger-dark-hover-border-color: transparent; + --button-danger-dark-hover-font-family: 'Inter'; + --button-danger-dark-hover-font-size: 14px; + --button-danger-dark-hover-font-weight: 600; + --button-danger-dark-hover-line-height: 1.2857142639160157; + --button-danger-dark-hover-letter-spacing: -0.28px; + --button-danger-dark-hover-text-align: center; + --button-danger-dark-hover-text-decoration: none; + --button-danger-dark-hover-text-transform: none; + --button-danger-dark-hover-color: #ffffff; + --button-danger-dark-hover-box-shadow: none; + --button-danger-dark-hover-opacity: 1; + + // button Danger , theme: Dark, state: Disabled + --button-danger-dark-disabled-background: #333333; + --button-danger-dark-disabled-padding-top: 13px; + --button-danger-dark-disabled-padding-right: 20px; + --button-danger-dark-disabled-padding-bottom: 13px; + --button-danger-dark-disabled-padding-left: 20px; + --button-danger-dark-disabled-border-width: 1px; + --button-danger-dark-disabled-border-radius: 4px; + --button-danger-dark-disabled-border-color: transparent; + --button-danger-dark-disabled-font-family: 'Inter'; + --button-danger-dark-disabled-font-size: 14px; + --button-danger-dark-disabled-font-weight: 600; + --button-danger-dark-disabled-line-height: 1.2857142639160157; + --button-danger-dark-disabled-letter-spacing: -0.28px; + --button-danger-dark-disabled-text-align: center; + --button-danger-dark-disabled-text-decoration: none; + --button-danger-dark-disabled-text-transform: none; + --button-danger-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --button-danger-dark-disabled-box-shadow: none; + --button-danger-dark-disabled-opacity: 0.699999988079071; + + // button Light , theme: Dark, state: Default + --button-light-dark-background: #ffffff; + --button-light-dark-padding-top: 13px; + --button-light-dark-padding-right: 20px; + --button-light-dark-padding-bottom: 13px; + --button-light-dark-padding-left: 20px; + --button-light-dark-border-width: 1px; + --button-light-dark-border-radius: 4px; + --button-light-dark-border-color: transparent; + --button-light-dark-font-family: 'Inter'; + --button-light-dark-font-size: 14px; + --button-light-dark-font-weight: 600; + --button-light-dark-line-height: 1.2857142639160157; + --button-light-dark-letter-spacing: -0.28px; + --button-light-dark-text-align: center; + --button-light-dark-text-decoration: none; + --button-light-dark-text-transform: none; + --button-light-dark-color: #000000; + --button-light-dark-box-shadow: none; + --button-light-dark-opacity: 1; + + // button Light , theme: Dark, state: Hover + --button-light-dark-hover-background: #ffffff; + --button-light-dark-hover-padding-top: 13px; + --button-light-dark-hover-padding-right: 20px; + --button-light-dark-hover-padding-bottom: 13px; + --button-light-dark-hover-padding-left: 20px; + --button-light-dark-hover-border-width: 1px; + --button-light-dark-hover-border-radius: 4px; + --button-light-dark-hover-border-color: transparent; + --button-light-dark-hover-font-family: 'Inter'; + --button-light-dark-hover-font-size: 14px; + --button-light-dark-hover-font-weight: 600; + --button-light-dark-hover-line-height: 1.2857142639160157; + --button-light-dark-hover-letter-spacing: -0.28px; + --button-light-dark-hover-text-align: center; + --button-light-dark-hover-text-decoration: none; + --button-light-dark-hover-text-transform: none; + --button-light-dark-hover-color: #0073e6; + --button-light-dark-hover-box-shadow: none; + --button-light-dark-hover-opacity: 1; + + // button Light , theme: Dark, state: Disabled + --button-light-dark-disabled-background: #333333; + --button-light-dark-disabled-padding-top: 13px; + --button-light-dark-disabled-padding-right: 20px; + --button-light-dark-disabled-padding-bottom: 13px; + --button-light-dark-disabled-padding-left: 20px; + --button-light-dark-disabled-border-width: 1px; + --button-light-dark-disabled-border-radius: 4px; + --button-light-dark-disabled-border-color: transparent; + --button-light-dark-disabled-font-family: 'Inter'; + --button-light-dark-disabled-font-size: 14px; + --button-light-dark-disabled-font-weight: 600; + --button-light-dark-disabled-line-height: 1.2857142639160157; + --button-light-dark-disabled-letter-spacing: -0.28px; + --button-light-dark-disabled-text-align: center; + --button-light-dark-disabled-text-decoration: none; + --button-light-dark-disabled-text-transform: none; + --button-light-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --button-light-dark-disabled-box-shadow: none; + --button-light-dark-disabled-opacity: 0.699999988079071; + + // button Dark , theme: Dark, state: Default + --button-dark-dark-background: #333333; + --button-dark-dark-padding-top: 13px; + --button-dark-dark-padding-right: 20px; + --button-dark-dark-padding-bottom: 13px; + --button-dark-dark-padding-left: 20px; + --button-dark-dark-border-width: 1px; + --button-dark-dark-border-radius: 4px; + --button-dark-dark-border-color: transparent; + --button-dark-dark-font-family: 'Inter'; + --button-dark-dark-font-size: 14px; + --button-dark-dark-font-weight: 600; + --button-dark-dark-line-height: 1.2857142639160157; + --button-dark-dark-letter-spacing: -0.28px; + --button-dark-dark-text-align: center; + --button-dark-dark-text-decoration: none; + --button-dark-dark-text-transform: none; + --button-dark-dark-color: #ffffff; + --button-dark-dark-box-shadow: none; + --button-dark-dark-opacity: 1; + + // button Dark , theme: Dark, state: Hover + --button-dark-dark-hover-background: #0f69c1; + --button-dark-dark-hover-padding-top: 13px; + --button-dark-dark-hover-padding-right: 20px; + --button-dark-dark-hover-padding-bottom: 13px; + --button-dark-dark-hover-padding-left: 20px; + --button-dark-dark-hover-border-width: 1px; + --button-dark-dark-hover-border-radius: 4px; + --button-dark-dark-hover-border-color: transparent; + --button-dark-dark-hover-font-family: 'Inter'; + --button-dark-dark-hover-font-size: 14px; + --button-dark-dark-hover-font-weight: 600; + --button-dark-dark-hover-line-height: 1.2857142639160157; + --button-dark-dark-hover-letter-spacing: -0.28px; + --button-dark-dark-hover-text-align: center; + --button-dark-dark-hover-text-decoration: none; + --button-dark-dark-hover-text-transform: none; + --button-dark-dark-hover-color: #ffffff; + --button-dark-dark-hover-box-shadow: none; + --button-dark-dark-hover-opacity: 1; + + // button Dark , theme: Dark, state: Disabled + --button-dark-dark-disabled-background: #333333; + --button-dark-dark-disabled-padding-top: 13px; + --button-dark-dark-disabled-padding-right: 20px; + --button-dark-dark-disabled-padding-bottom: 13px; + --button-dark-dark-disabled-padding-left: 20px; + --button-dark-dark-disabled-border-width: 1px; + --button-dark-dark-disabled-border-radius: 4px; + --button-dark-dark-disabled-border-color: transparent; + --button-dark-dark-disabled-font-family: 'Inter'; + --button-dark-dark-disabled-font-size: 14px; + --button-dark-dark-disabled-font-weight: 600; + --button-dark-dark-disabled-line-height: 1.2857142639160157; + --button-dark-dark-disabled-letter-spacing: -0.28px; + --button-dark-dark-disabled-text-align: center; + --button-dark-dark-disabled-text-decoration: none; + --button-dark-dark-disabled-text-transform: none; + --button-dark-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --button-dark-dark-disabled-box-shadow: none; + --button-dark-dark-disabled-opacity: 0.699999988079071; + + // button Secondary , theme: Dark, state: Default + --button-secondary-dark-background: #4c34b6; + --button-secondary-dark-padding-top: 13px; + --button-secondary-dark-padding-right: 20px; + --button-secondary-dark-padding-bottom: 13px; + --button-secondary-dark-padding-left: 20px; + --button-secondary-dark-border-width: 1px; + --button-secondary-dark-border-radius: 4px; + --button-secondary-dark-border-color: transparent; + --button-secondary-dark-font-family: 'Inter'; + --button-secondary-dark-font-size: 14px; + --button-secondary-dark-font-weight: 600; + --button-secondary-dark-line-height: 1.2857142639160157; + --button-secondary-dark-letter-spacing: -0.28px; + --button-secondary-dark-text-align: center; + --button-secondary-dark-text-decoration: none; + --button-secondary-dark-text-transform: none; + --button-secondary-dark-color: #ffffff; + --button-secondary-dark-box-shadow: none; + --button-secondary-dark-opacity: 1; + + // button Secondary , theme: Dark, state: Hover + --button-secondary-dark-hover-background: #7158dd; + --button-secondary-dark-hover-padding-top: 13px; + --button-secondary-dark-hover-padding-right: 20px; + --button-secondary-dark-hover-padding-bottom: 13px; + --button-secondary-dark-hover-padding-left: 20px; + --button-secondary-dark-hover-border-width: 1px; + --button-secondary-dark-hover-border-radius: 4px; + --button-secondary-dark-hover-border-color: transparent; + --button-secondary-dark-hover-font-family: 'Inter'; + --button-secondary-dark-hover-font-size: 14px; + --button-secondary-dark-hover-font-weight: 600; + --button-secondary-dark-hover-line-height: 1.2857142639160157; + --button-secondary-dark-hover-letter-spacing: -0.28px; + --button-secondary-dark-hover-text-align: center; + --button-secondary-dark-hover-text-decoration: none; + --button-secondary-dark-hover-text-transform: none; + --button-secondary-dark-hover-color: #ffffff; + --button-secondary-dark-hover-box-shadow: none; + --button-secondary-dark-hover-opacity: 1; + + // button Secondary , theme: Dark, state: Disabled + --button-secondary-dark-disabled-background: #333333; + --button-secondary-dark-disabled-padding-top: 13px; + --button-secondary-dark-disabled-padding-right: 20px; + --button-secondary-dark-disabled-padding-bottom: 13px; + --button-secondary-dark-disabled-padding-left: 20px; + --button-secondary-dark-disabled-border-width: 1px; + --button-secondary-dark-disabled-border-radius: 4px; + --button-secondary-dark-disabled-border-color: transparent; + --button-secondary-dark-disabled-font-family: 'Inter'; + --button-secondary-dark-disabled-font-size: 14px; + --button-secondary-dark-disabled-font-weight: 600; + --button-secondary-dark-disabled-line-height: 1.2857142639160157; + --button-secondary-dark-disabled-letter-spacing: -0.28px; + --button-secondary-dark-disabled-text-align: center; + --button-secondary-dark-disabled-text-decoration: none; + --button-secondary-dark-disabled-text-transform: none; + --button-secondary-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --button-secondary-dark-disabled-box-shadow: none; + --button-secondary-dark-disabled-opacity: 0.699999988079071; + + // button Primary , theme: Light, state: Default + --button-primary-background: #0073e6; + --button-primary-padding-top: 13px; + --button-primary-padding-right: 20px; + --button-primary-padding-bottom: 13px; + --button-primary-padding-left: 20px; + --button-primary-border-width: 1px; + --button-primary-border-radius: 4px; + --button-primary-border-color: transparent; + --button-primary-font-family: 'Inter'; + --button-primary-font-size: 14px; + --button-primary-font-weight: 600; + --button-primary-line-height: 1.2857142639160157; + --button-primary-letter-spacing: -0.28px; + --button-primary-text-align: center; + --button-primary-text-decoration: none; + --button-primary-text-transform: none; + --button-primary-color: #ffffff; + --button-primary-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --button-primary-opacity: 1; + + // button Primary , theme: Light, state: Hover + --button-primary-hover-background: #0f69c1; + --button-primary-hover-padding-top: 13px; + --button-primary-hover-padding-right: 20px; + --button-primary-hover-padding-bottom: 13px; + --button-primary-hover-padding-left: 20px; + --button-primary-hover-border-width: 1px; + --button-primary-hover-border-radius: 4px; + --button-primary-hover-border-color: transparent; + --button-primary-hover-font-family: 'Inter'; + --button-primary-hover-font-size: 14px; + --button-primary-hover-font-weight: 600; + --button-primary-hover-line-height: 1.2857142639160157; + --button-primary-hover-letter-spacing: -0.28px; + --button-primary-hover-text-align: center; + --button-primary-hover-text-decoration: none; + --button-primary-hover-text-transform: none; + --button-primary-hover-color: #ffffff; + --button-primary-hover-box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.20000000298023224); + --button-primary-hover-opacity: 1; + + // button Primary , theme: Light, state: Disabled + --button-primary-disabled-background: #e5e5e5; + --button-primary-disabled-padding-top: 13px; + --button-primary-disabled-padding-right: 20px; + --button-primary-disabled-padding-bottom: 13px; + --button-primary-disabled-padding-left: 20px; + --button-primary-disabled-border-width: 1px; + --button-primary-disabled-border-radius: 4px; + --button-primary-disabled-border-color: transparent; + --button-primary-disabled-font-family: 'Inter'; + --button-primary-disabled-font-size: 14px; + --button-primary-disabled-font-weight: 600; + --button-primary-disabled-line-height: 1.2857142639160157; + --button-primary-disabled-letter-spacing: -0.28px; + --button-primary-disabled-text-align: center; + --button-primary-disabled-text-decoration: none; + --button-primary-disabled-text-transform: none; + --button-primary-disabled-color: #777777; + --button-primary-disabled-box-shadow: none; + --button-primary-disabled-opacity: 0.699999988079071; + + // button Custom-type , theme: Light, state: Default + --button-custom-type-background: #ffc107; + --button-custom-type-padding-top: 13px; + --button-custom-type-padding-right: 20px; + --button-custom-type-padding-bottom: 13px; + --button-custom-type-padding-left: 20px; + --button-custom-type-border-width: 1px; + --button-custom-type-border-radius: 4px; + --button-custom-type-border-color: transparent; + --button-custom-type-font-family: 'Inter'; + --button-custom-type-font-size: 14px; + --button-custom-type-font-weight: 600; + --button-custom-type-line-height: 1.2857142639160157; + --button-custom-type-letter-spacing: -0.28px; + --button-custom-type-text-align: center; + --button-custom-type-text-decoration: none; + --button-custom-type-text-transform: none; + --button-custom-type-color: #333333; + --button-custom-type-box-shadow: none; + --button-custom-type-opacity: 1; + + // button Custom-type , theme: Light, state: Hover + --button-custom-type-hover-background: #e5ae06; + --button-custom-type-hover-padding-top: 13px; + --button-custom-type-hover-padding-right: 20px; + --button-custom-type-hover-padding-bottom: 13px; + --button-custom-type-hover-padding-left: 20px; + --button-custom-type-hover-border-width: 1px; + --button-custom-type-hover-border-radius: 4px; + --button-custom-type-hover-border-color: #c32b3a; + --button-custom-type-hover-font-family: 'Inter'; + --button-custom-type-hover-font-size: 14px; + --button-custom-type-hover-font-weight: 600; + --button-custom-type-hover-line-height: 1.2857142639160157; + --button-custom-type-hover-letter-spacing: -0.28px; + --button-custom-type-hover-text-align: center; + --button-custom-type-hover-text-decoration: none; + --button-custom-type-hover-text-transform: none; + --button-custom-type-hover-color: #c32b3a; + --button-custom-type-hover-box-shadow: none; + --button-custom-type-hover-opacity: 1; + + // button Custom-type , theme: Light, state: Disabled + --button-custom-type-disabled-background: #e5e5e5; + --button-custom-type-disabled-padding-top: 13px; + --button-custom-type-disabled-padding-right: 20px; + --button-custom-type-disabled-padding-bottom: 13px; + --button-custom-type-disabled-padding-left: 20px; + --button-custom-type-disabled-border-width: 1px; + --button-custom-type-disabled-border-radius: 4px; + --button-custom-type-disabled-border-color: transparent; + --button-custom-type-disabled-font-family: 'Inter'; + --button-custom-type-disabled-font-size: 14px; + --button-custom-type-disabled-font-weight: 600; + --button-custom-type-disabled-line-height: 1.2857142639160157; + --button-custom-type-disabled-letter-spacing: -0.28px; + --button-custom-type-disabled-text-align: center; + --button-custom-type-disabled-text-decoration: none; + --button-custom-type-disabled-text-transform: none; + --button-custom-type-disabled-color: #777777; + --button-custom-type-disabled-box-shadow: none; + --button-custom-type-disabled-opacity: 0.699999988079071; + + // button Outline-secondary , theme: Light, state: Default + --button-outline-secondary-background: transparent; + --button-outline-secondary-padding-top: 13px; + --button-outline-secondary-padding-right: 20px; + --button-outline-secondary-padding-bottom: 13px; + --button-outline-secondary-padding-left: 20px; + --button-outline-secondary-border-width: 1px; + --button-outline-secondary-border-radius: 4px; + --button-outline-secondary-border-color: #4c34b6; + --button-outline-secondary-font-family: 'Inter'; + --button-outline-secondary-font-size: 14px; + --button-outline-secondary-font-weight: 600; + --button-outline-secondary-line-height: 1.2857142639160157; + --button-outline-secondary-letter-spacing: -0.28px; + --button-outline-secondary-text-align: center; + --button-outline-secondary-text-decoration: none; + --button-outline-secondary-text-transform: none; + --button-outline-secondary-color: #4c34b6; + --button-outline-secondary-box-shadow: none; + --button-outline-secondary-opacity: 1; + + // button Outline-secondary , theme: Light, state: Hover + --button-outline-secondary-hover-background: transparent; + --button-outline-secondary-hover-padding-top: 13px; + --button-outline-secondary-hover-padding-right: 20px; + --button-outline-secondary-hover-padding-bottom: 13px; + --button-outline-secondary-hover-padding-left: 20px; + --button-outline-secondary-hover-border-width: 1px; + --button-outline-secondary-hover-border-radius: 4px; + --button-outline-secondary-hover-border-color: #3b2794; + --button-outline-secondary-hover-font-family: 'Inter'; + --button-outline-secondary-hover-font-size: 14px; + --button-outline-secondary-hover-font-weight: 600; + --button-outline-secondary-hover-line-height: 1.2857142639160157; + --button-outline-secondary-hover-letter-spacing: -0.28px; + --button-outline-secondary-hover-text-align: center; + --button-outline-secondary-hover-text-decoration: none; + --button-outline-secondary-hover-text-transform: none; + --button-outline-secondary-hover-color: #3b2794; + --button-outline-secondary-hover-box-shadow: none; + --button-outline-secondary-hover-opacity: 1; + + // button Outline-secondary , theme: Light, state: Disabled + --button-outline-secondary-disabled-background: #e5e5e5; + --button-outline-secondary-disabled-padding-top: 13px; + --button-outline-secondary-disabled-padding-right: 20px; + --button-outline-secondary-disabled-padding-bottom: 13px; + --button-outline-secondary-disabled-padding-left: 20px; + --button-outline-secondary-disabled-border-width: 1px; + --button-outline-secondary-disabled-border-radius: 4px; + --button-outline-secondary-disabled-border-color: transparent; + --button-outline-secondary-disabled-font-family: 'Inter'; + --button-outline-secondary-disabled-font-size: 14px; + --button-outline-secondary-disabled-font-weight: 600; + --button-outline-secondary-disabled-line-height: 1.2857142639160157; + --button-outline-secondary-disabled-letter-spacing: -0.28px; + --button-outline-secondary-disabled-text-align: center; + --button-outline-secondary-disabled-text-decoration: none; + --button-outline-secondary-disabled-text-transform: none; + --button-outline-secondary-disabled-color: #777777; + --button-outline-secondary-disabled-box-shadow: none; + --button-outline-secondary-disabled-opacity: 0.699999988079071; + + // button Danger , theme: Light, state: Default + --button-danger-background: #dc3545; + --button-danger-padding-top: 13px; + --button-danger-padding-right: 20px; + --button-danger-padding-bottom: 13px; + --button-danger-padding-left: 20px; + --button-danger-border-width: 1px; + --button-danger-border-radius: 4px; + --button-danger-border-color: transparent; + --button-danger-font-family: 'Inter'; + --button-danger-font-size: 14px; + --button-danger-font-weight: 600; + --button-danger-line-height: 1.2857142639160157; + --button-danger-letter-spacing: -0.28px; + --button-danger-text-align: center; + --button-danger-text-decoration: none; + --button-danger-text-transform: none; + --button-danger-color: #ffffff; + --button-danger-box-shadow: none; + --button-danger-opacity: 1; + + // button Danger , theme: Light, state: Hover + --button-danger-hover-background: #c32b3a; + --button-danger-hover-padding-top: 13px; + --button-danger-hover-padding-right: 20px; + --button-danger-hover-padding-bottom: 13px; + --button-danger-hover-padding-left: 20px; + --button-danger-hover-border-width: 1px; + --button-danger-hover-border-radius: 4px; + --button-danger-hover-border-color: transparent; + --button-danger-hover-font-family: 'Inter'; + --button-danger-hover-font-size: 14px; + --button-danger-hover-font-weight: 600; + --button-danger-hover-line-height: 1.2857142639160157; + --button-danger-hover-letter-spacing: -0.28px; + --button-danger-hover-text-align: center; + --button-danger-hover-text-decoration: none; + --button-danger-hover-text-transform: none; + --button-danger-hover-color: #ffffff; + --button-danger-hover-box-shadow: none; + --button-danger-hover-opacity: 1; + + // button Danger , theme: Light, state: Disabled + --button-danger-disabled-background: #e5e5e5; + --button-danger-disabled-padding-top: 13px; + --button-danger-disabled-padding-right: 20px; + --button-danger-disabled-padding-bottom: 13px; + --button-danger-disabled-padding-left: 20px; + --button-danger-disabled-border-width: 1px; + --button-danger-disabled-border-radius: 4px; + --button-danger-disabled-border-color: transparent; + --button-danger-disabled-font-family: 'Inter'; + --button-danger-disabled-font-size: 14px; + --button-danger-disabled-font-weight: 600; + --button-danger-disabled-line-height: 1.2857142639160157; + --button-danger-disabled-letter-spacing: -0.28px; + --button-danger-disabled-text-align: center; + --button-danger-disabled-text-decoration: none; + --button-danger-disabled-text-transform: none; + --button-danger-disabled-color: #777777; + --button-danger-disabled-box-shadow: none; + --button-danger-disabled-opacity: 0.699999988079071; + + // button Light , theme: Light, state: Default + --button-light-background: #dcedff; + --button-light-padding-top: 13px; + --button-light-padding-right: 20px; + --button-light-padding-bottom: 13px; + --button-light-padding-left: 20px; + --button-light-border-width: 1px; + --button-light-border-radius: 4px; + --button-light-border-color: transparent; + --button-light-font-family: 'Inter'; + --button-light-font-size: 14px; + --button-light-font-weight: 600; + --button-light-line-height: 1.2857142639160157; + --button-light-letter-spacing: -0.28px; + --button-light-text-align: center; + --button-light-text-decoration: none; + --button-light-text-transform: none; + --button-light-color: #000000; + --button-light-box-shadow: none; + --button-light-opacity: 1; + + // button Light , theme: Light, state: Hover + --button-light-hover-background: #c8e1fc; + --button-light-hover-padding-top: 13px; + --button-light-hover-padding-right: 20px; + --button-light-hover-padding-bottom: 13px; + --button-light-hover-padding-left: 20px; + --button-light-hover-border-width: 1px; + --button-light-hover-border-radius: 4px; + --button-light-hover-border-color: transparent; + --button-light-hover-font-family: 'Inter'; + --button-light-hover-font-size: 14px; + --button-light-hover-font-weight: 600; + --button-light-hover-line-height: 1.2857142639160157; + --button-light-hover-letter-spacing: -0.28px; + --button-light-hover-text-align: center; + --button-light-hover-text-decoration: none; + --button-light-hover-text-transform: none; + --button-light-hover-color: #0073e6; + --button-light-hover-box-shadow: none; + --button-light-hover-opacity: 1; + + // button Light , theme: Light, state: Disabled + --button-light-disabled-background: #e5e5e5; + --button-light-disabled-padding-top: 13px; + --button-light-disabled-padding-right: 20px; + --button-light-disabled-padding-bottom: 13px; + --button-light-disabled-padding-left: 20px; + --button-light-disabled-border-width: 1px; + --button-light-disabled-border-radius: 4px; + --button-light-disabled-border-color: transparent; + --button-light-disabled-font-family: 'Inter'; + --button-light-disabled-font-size: 14px; + --button-light-disabled-font-weight: 600; + --button-light-disabled-line-height: 1.2857142639160157; + --button-light-disabled-letter-spacing: -0.28px; + --button-light-disabled-text-align: center; + --button-light-disabled-text-decoration: none; + --button-light-disabled-text-transform: none; + --button-light-disabled-color: #777777; + --button-light-disabled-box-shadow: none; + --button-light-disabled-opacity: 0.699999988079071; + + // button Dark , theme: Light, state: Default + --button-dark-background: #191919; + --button-dark-padding-top: 13px; + --button-dark-padding-right: 20px; + --button-dark-padding-bottom: 13px; + --button-dark-padding-left: 20px; + --button-dark-border-width: 1px; + --button-dark-border-radius: 4px; + --button-dark-border-color: transparent; + --button-dark-font-family: 'Inter'; + --button-dark-font-size: 14px; + --button-dark-font-weight: 600; + --button-dark-line-height: 1.2857142639160157; + --button-dark-letter-spacing: -0.28px; + --button-dark-text-align: center; + --button-dark-text-decoration: none; + --button-dark-text-transform: none; + --button-dark-color: #ffffff; + --button-dark-box-shadow: none; + --button-dark-opacity: 1; + + // button Dark , theme: Light, state: Hover + --button-dark-hover-background: #000000; + --button-dark-hover-padding-top: 13px; + --button-dark-hover-padding-right: 20px; + --button-dark-hover-padding-bottom: 13px; + --button-dark-hover-padding-left: 20px; + --button-dark-hover-border-width: 1px; + --button-dark-hover-border-radius: 4px; + --button-dark-hover-border-color: transparent; + --button-dark-hover-font-family: 'Inter'; + --button-dark-hover-font-size: 14px; + --button-dark-hover-font-weight: 600; + --button-dark-hover-line-height: 1.2857142639160157; + --button-dark-hover-letter-spacing: -0.28px; + --button-dark-hover-text-align: center; + --button-dark-hover-text-decoration: none; + --button-dark-hover-text-transform: none; + --button-dark-hover-color: #ffffff; + --button-dark-hover-box-shadow: none; + --button-dark-hover-opacity: 1; + + // button Dark , theme: Light, state: Disabled + --button-dark-disabled-background: #e5e5e5; + --button-dark-disabled-padding-top: 13px; + --button-dark-disabled-padding-right: 20px; + --button-dark-disabled-padding-bottom: 13px; + --button-dark-disabled-padding-left: 20px; + --button-dark-disabled-border-width: 1px; + --button-dark-disabled-border-radius: 4px; + --button-dark-disabled-border-color: transparent; + --button-dark-disabled-font-family: 'Inter'; + --button-dark-disabled-font-size: 14px; + --button-dark-disabled-font-weight: 600; + --button-dark-disabled-line-height: 1.2857142639160157; + --button-dark-disabled-letter-spacing: -0.28px; + --button-dark-disabled-text-align: center; + --button-dark-disabled-text-decoration: none; + --button-dark-disabled-text-transform: none; + --button-dark-disabled-color: #777777; + --button-dark-disabled-box-shadow: none; + --button-dark-disabled-opacity: 0.699999988079071; + + // button Secondary , theme: Light, state: Default + --button-secondary-background: #2fa870; + --button-secondary-padding-top: 13px; + --button-secondary-padding-right: 20px; + --button-secondary-padding-bottom: 13px; + --button-secondary-padding-left: 20px; + --button-secondary-border-width: 1px; + --button-secondary-border-radius: 4px; + --button-secondary-border-color: transparent; + --button-secondary-font-family: 'Inter'; + --button-secondary-font-size: 14px; + --button-secondary-font-weight: 600; + --button-secondary-line-height: 1.2857142639160157; + --button-secondary-letter-spacing: -0.28px; + --button-secondary-text-align: center; + --button-secondary-text-decoration: none; + --button-secondary-text-transform: none; + --button-secondary-color: #ffffff; + --button-secondary-box-shadow: none; + --button-secondary-opacity: 1; + + // button Secondary , theme: Light, state: Hover + --button-secondary-hover-background: #3b2794; + --button-secondary-hover-padding-top: 13px; + --button-secondary-hover-padding-right: 20px; + --button-secondary-hover-padding-bottom: 13px; + --button-secondary-hover-padding-left: 20px; + --button-secondary-hover-border-width: 1px; + --button-secondary-hover-border-radius: 4px; + --button-secondary-hover-border-color: transparent; + --button-secondary-hover-font-family: 'Inter'; + --button-secondary-hover-font-size: 14px; + --button-secondary-hover-font-weight: 600; + --button-secondary-hover-line-height: 1.2857142639160157; + --button-secondary-hover-letter-spacing: -0.28px; + --button-secondary-hover-text-align: center; + --button-secondary-hover-text-decoration: none; + --button-secondary-hover-text-transform: none; + --button-secondary-hover-color: #ffffff; + --button-secondary-hover-box-shadow: none; + --button-secondary-hover-opacity: 1; + + // button Secondary , theme: Light, state: Disabled + --button-secondary-disabled-background: #e5e5e5; + --button-secondary-disabled-padding-top: 13px; + --button-secondary-disabled-padding-right: 20px; + --button-secondary-disabled-padding-bottom: 13px; + --button-secondary-disabled-padding-left: 20px; + --button-secondary-disabled-border-width: 1px; + --button-secondary-disabled-border-radius: 4px; + --button-secondary-disabled-border-color: transparent; + --button-secondary-disabled-font-family: 'Inter'; + --button-secondary-disabled-font-size: 14px; + --button-secondary-disabled-font-weight: 600; + --button-secondary-disabled-line-height: 1.2857142639160157; + --button-secondary-disabled-letter-spacing: -0.28px; + --button-secondary-disabled-text-align: center; + --button-secondary-disabled-text-decoration: none; + --button-secondary-disabled-text-transform: none; + --button-secondary-disabled-color: #777777; + --button-secondary-disabled-box-shadow: none; + --button-secondary-disabled-opacity: 0.699999988079071; + + // button Small falsefalse + --button-small-background: #000000; + --button-small-padding-top: 12px; + --button-small-padding-right: 16px; + --button-small-padding-bottom: 12px; + --button-small-padding-left: 16px; + --button-small-border-width: 1px; + --button-small-border-radius: 4px; + --button-small-border-color: transparent; + --button-small-font-family: 'Inter'; + --button-small-font-size: 12px; + --button-small-font-weight: 600; + --button-small-line-height: 1.3333332824707032; + --button-small-letter-spacing: -0.24px; + --button-small-text-align: center; + --button-small-text-decoration: none; + --button-small-text-transform: none; + --button-small-color: #ffffff; + --button-small-box-shadow: none; + --button-small-opacity: 1; + + // button Medium falsefalse + --button-medium-background: #000000; + --button-medium-padding-top: 13px; + --button-medium-padding-right: 20px; + --button-medium-padding-bottom: 13px; + --button-medium-padding-left: 20px; + --button-medium-border-width: 1px; + --button-medium-border-radius: 4px; + --button-medium-border-color: transparent; + --button-medium-font-family: 'Inter'; + --button-medium-font-size: 14px; + --button-medium-font-weight: 600; + --button-medium-line-height: 1.2857142639160157; + --button-medium-letter-spacing: -0.28px; + --button-medium-text-align: center; + --button-medium-text-decoration: none; + --button-medium-text-transform: none; + --button-medium-color: #ffffff; + --button-medium-box-shadow: none; + --button-medium-opacity: 1; + + // button Large falsefalse + --button-large-background: #000000; + --button-large-padding-top: 14px; + --button-large-padding-right: 20px; + --button-large-padding-bottom: 14px; + --button-large-padding-left: 20px; + --button-large-border-width: 1px; + --button-large-border-radius: 4px; + --button-large-border-color: transparent; + --button-large-font-family: 'Inter'; + --button-large-font-size: 16px; + --button-large-font-weight: 600; + --button-large-line-height: 1.25; + --button-large-letter-spacing: -0.32px; + --button-large-text-align: center; + --button-large-text-decoration: none; + --button-large-text-transform: none; + --button-large-color: #ffffff; + --button-large-box-shadow: none; + --button-large-opacity: 1; +} \ No newline at end of file diff --git a/sass/project/default_vars/buttons_vars.scss b/sass/project/default_vars/buttons_vars.scss new file mode 100644 index 00000000..51a2e223 --- /dev/null +++ b/sass/project/default_vars/buttons_vars.scss @@ -0,0 +1,944 @@ +// Primary button, theme: Dark, state: Default +$button-primary-dark-background: #0073e6; +$button-primary-dark-padding-top: 13px; +$button-primary-dark-padding-right: 20px; +$button-primary-dark-padding-bottom: 13px; +$button-primary-dark-padding-left: 20px; +$button-primary-dark-border-width: 1px; +$button-primary-dark-border-radius: 4px; +$button-primary-dark-border-color: transparent; +$button-primary-dark-font-family: 'Inter'; +$button-primary-dark-font-size: 14px; +$button-primary-dark-font-weight: 600; +$button-primary-dark-line-height: 1.2857142639160157; +$button-primary-dark-letter-spacing: -0.28px; +$button-primary-dark-text-align: center; +$button-primary-dark-text-decoration: none; +$button-primary-dark-text-transform: none; +$button-primary-dark-color: #ffffff; +$button-primary-dark-box-shadow: none; +$button-primary-dark-opacity: 1; + +// Primary button, theme: Dark, state: Hover +$button-primary-dark-hover-background: #258cf2; +$button-primary-dark-hover-padding-top: 13px; +$button-primary-dark-hover-padding-right: 20px; +$button-primary-dark-hover-padding-bottom: 13px; +$button-primary-dark-hover-padding-left: 20px; +$button-primary-dark-hover-border-width: 1px; +$button-primary-dark-hover-border-radius: 4px; +$button-primary-dark-hover-border-color: transparent; +$button-primary-dark-hover-font-family: 'Inter'; +$button-primary-dark-hover-font-size: 14px; +$button-primary-dark-hover-font-weight: 600; +$button-primary-dark-hover-line-height: 1.2857142639160157; +$button-primary-dark-hover-letter-spacing: -0.28px; +$button-primary-dark-hover-text-align: center; +$button-primary-dark-hover-text-decoration: none; +$button-primary-dark-hover-text-transform: none; +$button-primary-dark-hover-color: #ffffff; +$button-primary-dark-hover-box-shadow: none; +$button-primary-dark-hover-opacity: 1; + +// Primary button, theme: Dark, state: Disabled +$button-primary-dark-disabled-background: #333333; +$button-primary-dark-disabled-padding-top: 13px; +$button-primary-dark-disabled-padding-right: 20px; +$button-primary-dark-disabled-padding-bottom: 13px; +$button-primary-dark-disabled-padding-left: 20px; +$button-primary-dark-disabled-border-width: 1px; +$button-primary-dark-disabled-border-radius: 4px; +$button-primary-dark-disabled-border-color: transparent; +$button-primary-dark-disabled-font-family: 'Inter'; +$button-primary-dark-disabled-font-size: 14px; +$button-primary-dark-disabled-font-weight: 600; +$button-primary-dark-disabled-line-height: 1.2857142639160157; +$button-primary-dark-disabled-letter-spacing: -0.28px; +$button-primary-dark-disabled-text-align: center; +$button-primary-dark-disabled-text-decoration: none; +$button-primary-dark-disabled-text-transform: none; +$button-primary-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$button-primary-dark-disabled-box-shadow: none; +$button-primary-dark-disabled-opacity: 0.699999988079071; + +// Custom-type button, theme: Dark, state: Default +$button-custom-type-dark-background: #ffc107; +$button-custom-type-dark-padding-top: 13px; +$button-custom-type-dark-padding-right: 20px; +$button-custom-type-dark-padding-bottom: 13px; +$button-custom-type-dark-padding-left: 20px; +$button-custom-type-dark-border-width: 1px; +$button-custom-type-dark-border-radius: 4px; +$button-custom-type-dark-border-color: transparent; +$button-custom-type-dark-font-family: 'Inter'; +$button-custom-type-dark-font-size: 14px; +$button-custom-type-dark-font-weight: 600; +$button-custom-type-dark-line-height: 1.2857142639160157; +$button-custom-type-dark-letter-spacing: -0.28px; +$button-custom-type-dark-text-align: center; +$button-custom-type-dark-text-decoration: none; +$button-custom-type-dark-text-transform: none; +$button-custom-type-dark-color: #333333; +$button-custom-type-dark-box-shadow: none; +$button-custom-type-dark-opacity: 1; + +// Custom-type button, theme: Dark, state: Hover +$button-custom-type-dark-hover-background: #e0aa09, rgba(0, 0, 0, 0.20000000298023224), rgba(0, 0, 0, 0.20000000298023224), rgba(0, 0, 0, 0.20000000298023224); +$button-custom-type-dark-hover-padding-top: 13px; +$button-custom-type-dark-hover-padding-right: 20px; +$button-custom-type-dark-hover-padding-bottom: 13px; +$button-custom-type-dark-hover-padding-left: 20px; +$button-custom-type-dark-hover-border-width: 1px; +$button-custom-type-dark-hover-border-radius: 4px; +$button-custom-type-dark-hover-border-color: #c32b3a; +$button-custom-type-dark-hover-font-family: 'Inter'; +$button-custom-type-dark-hover-font-size: 14px; +$button-custom-type-dark-hover-font-weight: 600; +$button-custom-type-dark-hover-line-height: 1.2857142639160157; +$button-custom-type-dark-hover-letter-spacing: -0.28px; +$button-custom-type-dark-hover-text-align: center; +$button-custom-type-dark-hover-text-decoration: none; +$button-custom-type-dark-hover-text-transform: none; +$button-custom-type-dark-hover-color: #c32b3a; +$button-custom-type-dark-hover-box-shadow: none; +$button-custom-type-dark-hover-opacity: 1; + +// Custom-type button, theme: Dark, state: Disabled +$button-custom-type-dark-disabled-background: #333333; +$button-custom-type-dark-disabled-padding-top: 13px; +$button-custom-type-dark-disabled-padding-right: 20px; +$button-custom-type-dark-disabled-padding-bottom: 13px; +$button-custom-type-dark-disabled-padding-left: 20px; +$button-custom-type-dark-disabled-border-width: 1px; +$button-custom-type-dark-disabled-border-radius: 4px; +$button-custom-type-dark-disabled-border-color: transparent; +$button-custom-type-dark-disabled-font-family: 'Inter'; +$button-custom-type-dark-disabled-font-size: 14px; +$button-custom-type-dark-disabled-font-weight: 600; +$button-custom-type-dark-disabled-line-height: 1.2857142639160157; +$button-custom-type-dark-disabled-letter-spacing: -0.28px; +$button-custom-type-dark-disabled-text-align: center; +$button-custom-type-dark-disabled-text-decoration: none; +$button-custom-type-dark-disabled-text-transform: none; +$button-custom-type-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$button-custom-type-dark-disabled-box-shadow: none; +$button-custom-type-dark-disabled-opacity: 0.699999988079071; + +// Outline-secondary button, theme: Dark, state: Default +$button-outline-secondary-dark-background: transparent; +$button-outline-secondary-dark-padding-top: 13px; +$button-outline-secondary-dark-padding-right: 20px; +$button-outline-secondary-dark-padding-bottom: 13px; +$button-outline-secondary-dark-padding-left: 20px; +$button-outline-secondary-dark-border-width: 1px; +$button-outline-secondary-dark-border-radius: 4px; +$button-outline-secondary-dark-border-color: #4c34b6; +$button-outline-secondary-dark-font-family: 'Inter'; +$button-outline-secondary-dark-font-size: 14px; +$button-outline-secondary-dark-font-weight: 600; +$button-outline-secondary-dark-line-height: 1.2857142639160157; +$button-outline-secondary-dark-letter-spacing: -0.28px; +$button-outline-secondary-dark-text-align: center; +$button-outline-secondary-dark-text-decoration: none; +$button-outline-secondary-dark-text-transform: none; +$button-outline-secondary-dark-color: #4c34b6; +$button-outline-secondary-dark-box-shadow: none; +$button-outline-secondary-dark-opacity: 1; + +// Outline-secondary button, theme: Dark, state: Hover +$button-outline-secondary-dark-hover-background: transparent; +$button-outline-secondary-dark-hover-padding-top: 13px; +$button-outline-secondary-dark-hover-padding-right: 20px; +$button-outline-secondary-dark-hover-padding-bottom: 13px; +$button-outline-secondary-dark-hover-padding-left: 20px; +$button-outline-secondary-dark-hover-border-width: 1px; +$button-outline-secondary-dark-hover-border-radius: 4px; +$button-outline-secondary-dark-hover-border-color: #7158dd; +$button-outline-secondary-dark-hover-font-family: 'Inter'; +$button-outline-secondary-dark-hover-font-size: 14px; +$button-outline-secondary-dark-hover-font-weight: 600; +$button-outline-secondary-dark-hover-line-height: 1.2857142639160157; +$button-outline-secondary-dark-hover-letter-spacing: -0.28px; +$button-outline-secondary-dark-hover-text-align: center; +$button-outline-secondary-dark-hover-text-decoration: none; +$button-outline-secondary-dark-hover-text-transform: none; +$button-outline-secondary-dark-hover-color: #7158dd; +$button-outline-secondary-dark-hover-box-shadow: none; +$button-outline-secondary-dark-hover-opacity: 1; + +// Outline-secondary button, theme: Dark, state: Disabled +$button-outline-secondary-dark-disabled-background: #333333; +$button-outline-secondary-dark-disabled-padding-top: 13px; +$button-outline-secondary-dark-disabled-padding-right: 20px; +$button-outline-secondary-dark-disabled-padding-bottom: 13px; +$button-outline-secondary-dark-disabled-padding-left: 20px; +$button-outline-secondary-dark-disabled-border-width: 1px; +$button-outline-secondary-dark-disabled-border-radius: 4px; +$button-outline-secondary-dark-disabled-border-color: transparent; +$button-outline-secondary-dark-disabled-font-family: 'Inter'; +$button-outline-secondary-dark-disabled-font-size: 14px; +$button-outline-secondary-dark-disabled-font-weight: 600; +$button-outline-secondary-dark-disabled-line-height: 1.2857142639160157; +$button-outline-secondary-dark-disabled-letter-spacing: -0.28px; +$button-outline-secondary-dark-disabled-text-align: center; +$button-outline-secondary-dark-disabled-text-decoration: none; +$button-outline-secondary-dark-disabled-text-transform: none; +$button-outline-secondary-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$button-outline-secondary-dark-disabled-box-shadow: none; +$button-outline-secondary-dark-disabled-opacity: 0.699999988079071; + +// Danger button, theme: Dark, state: Default +$button-danger-dark-background: #dc3545; +$button-danger-dark-padding-top: 13px; +$button-danger-dark-padding-right: 20px; +$button-danger-dark-padding-bottom: 13px; +$button-danger-dark-padding-left: 20px; +$button-danger-dark-border-width: 1px; +$button-danger-dark-border-radius: 4px; +$button-danger-dark-border-color: transparent; +$button-danger-dark-font-family: 'Inter'; +$button-danger-dark-font-size: 14px; +$button-danger-dark-font-weight: 600; +$button-danger-dark-line-height: 1.2857142639160157; +$button-danger-dark-letter-spacing: -0.28px; +$button-danger-dark-text-align: center; +$button-danger-dark-text-decoration: none; +$button-danger-dark-text-transform: none; +$button-danger-dark-color: #ffffff; +$button-danger-dark-box-shadow: none; +$button-danger-dark-opacity: 1; + +// Danger button, theme: Dark, state: Hover +$button-danger-dark-hover-background: #f35d6c; +$button-danger-dark-hover-padding-top: 13px; +$button-danger-dark-hover-padding-right: 20px; +$button-danger-dark-hover-padding-bottom: 13px; +$button-danger-dark-hover-padding-left: 20px; +$button-danger-dark-hover-border-width: 1px; +$button-danger-dark-hover-border-radius: 4px; +$button-danger-dark-hover-border-color: transparent; +$button-danger-dark-hover-font-family: 'Inter'; +$button-danger-dark-hover-font-size: 14px; +$button-danger-dark-hover-font-weight: 600; +$button-danger-dark-hover-line-height: 1.2857142639160157; +$button-danger-dark-hover-letter-spacing: -0.28px; +$button-danger-dark-hover-text-align: center; +$button-danger-dark-hover-text-decoration: none; +$button-danger-dark-hover-text-transform: none; +$button-danger-dark-hover-color: #ffffff; +$button-danger-dark-hover-box-shadow: none; +$button-danger-dark-hover-opacity: 1; + +// Danger button, theme: Dark, state: Disabled +$button-danger-dark-disabled-background: #333333; +$button-danger-dark-disabled-padding-top: 13px; +$button-danger-dark-disabled-padding-right: 20px; +$button-danger-dark-disabled-padding-bottom: 13px; +$button-danger-dark-disabled-padding-left: 20px; +$button-danger-dark-disabled-border-width: 1px; +$button-danger-dark-disabled-border-radius: 4px; +$button-danger-dark-disabled-border-color: transparent; +$button-danger-dark-disabled-font-family: 'Inter'; +$button-danger-dark-disabled-font-size: 14px; +$button-danger-dark-disabled-font-weight: 600; +$button-danger-dark-disabled-line-height: 1.2857142639160157; +$button-danger-dark-disabled-letter-spacing: -0.28px; +$button-danger-dark-disabled-text-align: center; +$button-danger-dark-disabled-text-decoration: none; +$button-danger-dark-disabled-text-transform: none; +$button-danger-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$button-danger-dark-disabled-box-shadow: none; +$button-danger-dark-disabled-opacity: 0.699999988079071; + +// Light button, theme: Dark, state: Default +$button-light-dark-background: #ffffff; +$button-light-dark-padding-top: 13px; +$button-light-dark-padding-right: 20px; +$button-light-dark-padding-bottom: 13px; +$button-light-dark-padding-left: 20px; +$button-light-dark-border-width: 1px; +$button-light-dark-border-radius: 4px; +$button-light-dark-border-color: transparent; +$button-light-dark-font-family: 'Inter'; +$button-light-dark-font-size: 14px; +$button-light-dark-font-weight: 600; +$button-light-dark-line-height: 1.2857142639160157; +$button-light-dark-letter-spacing: -0.28px; +$button-light-dark-text-align: center; +$button-light-dark-text-decoration: none; +$button-light-dark-text-transform: none; +$button-light-dark-color: #000000; +$button-light-dark-box-shadow: none; +$button-light-dark-opacity: 1; + +// Light button, theme: Dark, state: Hover +$button-light-dark-hover-background: #ffffff; +$button-light-dark-hover-padding-top: 13px; +$button-light-dark-hover-padding-right: 20px; +$button-light-dark-hover-padding-bottom: 13px; +$button-light-dark-hover-padding-left: 20px; +$button-light-dark-hover-border-width: 1px; +$button-light-dark-hover-border-radius: 4px; +$button-light-dark-hover-border-color: transparent; +$button-light-dark-hover-font-family: 'Inter'; +$button-light-dark-hover-font-size: 14px; +$button-light-dark-hover-font-weight: 600; +$button-light-dark-hover-line-height: 1.2857142639160157; +$button-light-dark-hover-letter-spacing: -0.28px; +$button-light-dark-hover-text-align: center; +$button-light-dark-hover-text-decoration: none; +$button-light-dark-hover-text-transform: none; +$button-light-dark-hover-color: #0073e6; +$button-light-dark-hover-box-shadow: none; +$button-light-dark-hover-opacity: 1; + +// Light button, theme: Dark, state: Disabled +$button-light-dark-disabled-background: #333333; +$button-light-dark-disabled-padding-top: 13px; +$button-light-dark-disabled-padding-right: 20px; +$button-light-dark-disabled-padding-bottom: 13px; +$button-light-dark-disabled-padding-left: 20px; +$button-light-dark-disabled-border-width: 1px; +$button-light-dark-disabled-border-radius: 4px; +$button-light-dark-disabled-border-color: transparent; +$button-light-dark-disabled-font-family: 'Inter'; +$button-light-dark-disabled-font-size: 14px; +$button-light-dark-disabled-font-weight: 600; +$button-light-dark-disabled-line-height: 1.2857142639160157; +$button-light-dark-disabled-letter-spacing: -0.28px; +$button-light-dark-disabled-text-align: center; +$button-light-dark-disabled-text-decoration: none; +$button-light-dark-disabled-text-transform: none; +$button-light-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$button-light-dark-disabled-box-shadow: none; +$button-light-dark-disabled-opacity: 0.699999988079071; + +// Dark button, theme: Dark, state: Default +$button-dark-dark-background: #333333; +$button-dark-dark-padding-top: 13px; +$button-dark-dark-padding-right: 20px; +$button-dark-dark-padding-bottom: 13px; +$button-dark-dark-padding-left: 20px; +$button-dark-dark-border-width: 1px; +$button-dark-dark-border-radius: 4px; +$button-dark-dark-border-color: transparent; +$button-dark-dark-font-family: 'Inter'; +$button-dark-dark-font-size: 14px; +$button-dark-dark-font-weight: 600; +$button-dark-dark-line-height: 1.2857142639160157; +$button-dark-dark-letter-spacing: -0.28px; +$button-dark-dark-text-align: center; +$button-dark-dark-text-decoration: none; +$button-dark-dark-text-transform: none; +$button-dark-dark-color: #ffffff; +$button-dark-dark-box-shadow: none; +$button-dark-dark-opacity: 1; + +// Dark button, theme: Dark, state: Hover +$button-dark-dark-hover-background: #0f69c1; +$button-dark-dark-hover-padding-top: 13px; +$button-dark-dark-hover-padding-right: 20px; +$button-dark-dark-hover-padding-bottom: 13px; +$button-dark-dark-hover-padding-left: 20px; +$button-dark-dark-hover-border-width: 1px; +$button-dark-dark-hover-border-radius: 4px; +$button-dark-dark-hover-border-color: transparent; +$button-dark-dark-hover-font-family: 'Inter'; +$button-dark-dark-hover-font-size: 14px; +$button-dark-dark-hover-font-weight: 600; +$button-dark-dark-hover-line-height: 1.2857142639160157; +$button-dark-dark-hover-letter-spacing: -0.28px; +$button-dark-dark-hover-text-align: center; +$button-dark-dark-hover-text-decoration: none; +$button-dark-dark-hover-text-transform: none; +$button-dark-dark-hover-color: #ffffff; +$button-dark-dark-hover-box-shadow: none; +$button-dark-dark-hover-opacity: 1; + +// Dark button, theme: Dark, state: Disabled +$button-dark-dark-disabled-background: #333333; +$button-dark-dark-disabled-padding-top: 13px; +$button-dark-dark-disabled-padding-right: 20px; +$button-dark-dark-disabled-padding-bottom: 13px; +$button-dark-dark-disabled-padding-left: 20px; +$button-dark-dark-disabled-border-width: 1px; +$button-dark-dark-disabled-border-radius: 4px; +$button-dark-dark-disabled-border-color: transparent; +$button-dark-dark-disabled-font-family: 'Inter'; +$button-dark-dark-disabled-font-size: 14px; +$button-dark-dark-disabled-font-weight: 600; +$button-dark-dark-disabled-line-height: 1.2857142639160157; +$button-dark-dark-disabled-letter-spacing: -0.28px; +$button-dark-dark-disabled-text-align: center; +$button-dark-dark-disabled-text-decoration: none; +$button-dark-dark-disabled-text-transform: none; +$button-dark-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$button-dark-dark-disabled-box-shadow: none; +$button-dark-dark-disabled-opacity: 0.699999988079071; + +// Secondary button, theme: Dark, state: Default +$button-secondary-dark-background: #4c34b6; +$button-secondary-dark-padding-top: 13px; +$button-secondary-dark-padding-right: 20px; +$button-secondary-dark-padding-bottom: 13px; +$button-secondary-dark-padding-left: 20px; +$button-secondary-dark-border-width: 1px; +$button-secondary-dark-border-radius: 4px; +$button-secondary-dark-border-color: transparent; +$button-secondary-dark-font-family: 'Inter'; +$button-secondary-dark-font-size: 14px; +$button-secondary-dark-font-weight: 600; +$button-secondary-dark-line-height: 1.2857142639160157; +$button-secondary-dark-letter-spacing: -0.28px; +$button-secondary-dark-text-align: center; +$button-secondary-dark-text-decoration: none; +$button-secondary-dark-text-transform: none; +$button-secondary-dark-color: #ffffff; +$button-secondary-dark-box-shadow: none; +$button-secondary-dark-opacity: 1; + +// Secondary button, theme: Dark, state: Hover +$button-secondary-dark-hover-background: #7158dd; +$button-secondary-dark-hover-padding-top: 13px; +$button-secondary-dark-hover-padding-right: 20px; +$button-secondary-dark-hover-padding-bottom: 13px; +$button-secondary-dark-hover-padding-left: 20px; +$button-secondary-dark-hover-border-width: 1px; +$button-secondary-dark-hover-border-radius: 4px; +$button-secondary-dark-hover-border-color: transparent; +$button-secondary-dark-hover-font-family: 'Inter'; +$button-secondary-dark-hover-font-size: 14px; +$button-secondary-dark-hover-font-weight: 600; +$button-secondary-dark-hover-line-height: 1.2857142639160157; +$button-secondary-dark-hover-letter-spacing: -0.28px; +$button-secondary-dark-hover-text-align: center; +$button-secondary-dark-hover-text-decoration: none; +$button-secondary-dark-hover-text-transform: none; +$button-secondary-dark-hover-color: #ffffff; +$button-secondary-dark-hover-box-shadow: none; +$button-secondary-dark-hover-opacity: 1; + +// Secondary button, theme: Dark, state: Disabled +$button-secondary-dark-disabled-background: #333333; +$button-secondary-dark-disabled-padding-top: 13px; +$button-secondary-dark-disabled-padding-right: 20px; +$button-secondary-dark-disabled-padding-bottom: 13px; +$button-secondary-dark-disabled-padding-left: 20px; +$button-secondary-dark-disabled-border-width: 1px; +$button-secondary-dark-disabled-border-radius: 4px; +$button-secondary-dark-disabled-border-color: transparent; +$button-secondary-dark-disabled-font-family: 'Inter'; +$button-secondary-dark-disabled-font-size: 14px; +$button-secondary-dark-disabled-font-weight: 600; +$button-secondary-dark-disabled-line-height: 1.2857142639160157; +$button-secondary-dark-disabled-letter-spacing: -0.28px; +$button-secondary-dark-disabled-text-align: center; +$button-secondary-dark-disabled-text-decoration: none; +$button-secondary-dark-disabled-text-transform: none; +$button-secondary-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$button-secondary-dark-disabled-box-shadow: none; +$button-secondary-dark-disabled-opacity: 0.699999988079071; + +// Primary button, theme: Light, state: Default +$button-primary-background: #0073e6; +$button-primary-padding-top: 13px; +$button-primary-padding-right: 20px; +$button-primary-padding-bottom: 13px; +$button-primary-padding-left: 20px; +$button-primary-border-width: 1px; +$button-primary-border-radius: 4px; +$button-primary-border-color: transparent; +$button-primary-font-family: 'Inter'; +$button-primary-font-size: 14px; +$button-primary-font-weight: 600; +$button-primary-line-height: 1.2857142639160157; +$button-primary-letter-spacing: -0.28px; +$button-primary-text-align: center; +$button-primary-text-decoration: none; +$button-primary-text-transform: none; +$button-primary-color: #ffffff; +$button-primary-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$button-primary-opacity: 1; + +// Primary button, theme: Light, state: Hover +$button-primary-hover-background: #0f69c1; +$button-primary-hover-padding-top: 13px; +$button-primary-hover-padding-right: 20px; +$button-primary-hover-padding-bottom: 13px; +$button-primary-hover-padding-left: 20px; +$button-primary-hover-border-width: 1px; +$button-primary-hover-border-radius: 4px; +$button-primary-hover-border-color: transparent; +$button-primary-hover-font-family: 'Inter'; +$button-primary-hover-font-size: 14px; +$button-primary-hover-font-weight: 600; +$button-primary-hover-line-height: 1.2857142639160157; +$button-primary-hover-letter-spacing: -0.28px; +$button-primary-hover-text-align: center; +$button-primary-hover-text-decoration: none; +$button-primary-hover-text-transform: none; +$button-primary-hover-color: #ffffff; +$button-primary-hover-box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.20000000298023224); +$button-primary-hover-opacity: 1; + +// Primary button, theme: Light, state: Disabled +$button-primary-disabled-background: #e5e5e5; +$button-primary-disabled-padding-top: 13px; +$button-primary-disabled-padding-right: 20px; +$button-primary-disabled-padding-bottom: 13px; +$button-primary-disabled-padding-left: 20px; +$button-primary-disabled-border-width: 1px; +$button-primary-disabled-border-radius: 4px; +$button-primary-disabled-border-color: transparent; +$button-primary-disabled-font-family: 'Inter'; +$button-primary-disabled-font-size: 14px; +$button-primary-disabled-font-weight: 600; +$button-primary-disabled-line-height: 1.2857142639160157; +$button-primary-disabled-letter-spacing: -0.28px; +$button-primary-disabled-text-align: center; +$button-primary-disabled-text-decoration: none; +$button-primary-disabled-text-transform: none; +$button-primary-disabled-color: #777777; +$button-primary-disabled-box-shadow: none; +$button-primary-disabled-opacity: 0.699999988079071; + +// Custom-type button, theme: Light, state: Default +$button-custom-type-background: #ffc107; +$button-custom-type-padding-top: 13px; +$button-custom-type-padding-right: 20px; +$button-custom-type-padding-bottom: 13px; +$button-custom-type-padding-left: 20px; +$button-custom-type-border-width: 1px; +$button-custom-type-border-radius: 4px; +$button-custom-type-border-color: transparent; +$button-custom-type-font-family: 'Inter'; +$button-custom-type-font-size: 14px; +$button-custom-type-font-weight: 600; +$button-custom-type-line-height: 1.2857142639160157; +$button-custom-type-letter-spacing: -0.28px; +$button-custom-type-text-align: center; +$button-custom-type-text-decoration: none; +$button-custom-type-text-transform: none; +$button-custom-type-color: #333333; +$button-custom-type-box-shadow: none; +$button-custom-type-opacity: 1; + +// Custom-type button, theme: Light, state: Hover +$button-custom-type-hover-background: #e5ae06; +$button-custom-type-hover-padding-top: 13px; +$button-custom-type-hover-padding-right: 20px; +$button-custom-type-hover-padding-bottom: 13px; +$button-custom-type-hover-padding-left: 20px; +$button-custom-type-hover-border-width: 1px; +$button-custom-type-hover-border-radius: 4px; +$button-custom-type-hover-border-color: #c32b3a; +$button-custom-type-hover-font-family: 'Inter'; +$button-custom-type-hover-font-size: 14px; +$button-custom-type-hover-font-weight: 600; +$button-custom-type-hover-line-height: 1.2857142639160157; +$button-custom-type-hover-letter-spacing: -0.28px; +$button-custom-type-hover-text-align: center; +$button-custom-type-hover-text-decoration: none; +$button-custom-type-hover-text-transform: none; +$button-custom-type-hover-color: #c32b3a; +$button-custom-type-hover-box-shadow: none; +$button-custom-type-hover-opacity: 1; + +// Custom-type button, theme: Light, state: Disabled +$button-custom-type-disabled-background: #e5e5e5; +$button-custom-type-disabled-padding-top: 13px; +$button-custom-type-disabled-padding-right: 20px; +$button-custom-type-disabled-padding-bottom: 13px; +$button-custom-type-disabled-padding-left: 20px; +$button-custom-type-disabled-border-width: 1px; +$button-custom-type-disabled-border-radius: 4px; +$button-custom-type-disabled-border-color: transparent; +$button-custom-type-disabled-font-family: 'Inter'; +$button-custom-type-disabled-font-size: 14px; +$button-custom-type-disabled-font-weight: 600; +$button-custom-type-disabled-line-height: 1.2857142639160157; +$button-custom-type-disabled-letter-spacing: -0.28px; +$button-custom-type-disabled-text-align: center; +$button-custom-type-disabled-text-decoration: none; +$button-custom-type-disabled-text-transform: none; +$button-custom-type-disabled-color: #777777; +$button-custom-type-disabled-box-shadow: none; +$button-custom-type-disabled-opacity: 0.699999988079071; + +// Outline-secondary button, theme: Light, state: Default +$button-outline-secondary-background: transparent; +$button-outline-secondary-padding-top: 13px; +$button-outline-secondary-padding-right: 20px; +$button-outline-secondary-padding-bottom: 13px; +$button-outline-secondary-padding-left: 20px; +$button-outline-secondary-border-width: 1px; +$button-outline-secondary-border-radius: 4px; +$button-outline-secondary-border-color: #4c34b6; +$button-outline-secondary-font-family: 'Inter'; +$button-outline-secondary-font-size: 14px; +$button-outline-secondary-font-weight: 600; +$button-outline-secondary-line-height: 1.2857142639160157; +$button-outline-secondary-letter-spacing: -0.28px; +$button-outline-secondary-text-align: center; +$button-outline-secondary-text-decoration: none; +$button-outline-secondary-text-transform: none; +$button-outline-secondary-color: #4c34b6; +$button-outline-secondary-box-shadow: none; +$button-outline-secondary-opacity: 1; + +// Outline-secondary button, theme: Light, state: Hover +$button-outline-secondary-hover-background: transparent; +$button-outline-secondary-hover-padding-top: 13px; +$button-outline-secondary-hover-padding-right: 20px; +$button-outline-secondary-hover-padding-bottom: 13px; +$button-outline-secondary-hover-padding-left: 20px; +$button-outline-secondary-hover-border-width: 1px; +$button-outline-secondary-hover-border-radius: 4px; +$button-outline-secondary-hover-border-color: #3b2794; +$button-outline-secondary-hover-font-family: 'Inter'; +$button-outline-secondary-hover-font-size: 14px; +$button-outline-secondary-hover-font-weight: 600; +$button-outline-secondary-hover-line-height: 1.2857142639160157; +$button-outline-secondary-hover-letter-spacing: -0.28px; +$button-outline-secondary-hover-text-align: center; +$button-outline-secondary-hover-text-decoration: none; +$button-outline-secondary-hover-text-transform: none; +$button-outline-secondary-hover-color: #3b2794; +$button-outline-secondary-hover-box-shadow: none; +$button-outline-secondary-hover-opacity: 1; + +// Outline-secondary button, theme: Light, state: Disabled +$button-outline-secondary-disabled-background: #e5e5e5; +$button-outline-secondary-disabled-padding-top: 13px; +$button-outline-secondary-disabled-padding-right: 20px; +$button-outline-secondary-disabled-padding-bottom: 13px; +$button-outline-secondary-disabled-padding-left: 20px; +$button-outline-secondary-disabled-border-width: 1px; +$button-outline-secondary-disabled-border-radius: 4px; +$button-outline-secondary-disabled-border-color: transparent; +$button-outline-secondary-disabled-font-family: 'Inter'; +$button-outline-secondary-disabled-font-size: 14px; +$button-outline-secondary-disabled-font-weight: 600; +$button-outline-secondary-disabled-line-height: 1.2857142639160157; +$button-outline-secondary-disabled-letter-spacing: -0.28px; +$button-outline-secondary-disabled-text-align: center; +$button-outline-secondary-disabled-text-decoration: none; +$button-outline-secondary-disabled-text-transform: none; +$button-outline-secondary-disabled-color: #777777; +$button-outline-secondary-disabled-box-shadow: none; +$button-outline-secondary-disabled-opacity: 0.699999988079071; + +// Danger button, theme: Light, state: Default +$button-danger-background: #dc3545; +$button-danger-padding-top: 13px; +$button-danger-padding-right: 20px; +$button-danger-padding-bottom: 13px; +$button-danger-padding-left: 20px; +$button-danger-border-width: 1px; +$button-danger-border-radius: 4px; +$button-danger-border-color: transparent; +$button-danger-font-family: 'Inter'; +$button-danger-font-size: 14px; +$button-danger-font-weight: 600; +$button-danger-line-height: 1.2857142639160157; +$button-danger-letter-spacing: -0.28px; +$button-danger-text-align: center; +$button-danger-text-decoration: none; +$button-danger-text-transform: none; +$button-danger-color: #ffffff; +$button-danger-box-shadow: none; +$button-danger-opacity: 1; + +// Danger button, theme: Light, state: Hover +$button-danger-hover-background: #c32b3a; +$button-danger-hover-padding-top: 13px; +$button-danger-hover-padding-right: 20px; +$button-danger-hover-padding-bottom: 13px; +$button-danger-hover-padding-left: 20px; +$button-danger-hover-border-width: 1px; +$button-danger-hover-border-radius: 4px; +$button-danger-hover-border-color: transparent; +$button-danger-hover-font-family: 'Inter'; +$button-danger-hover-font-size: 14px; +$button-danger-hover-font-weight: 600; +$button-danger-hover-line-height: 1.2857142639160157; +$button-danger-hover-letter-spacing: -0.28px; +$button-danger-hover-text-align: center; +$button-danger-hover-text-decoration: none; +$button-danger-hover-text-transform: none; +$button-danger-hover-color: #ffffff; +$button-danger-hover-box-shadow: none; +$button-danger-hover-opacity: 1; + +// Danger button, theme: Light, state: Disabled +$button-danger-disabled-background: #e5e5e5; +$button-danger-disabled-padding-top: 13px; +$button-danger-disabled-padding-right: 20px; +$button-danger-disabled-padding-bottom: 13px; +$button-danger-disabled-padding-left: 20px; +$button-danger-disabled-border-width: 1px; +$button-danger-disabled-border-radius: 4px; +$button-danger-disabled-border-color: transparent; +$button-danger-disabled-font-family: 'Inter'; +$button-danger-disabled-font-size: 14px; +$button-danger-disabled-font-weight: 600; +$button-danger-disabled-line-height: 1.2857142639160157; +$button-danger-disabled-letter-spacing: -0.28px; +$button-danger-disabled-text-align: center; +$button-danger-disabled-text-decoration: none; +$button-danger-disabled-text-transform: none; +$button-danger-disabled-color: #777777; +$button-danger-disabled-box-shadow: none; +$button-danger-disabled-opacity: 0.699999988079071; + +// Light button, theme: Light, state: Default +$button-light-background: #dcedff; +$button-light-padding-top: 13px; +$button-light-padding-right: 20px; +$button-light-padding-bottom: 13px; +$button-light-padding-left: 20px; +$button-light-border-width: 1px; +$button-light-border-radius: 4px; +$button-light-border-color: transparent; +$button-light-font-family: 'Inter'; +$button-light-font-size: 14px; +$button-light-font-weight: 600; +$button-light-line-height: 1.2857142639160157; +$button-light-letter-spacing: -0.28px; +$button-light-text-align: center; +$button-light-text-decoration: none; +$button-light-text-transform: none; +$button-light-color: #000000; +$button-light-box-shadow: none; +$button-light-opacity: 1; + +// Light button, theme: Light, state: Hover +$button-light-hover-background: #c8e1fc; +$button-light-hover-padding-top: 13px; +$button-light-hover-padding-right: 20px; +$button-light-hover-padding-bottom: 13px; +$button-light-hover-padding-left: 20px; +$button-light-hover-border-width: 1px; +$button-light-hover-border-radius: 4px; +$button-light-hover-border-color: transparent; +$button-light-hover-font-family: 'Inter'; +$button-light-hover-font-size: 14px; +$button-light-hover-font-weight: 600; +$button-light-hover-line-height: 1.2857142639160157; +$button-light-hover-letter-spacing: -0.28px; +$button-light-hover-text-align: center; +$button-light-hover-text-decoration: none; +$button-light-hover-text-transform: none; +$button-light-hover-color: #0073e6; +$button-light-hover-box-shadow: none; +$button-light-hover-opacity: 1; + +// Light button, theme: Light, state: Disabled +$button-light-disabled-background: #e5e5e5; +$button-light-disabled-padding-top: 13px; +$button-light-disabled-padding-right: 20px; +$button-light-disabled-padding-bottom: 13px; +$button-light-disabled-padding-left: 20px; +$button-light-disabled-border-width: 1px; +$button-light-disabled-border-radius: 4px; +$button-light-disabled-border-color: transparent; +$button-light-disabled-font-family: 'Inter'; +$button-light-disabled-font-size: 14px; +$button-light-disabled-font-weight: 600; +$button-light-disabled-line-height: 1.2857142639160157; +$button-light-disabled-letter-spacing: -0.28px; +$button-light-disabled-text-align: center; +$button-light-disabled-text-decoration: none; +$button-light-disabled-text-transform: none; +$button-light-disabled-color: #777777; +$button-light-disabled-box-shadow: none; +$button-light-disabled-opacity: 0.699999988079071; + +// Dark button, theme: Light, state: Default +$button-dark-background: #191919; +$button-dark-padding-top: 13px; +$button-dark-padding-right: 20px; +$button-dark-padding-bottom: 13px; +$button-dark-padding-left: 20px; +$button-dark-border-width: 1px; +$button-dark-border-radius: 4px; +$button-dark-border-color: transparent; +$button-dark-font-family: 'Inter'; +$button-dark-font-size: 14px; +$button-dark-font-weight: 600; +$button-dark-line-height: 1.2857142639160157; +$button-dark-letter-spacing: -0.28px; +$button-dark-text-align: center; +$button-dark-text-decoration: none; +$button-dark-text-transform: none; +$button-dark-color: #ffffff; +$button-dark-box-shadow: none; +$button-dark-opacity: 1; + +// Dark button, theme: Light, state: Hover +$button-dark-hover-background: #000000; +$button-dark-hover-padding-top: 13px; +$button-dark-hover-padding-right: 20px; +$button-dark-hover-padding-bottom: 13px; +$button-dark-hover-padding-left: 20px; +$button-dark-hover-border-width: 1px; +$button-dark-hover-border-radius: 4px; +$button-dark-hover-border-color: transparent; +$button-dark-hover-font-family: 'Inter'; +$button-dark-hover-font-size: 14px; +$button-dark-hover-font-weight: 600; +$button-dark-hover-line-height: 1.2857142639160157; +$button-dark-hover-letter-spacing: -0.28px; +$button-dark-hover-text-align: center; +$button-dark-hover-text-decoration: none; +$button-dark-hover-text-transform: none; +$button-dark-hover-color: #ffffff; +$button-dark-hover-box-shadow: none; +$button-dark-hover-opacity: 1; + +// Dark button, theme: Light, state: Disabled +$button-dark-disabled-background: #e5e5e5; +$button-dark-disabled-padding-top: 13px; +$button-dark-disabled-padding-right: 20px; +$button-dark-disabled-padding-bottom: 13px; +$button-dark-disabled-padding-left: 20px; +$button-dark-disabled-border-width: 1px; +$button-dark-disabled-border-radius: 4px; +$button-dark-disabled-border-color: transparent; +$button-dark-disabled-font-family: 'Inter'; +$button-dark-disabled-font-size: 14px; +$button-dark-disabled-font-weight: 600; +$button-dark-disabled-line-height: 1.2857142639160157; +$button-dark-disabled-letter-spacing: -0.28px; +$button-dark-disabled-text-align: center; +$button-dark-disabled-text-decoration: none; +$button-dark-disabled-text-transform: none; +$button-dark-disabled-color: #777777; +$button-dark-disabled-box-shadow: none; +$button-dark-disabled-opacity: 0.699999988079071; + +// Secondary button, theme: Light, state: Default +$button-secondary-background: #2fa870; +$button-secondary-padding-top: 13px; +$button-secondary-padding-right: 20px; +$button-secondary-padding-bottom: 13px; +$button-secondary-padding-left: 20px; +$button-secondary-border-width: 1px; +$button-secondary-border-radius: 4px; +$button-secondary-border-color: transparent; +$button-secondary-font-family: 'Inter'; +$button-secondary-font-size: 14px; +$button-secondary-font-weight: 600; +$button-secondary-line-height: 1.2857142639160157; +$button-secondary-letter-spacing: -0.28px; +$button-secondary-text-align: center; +$button-secondary-text-decoration: none; +$button-secondary-text-transform: none; +$button-secondary-color: #ffffff; +$button-secondary-box-shadow: none; +$button-secondary-opacity: 1; + +// Secondary button, theme: Light, state: Hover +$button-secondary-hover-background: #3b2794; +$button-secondary-hover-padding-top: 13px; +$button-secondary-hover-padding-right: 20px; +$button-secondary-hover-padding-bottom: 13px; +$button-secondary-hover-padding-left: 20px; +$button-secondary-hover-border-width: 1px; +$button-secondary-hover-border-radius: 4px; +$button-secondary-hover-border-color: transparent; +$button-secondary-hover-font-family: 'Inter'; +$button-secondary-hover-font-size: 14px; +$button-secondary-hover-font-weight: 600; +$button-secondary-hover-line-height: 1.2857142639160157; +$button-secondary-hover-letter-spacing: -0.28px; +$button-secondary-hover-text-align: center; +$button-secondary-hover-text-decoration: none; +$button-secondary-hover-text-transform: none; +$button-secondary-hover-color: #ffffff; +$button-secondary-hover-box-shadow: none; +$button-secondary-hover-opacity: 1; + +// Secondary button, theme: Light, state: Disabled +$button-secondary-disabled-background: #e5e5e5; +$button-secondary-disabled-padding-top: 13px; +$button-secondary-disabled-padding-right: 20px; +$button-secondary-disabled-padding-bottom: 13px; +$button-secondary-disabled-padding-left: 20px; +$button-secondary-disabled-border-width: 1px; +$button-secondary-disabled-border-radius: 4px; +$button-secondary-disabled-border-color: transparent; +$button-secondary-disabled-font-family: 'Inter'; +$button-secondary-disabled-font-size: 14px; +$button-secondary-disabled-font-weight: 600; +$button-secondary-disabled-line-height: 1.2857142639160157; +$button-secondary-disabled-letter-spacing: -0.28px; +$button-secondary-disabled-text-align: center; +$button-secondary-disabled-text-decoration: none; +$button-secondary-disabled-text-transform: none; +$button-secondary-disabled-color: #777777; +$button-secondary-disabled-box-shadow: none; +$button-secondary-disabled-opacity: 0.699999988079071; + +// Small button +$button-small-background: #000000; +$button-small-padding-top: 12px; +$button-small-padding-right: 16px; +$button-small-padding-bottom: 12px; +$button-small-padding-left: 16px; +$button-small-border-width: 1px; +$button-small-border-radius: 4px; +$button-small-border-color: transparent; +$button-small-font-family: 'Inter'; +$button-small-font-size: 12px; +$button-small-font-weight: 600; +$button-small-line-height: 1.3333332824707032; +$button-small-letter-spacing: -0.24px; +$button-small-text-align: center; +$button-small-text-decoration: none; +$button-small-text-transform: none; +$button-small-color: #ffffff; +$button-small-box-shadow: none; +$button-small-opacity: 1; + +// Medium button +$button-medium-background: #000000; +$button-medium-padding-top: 13px; +$button-medium-padding-right: 20px; +$button-medium-padding-bottom: 13px; +$button-medium-padding-left: 20px; +$button-medium-border-width: 1px; +$button-medium-border-radius: 4px; +$button-medium-border-color: transparent; +$button-medium-font-family: 'Inter'; +$button-medium-font-size: 14px; +$button-medium-font-weight: 600; +$button-medium-line-height: 1.2857142639160157; +$button-medium-letter-spacing: -0.28px; +$button-medium-text-align: center; +$button-medium-text-decoration: none; +$button-medium-text-transform: none; +$button-medium-color: #ffffff; +$button-medium-box-shadow: none; +$button-medium-opacity: 1; + +// Large button +$button-large-background: #000000; +$button-large-padding-top: 14px; +$button-large-padding-right: 20px; +$button-large-padding-bottom: 14px; +$button-large-padding-left: 20px; +$button-large-border-width: 1px; +$button-large-border-radius: 4px; +$button-large-border-color: transparent; +$button-large-font-family: 'Inter'; +$button-large-font-size: 16px; +$button-large-font-weight: 600; +$button-large-line-height: 1.25; +$button-large-letter-spacing: -0.32px; +$button-large-text-align: center; +$button-large-text-decoration: none; +$button-large-text-transform: none; +$button-large-color: #ffffff; +$button-large-box-shadow: none; +$button-large-opacity: 1; \ No newline at end of file diff --git a/sass/project/default_vars/checkboxes.scss b/sass/project/default_vars/checkboxes.scss new file mode 100644 index 00000000..fb128b18 --- /dev/null +++ b/sass/project/default_vars/checkboxes.scss @@ -0,0 +1,533 @@ +$checkbox-sizes: ( "sm", "md", "lg" ); + +$checkbox-themes: ( "dark", "light" ); + +$checkbox-states: ( "disabled", "hover", "" ); + +.checkbox { + + // checkbox , theme: Dark, state: Disabled + --checkbox-disabled-on-background: #258cf2; + --checkbox-disabled-on-width: 18px; + --checkbox-disabled-on-width-raw: 18; + --checkbox-disabled-on-height: 18px; + --checkbox-disabled-on-height-raw: 18; + --checkbox-disabled-on-icon-color: #ffffff; + --checkbox-disabled-on-opacity: 0.4000000059604645; + --checkbox-disabled-on-padding-y: 0px; + --checkbox-disabled-on-padding-x: 0px; + --checkbox-disabled-on-padding-top: 0px; + --checkbox-disabled-on-padding-right: 0px; + --checkbox-disabled-on-padding-bottom: 0px; + --checkbox-disabled-on-padding-left: 0px; + --checkbox-disabled-on-padding-start: 12px; + --checkbox-disabled-on-border-width: 1px; + --checkbox-disabled-on-border-radius: 3px; + --checkbox-disabled-on-border-color: transparent; + --checkbox-disabled-on-box-shadow: none; + --checkbox-disabled-icon-on-width: 12.599609375px; + --checkbox-disabled-icon-on-width-raw: 12.599609375; + --checkbox-disabled-icon-on-height: 12.5999755859375px; + --checkbox-disabled-icon-on-height-raw: 12.5999755859375; + --checkbox-disabled-label-on-spacing: -0.28px; + --checkbox-disabled-label-on-font-family: 'Inter'; + --checkbox-disabled-label-on-font-size: 14px; + --checkbox-disabled-label-on-font-weight: 400; + --checkbox-disabled-label-on-line-height: 1.4285714721679688; + --checkbox-disabled-label-on-letter-spacing: -0.28px; + --checkbox-disabled-label-on-text-align: left; + --checkbox-disabled-label-on-text-decoration: none; + --checkbox-disabled-label-on-text-transform: none; + --checkbox-disabled-label-on-color: #ffffff; + --checkbox-disabled-label-on-opacity: 1; + + // checkbox , theme: Dark, state: Hover + --checkbox-hover-on-background: #0073e6; + --checkbox-hover-on-width: 18px; + --checkbox-hover-on-width-raw: 18; + --checkbox-hover-on-height: 18px; + --checkbox-hover-on-height-raw: 18; + --checkbox-hover-on-icon-color: #ffffff; + --checkbox-hover-on-opacity: 1; + --checkbox-hover-on-padding-y: 0px; + --checkbox-hover-on-padding-x: 0px; + --checkbox-hover-on-padding-top: 0px; + --checkbox-hover-on-padding-right: 0px; + --checkbox-hover-on-padding-bottom: 0px; + --checkbox-hover-on-padding-left: 0px; + --checkbox-hover-on-padding-start: 12px; + --checkbox-hover-on-border-width: 1px; + --checkbox-hover-on-border-radius: 3px; + --checkbox-hover-on-border-color: transparent; + --checkbox-hover-on-box-shadow: none; + --checkbox-hover-icon-on-width: 12.599609375px; + --checkbox-hover-icon-on-width-raw: 12.599609375; + --checkbox-hover-icon-on-height: 12.5999755859375px; + --checkbox-hover-icon-on-height-raw: 12.5999755859375; + --checkbox-hover-label-on-spacing: -0.28px; + --checkbox-hover-label-on-font-family: 'Inter'; + --checkbox-hover-label-on-font-size: 14px; + --checkbox-hover-label-on-font-weight: 400; + --checkbox-hover-label-on-line-height: 1.4285714721679688; + --checkbox-hover-label-on-letter-spacing: -0.28px; + --checkbox-hover-label-on-text-align: left; + --checkbox-hover-label-on-text-decoration: none; + --checkbox-hover-label-on-text-transform: none; + --checkbox-hover-label-on-color: #ffffff; + --checkbox-hover-label-on-opacity: 1; + + // checkbox , theme: Dark, state: Default + --checkbox-on-background: #258cf2; + --checkbox-on-width: 18px; + --checkbox-on-width-raw: 18; + --checkbox-on-height: 18px; + --checkbox-on-height-raw: 18; + --checkbox-on-icon-color: #ffffff; + --checkbox-on-opacity: 1; + --checkbox-on-padding-y: 0px; + --checkbox-on-padding-x: 0px; + --checkbox-on-padding-top: 0px; + --checkbox-on-padding-right: 0px; + --checkbox-on-padding-bottom: 0px; + --checkbox-on-padding-left: 0px; + --checkbox-on-padding-start: 12px; + --checkbox-on-border-width: 1px; + --checkbox-on-border-radius: 3px; + --checkbox-on-border-color: transparent; + --checkbox-on-box-shadow: none; + --checkbox-icon-on-width: 12.599609375px; + --checkbox-icon-on-width-raw: 12.599609375; + --checkbox-icon-on-height: 12.5999755859375px; + --checkbox-icon-on-height-raw: 12.5999755859375; + --checkbox-label-on-spacing: -0.28px; + --checkbox-label-on-font-family: 'Inter'; + --checkbox-label-on-font-size: 14px; + --checkbox-label-on-font-weight: 400; + --checkbox-label-on-line-height: 1.4285714721679688; + --checkbox-label-on-letter-spacing: -0.28px; + --checkbox-label-on-text-align: left; + --checkbox-label-on-text-decoration: none; + --checkbox-label-on-text-transform: none; + --checkbox-label-on-color: #ffffff; + --checkbox-label-on-opacity: 1; + + // checkbox , theme: Dark, state: Disabled + --checkbox-disabled-off-background: #6e6e6e; + --checkbox-disabled-off-width: 18px; + --checkbox-disabled-off-width-raw: 18; + --checkbox-disabled-off-height: 18px; + --checkbox-disabled-off-height-raw: 18; + --checkbox-disabled-off-icon-color: #ffffff; + --checkbox-disabled-off-opacity: 0.4000000059604645; + --checkbox-disabled-off-padding-y: 0px; + --checkbox-disabled-off-padding-x: 0px; + --checkbox-disabled-off-padding-top: 0px; + --checkbox-disabled-off-padding-right: 0px; + --checkbox-disabled-off-padding-bottom: 0px; + --checkbox-disabled-off-padding-left: 0px; + --checkbox-disabled-off-padding-start: 12px; + --checkbox-disabled-off-border-width: 1px; + --checkbox-disabled-off-border-radius: 3px; + --checkbox-disabled-off-border-color: transparent; + --checkbox-disabled-off-box-shadow: none; + --checkbox-disabled-icon-off-width: 0px; + --checkbox-disabled-icon-off-width-raw: 0; + --checkbox-disabled-icon-off-height: 0px; + --checkbox-disabled-icon-off-height-raw: 0; + --checkbox-disabled-label-off-spacing: -0.28px; + --checkbox-disabled-label-off-font-family: 'Inter'; + --checkbox-disabled-label-off-font-size: 14px; + --checkbox-disabled-label-off-font-weight: 400; + --checkbox-disabled-label-off-line-height: 1.4285714721679688; + --checkbox-disabled-label-off-letter-spacing: -0.28px; + --checkbox-disabled-label-off-text-align: left; + --checkbox-disabled-label-off-text-decoration: none; + --checkbox-disabled-label-off-text-transform: none; + --checkbox-disabled-label-off-color: #ffffff; + --checkbox-disabled-label-off-opacity: 1; + + // checkbox , theme: Dark, state: Hover + --checkbox-hover-off-background: transparent; + --checkbox-hover-off-width: 18px; + --checkbox-hover-off-width-raw: 18; + --checkbox-hover-off-height: 18px; + --checkbox-hover-off-height-raw: 18; + --checkbox-hover-off-icon-color: #ffffff; + --checkbox-hover-off-opacity: 1; + --checkbox-hover-off-padding-y: 0px; + --checkbox-hover-off-padding-x: 0px; + --checkbox-hover-off-padding-top: 0px; + --checkbox-hover-off-padding-right: 0px; + --checkbox-hover-off-padding-bottom: 0px; + --checkbox-hover-off-padding-left: 0px; + --checkbox-hover-off-padding-start: 12px; + --checkbox-hover-off-border-width: 1px; + --checkbox-hover-off-border-radius: 3px; + --checkbox-hover-off-border-color: rgba(255, 255, 255, 0.75); + --checkbox-hover-off-box-shadow: none; + --checkbox-hover-icon-off-width: 0px; + --checkbox-hover-icon-off-width-raw: 0; + --checkbox-hover-icon-off-height: 0px; + --checkbox-hover-icon-off-height-raw: 0; + --checkbox-hover-label-off-spacing: -0.28px; + --checkbox-hover-label-off-font-family: 'Inter'; + --checkbox-hover-label-off-font-size: 14px; + --checkbox-hover-label-off-font-weight: 400; + --checkbox-hover-label-off-line-height: 1.4285714721679688; + --checkbox-hover-label-off-letter-spacing: -0.28px; + --checkbox-hover-label-off-text-align: left; + --checkbox-hover-label-off-text-decoration: none; + --checkbox-hover-label-off-text-transform: none; + --checkbox-hover-label-off-color: #ffffff; + --checkbox-hover-label-off-opacity: 1; + + // checkbox , theme: Dark, state: Default + --checkbox-off-background: transparent; + --checkbox-off-width: 18px; + --checkbox-off-width-raw: 18; + --checkbox-off-height: 18px; + --checkbox-off-height-raw: 18; + --checkbox-off-icon-color: #ffffff; + --checkbox-off-opacity: 1; + --checkbox-off-padding-y: 0px; + --checkbox-off-padding-x: 0px; + --checkbox-off-padding-top: 0px; + --checkbox-off-padding-right: 0px; + --checkbox-off-padding-bottom: 0px; + --checkbox-off-padding-left: 0px; + --checkbox-off-padding-start: 12px; + --checkbox-off-border-width: 1px; + --checkbox-off-border-radius: 3px; + --checkbox-off-border-color: rgba(255, 255, 255, 0.4000000059604645); + --checkbox-off-box-shadow: none; + --checkbox-icon-off-width: 0px; + --checkbox-icon-off-width-raw: 0; + --checkbox-icon-off-height: 0px; + --checkbox-icon-off-height-raw: 0; + --checkbox-label-off-spacing: -0.28px; + --checkbox-label-off-font-family: 'Inter'; + --checkbox-label-off-font-size: 14px; + --checkbox-label-off-font-weight: 400; + --checkbox-label-off-line-height: 1.4285714721679688; + --checkbox-label-off-letter-spacing: -0.28px; + --checkbox-label-off-text-align: left; + --checkbox-label-off-text-decoration: none; + --checkbox-label-off-text-transform: none; + --checkbox-label-off-color: #ffffff; + --checkbox-label-off-opacity: 1; + + // checkbox , theme: Light, state: Disabled + --checkbox-disabled-on-background: #7158dd; + --checkbox-disabled-on-width: 18px; + --checkbox-disabled-on-width-raw: 18; + --checkbox-disabled-on-height: 18px; + --checkbox-disabled-on-height-raw: 18; + --checkbox-disabled-on-icon-color: #ffffff; + --checkbox-disabled-on-opacity: 0.30000001192092896; + --checkbox-disabled-on-padding-y: 0px; + --checkbox-disabled-on-padding-x: 0px; + --checkbox-disabled-on-padding-top: 0px; + --checkbox-disabled-on-padding-right: 0px; + --checkbox-disabled-on-padding-bottom: 0px; + --checkbox-disabled-on-padding-left: 0px; + --checkbox-disabled-on-padding-start: 12px; + --checkbox-disabled-on-border-width: 1px; + --checkbox-disabled-on-border-radius: 3px; + --checkbox-disabled-on-border-color: transparent; + --checkbox-disabled-on-box-shadow: none; + --checkbox-disabled-icon-on-width: 12.599609375px; + --checkbox-disabled-icon-on-width-raw: 12.599609375; + --checkbox-disabled-icon-on-height: 12.5999755859375px; + --checkbox-disabled-icon-on-height-raw: 12.5999755859375; + --checkbox-disabled-label-on-spacing: -0.28px; + --checkbox-disabled-label-on-font-family: 'Inter'; + --checkbox-disabled-label-on-font-size: 14px; + --checkbox-disabled-label-on-font-weight: 400; + --checkbox-disabled-label-on-line-height: 1.4285714721679688; + --checkbox-disabled-label-on-letter-spacing: -0.28px; + --checkbox-disabled-label-on-text-align: left; + --checkbox-disabled-label-on-text-decoration: none; + --checkbox-disabled-label-on-text-transform: none; + --checkbox-disabled-label-on-color: #777777; + --checkbox-disabled-label-on-opacity: 1; + + // checkbox , theme: Light, state: Hover + --checkbox-hover-on-background: #258cf2; + --checkbox-hover-on-width: 18px; + --checkbox-hover-on-width-raw: 18; + --checkbox-hover-on-height: 18px; + --checkbox-hover-on-height-raw: 18; + --checkbox-hover-on-icon-color: #ffffff; + --checkbox-hover-on-opacity: 1; + --checkbox-hover-on-padding-y: 0px; + --checkbox-hover-on-padding-x: 0px; + --checkbox-hover-on-padding-top: 0px; + --checkbox-hover-on-padding-right: 0px; + --checkbox-hover-on-padding-bottom: 0px; + --checkbox-hover-on-padding-left: 0px; + --checkbox-hover-on-padding-start: 12px; + --checkbox-hover-on-border-width: 1px; + --checkbox-hover-on-border-radius: 3px; + --checkbox-hover-on-border-color: transparent; + --checkbox-hover-on-box-shadow: none; + --checkbox-hover-icon-on-width: 12.599609375px; + --checkbox-hover-icon-on-width-raw: 12.599609375; + --checkbox-hover-icon-on-height: 12.5999755859375px; + --checkbox-hover-icon-on-height-raw: 12.5999755859375; + --checkbox-hover-label-on-spacing: -0.28px; + --checkbox-hover-label-on-font-family: 'Inter'; + --checkbox-hover-label-on-font-size: 14px; + --checkbox-hover-label-on-font-weight: 400; + --checkbox-hover-label-on-line-height: 1.4285714721679688; + --checkbox-hover-label-on-letter-spacing: -0.28px; + --checkbox-hover-label-on-text-align: left; + --checkbox-hover-label-on-text-decoration: none; + --checkbox-hover-label-on-text-transform: none; + --checkbox-hover-label-on-color: #000000; + --checkbox-hover-label-on-opacity: 1; + + // checkbox , theme: Light, state: Default + --checkbox-on-background: #4c34b6; + --checkbox-on-width: 18px; + --checkbox-on-width-raw: 18; + --checkbox-on-height: 18px; + --checkbox-on-height-raw: 18; + --checkbox-on-icon-color: #ffffff; + --checkbox-on-opacity: 1; + --checkbox-on-padding-y: 0px; + --checkbox-on-padding-x: 0px; + --checkbox-on-padding-top: 0px; + --checkbox-on-padding-right: 0px; + --checkbox-on-padding-bottom: 0px; + --checkbox-on-padding-left: 0px; + --checkbox-on-padding-start: 12px; + --checkbox-on-border-width: 1px; + --checkbox-on-border-radius: 3px; + --checkbox-on-border-color: transparent; + --checkbox-on-box-shadow: none; + --checkbox-icon-on-width: 12.599609375px; + --checkbox-icon-on-width-raw: 12.599609375; + --checkbox-icon-on-height: 12.5999755859375px; + --checkbox-icon-on-height-raw: 12.5999755859375; + --checkbox-label-on-spacing: -0.28px; + --checkbox-label-on-font-family: 'Inter'; + --checkbox-label-on-font-size: 14px; + --checkbox-label-on-font-weight: 400; + --checkbox-label-on-line-height: 1.4285714721679688; + --checkbox-label-on-letter-spacing: -0.28px; + --checkbox-label-on-text-align: left; + --checkbox-label-on-text-decoration: none; + --checkbox-label-on-text-transform: none; + --checkbox-label-on-color: #000000; + --checkbox-label-on-opacity: 1; + + // checkbox , theme: Light, state: Disabled + --checkbox-disabled-off-background: #cccccc; + --checkbox-disabled-off-width: 18px; + --checkbox-disabled-off-width-raw: 18; + --checkbox-disabled-off-height: 18px; + --checkbox-disabled-off-height-raw: 18; + --checkbox-disabled-off-icon-color: #ffffff; + --checkbox-disabled-off-opacity: 0.30000001192092896; + --checkbox-disabled-off-padding-y: 0px; + --checkbox-disabled-off-padding-x: 0px; + --checkbox-disabled-off-padding-top: 0px; + --checkbox-disabled-off-padding-right: 0px; + --checkbox-disabled-off-padding-bottom: 0px; + --checkbox-disabled-off-padding-left: 0px; + --checkbox-disabled-off-padding-start: 12px; + --checkbox-disabled-off-border-width: 1px; + --checkbox-disabled-off-border-radius: 3px; + --checkbox-disabled-off-border-color: transparent; + --checkbox-disabled-off-box-shadow: none; + --checkbox-disabled-icon-off-width: 0px; + --checkbox-disabled-icon-off-width-raw: 0; + --checkbox-disabled-icon-off-height: 0px; + --checkbox-disabled-icon-off-height-raw: 0; + --checkbox-disabled-label-off-spacing: -0.28px; + --checkbox-disabled-label-off-font-family: 'Inter'; + --checkbox-disabled-label-off-font-size: 14px; + --checkbox-disabled-label-off-font-weight: 400; + --checkbox-disabled-label-off-line-height: 1.4285714721679688; + --checkbox-disabled-label-off-letter-spacing: -0.28px; + --checkbox-disabled-label-off-text-align: left; + --checkbox-disabled-label-off-text-decoration: none; + --checkbox-disabled-label-off-text-transform: none; + --checkbox-disabled-label-off-color: #777777; + --checkbox-disabled-label-off-opacity: 1; + + // checkbox , theme: Light, state: Hover + --checkbox-hover-off-background: transparent; + --checkbox-hover-off-width: 18px; + --checkbox-hover-off-width-raw: 18; + --checkbox-hover-off-height: 18px; + --checkbox-hover-off-height-raw: 18; + --checkbox-hover-off-icon-color: #ffffff; + --checkbox-hover-off-opacity: 1; + --checkbox-hover-off-padding-y: 0px; + --checkbox-hover-off-padding-x: 0px; + --checkbox-hover-off-padding-top: 0px; + --checkbox-hover-off-padding-right: 0px; + --checkbox-hover-off-padding-bottom: 0px; + --checkbox-hover-off-padding-left: 0px; + --checkbox-hover-off-padding-start: 12px; + --checkbox-hover-off-border-width: 1px; + --checkbox-hover-off-border-radius: 3px; + --checkbox-hover-off-border-color: #929292; + --checkbox-hover-off-box-shadow: none; + --checkbox-hover-icon-off-width: 0px; + --checkbox-hover-icon-off-width-raw: 0; + --checkbox-hover-icon-off-height: 0px; + --checkbox-hover-icon-off-height-raw: 0; + --checkbox-hover-label-off-spacing: -0.28px; + --checkbox-hover-label-off-font-family: 'Inter'; + --checkbox-hover-label-off-font-size: 14px; + --checkbox-hover-label-off-font-weight: 400; + --checkbox-hover-label-off-line-height: 1.4285714721679688; + --checkbox-hover-label-off-letter-spacing: -0.28px; + --checkbox-hover-label-off-text-align: left; + --checkbox-hover-label-off-text-decoration: none; + --checkbox-hover-label-off-text-transform: none; + --checkbox-hover-label-off-color: #000000; + --checkbox-hover-label-off-opacity: 1; + + // checkbox , theme: Light, state: Default + --checkbox-off-background: transparent; + --checkbox-off-width: 18px; + --checkbox-off-width-raw: 18; + --checkbox-off-height: 18px; + --checkbox-off-height-raw: 18; + --checkbox-off-icon-color: #ffffff; + --checkbox-off-opacity: 1; + --checkbox-off-padding-y: 0px; + --checkbox-off-padding-x: 0px; + --checkbox-off-padding-top: 0px; + --checkbox-off-padding-right: 0px; + --checkbox-off-padding-bottom: 0px; + --checkbox-off-padding-left: 0px; + --checkbox-off-padding-start: 12px; + --checkbox-off-border-width: 1px; + --checkbox-off-border-radius: 3px; + --checkbox-off-border-color: #b3b3b3; + --checkbox-off-box-shadow: none; + --checkbox-icon-off-width: 0px; + --checkbox-icon-off-width-raw: 0; + --checkbox-icon-off-height: 0px; + --checkbox-icon-off-height-raw: 0; + --checkbox-label-off-spacing: -0.28px; + --checkbox-label-off-font-family: 'Inter'; + --checkbox-label-off-font-size: 14px; + --checkbox-label-off-font-weight: 400; + --checkbox-label-off-line-height: 1.4285714721679688; + --checkbox-label-off-letter-spacing: -0.28px; + --checkbox-label-off-text-align: left; + --checkbox-label-off-text-decoration: none; + --checkbox-label-off-text-transform: none; + --checkbox-label-off-color: #555555; + --checkbox-label-off-opacity: 1; + + // checkbox Small falsefalse + --checkbox-small-off-background: transparent; + --checkbox-small-off-width: 16px; + --checkbox-small-off-width-raw: 16; + --checkbox-small-off-height: 16px; + --checkbox-small-off-height-raw: 16; + --checkbox-small-off-icon-color: #000000; + --checkbox-small-off-opacity: 1; + --checkbox-small-off-padding-y: 0px; + --checkbox-small-off-padding-x: 0px; + --checkbox-small-off-padding-top: 0px; + --checkbox-small-off-padding-right: 0px; + --checkbox-small-off-padding-bottom: 0px; + --checkbox-small-off-padding-left: 0px; + --checkbox-small-off-padding-start: 10px; + --checkbox-small-off-border-width: 1px; + --checkbox-small-off-border-radius: 3px; + --checkbox-small-off-border-color: #000000; + --checkbox-small-off-box-shadow: none; + --checkbox-small-icon-off-width: 0px; + --checkbox-small-icon-off-width-raw: 0; + --checkbox-small-icon-off-height: 0px; + --checkbox-small-icon-off-height-raw: 0; + --checkbox-small-label-off-spacing: -0.24px; + --checkbox-small-label-off-font-family: 'Inter'; + --checkbox-small-label-off-font-size: 12px; + --checkbox-small-label-off-font-weight: 400; + --checkbox-small-label-off-line-height: 1.6666667175292968; + --checkbox-small-label-off-letter-spacing: -0.24px; + --checkbox-small-label-off-text-align: left; + --checkbox-small-label-off-text-decoration: none; + --checkbox-small-label-off-text-transform: none; + --checkbox-small-label-off-color: #555555; + --checkbox-small-label-off-opacity: 1; + + // checkbox Medium falsefalse + --checkbox-medium-off-background: transparent; + --checkbox-medium-off-width: 18px; + --checkbox-medium-off-width-raw: 18; + --checkbox-medium-off-height: 18px; + --checkbox-medium-off-height-raw: 18; + --checkbox-medium-off-icon-color: #000000; + --checkbox-medium-off-opacity: 1; + --checkbox-medium-off-padding-y: 0px; + --checkbox-medium-off-padding-x: 0px; + --checkbox-medium-off-padding-top: 0px; + --checkbox-medium-off-padding-right: 0px; + --checkbox-medium-off-padding-bottom: 0px; + --checkbox-medium-off-padding-left: 0px; + --checkbox-medium-off-padding-start: 12px; + --checkbox-medium-off-border-width: 1px; + --checkbox-medium-off-border-radius: 3px; + --checkbox-medium-off-border-color: #000000; + --checkbox-medium-off-box-shadow: none; + --checkbox-medium-icon-off-width: 0px; + --checkbox-medium-icon-off-width-raw: 0; + --checkbox-medium-icon-off-height: 0px; + --checkbox-medium-icon-off-height-raw: 0; + --checkbox-medium-label-off-spacing: -0.28px; + --checkbox-medium-label-off-font-family: 'Inter'; + --checkbox-medium-label-off-font-size: 14px; + --checkbox-medium-label-off-font-weight: 400; + --checkbox-medium-label-off-line-height: 1.4285714721679688; + --checkbox-medium-label-off-letter-spacing: -0.28px; + --checkbox-medium-label-off-text-align: left; + --checkbox-medium-label-off-text-decoration: none; + --checkbox-medium-label-off-text-transform: none; + --checkbox-medium-label-off-color: #555555; + --checkbox-medium-label-off-opacity: 1; + + // checkbox Large falsefalse + --checkbox-large-off-background: transparent; + --checkbox-large-off-width: 20px; + --checkbox-large-off-width-raw: 20; + --checkbox-large-off-height: 20px; + --checkbox-large-off-height-raw: 20; + --checkbox-large-off-icon-color: #000000; + --checkbox-large-off-opacity: 1; + --checkbox-large-off-padding-y: 0px; + --checkbox-large-off-padding-x: 0px; + --checkbox-large-off-padding-top: 0px; + --checkbox-large-off-padding-right: 0px; + --checkbox-large-off-padding-bottom: 0px; + --checkbox-large-off-padding-left: 0px; + --checkbox-large-off-padding-start: 14px; + --checkbox-large-off-border-width: 1px; + --checkbox-large-off-border-radius: 3px; + --checkbox-large-off-border-color: #000000; + --checkbox-large-off-box-shadow: none; + --checkbox-large-icon-off-width: 0px; + --checkbox-large-icon-off-width-raw: 0; + --checkbox-large-icon-off-height: 0px; + --checkbox-large-icon-off-height-raw: 0; + --checkbox-large-label-off-spacing: -0.32px; + --checkbox-large-label-off-font-family: 'Inter'; + --checkbox-large-label-off-font-size: 16px; + --checkbox-large-label-off-font-weight: 400; + --checkbox-large-label-off-line-height: 1.25; + --checkbox-large-label-off-letter-spacing: -0.32px; + --checkbox-large-label-off-text-align: left; + --checkbox-large-label-off-text-decoration: none; + --checkbox-large-label-off-text-transform: none; + --checkbox-large-label-off-color: #555555; + --checkbox-large-label-off-opacity: 1; +} \ No newline at end of file diff --git a/sass/project/default_vars/checkboxes_vars.scss b/sass/project/default_vars/checkboxes_vars.scss new file mode 100644 index 00000000..2f47801d --- /dev/null +++ b/sass/project/default_vars/checkboxes_vars.scss @@ -0,0 +1,524 @@ +// input, theme: Dark, state: Disabled +$checkbox-disabled-on-background: #258cf2; +$checkbox-disabled-on-width: 18px; +$checkbox-disabled-on-width-raw: 18; +$checkbox-disabled-on-height: 18px; +$checkbox-disabled-on-height-raw: 18; +$checkbox-disabled-on-icon-color: #ffffff; +$checkbox-disabled-on-opacity: 0.4000000059604645; +$checkbox-disabled-on-padding-y: 0px; +$checkbox-disabled-on-padding-x: 0px; +$checkbox-disabled-on-padding-top: 0px; +$checkbox-disabled-on-padding-right: 0px; +$checkbox-disabled-on-padding-bottom: 0px; +$checkbox-disabled-on-padding-left: 0px; +$checkbox-disabled-on-padding-start: 12px; +$checkbox-disabled-on-border-width: 1px; +$checkbox-disabled-on-border-radius: 3px; +$checkbox-disabled-on-border-color: transparent; +$checkbox-disabled-on-box-shadow: none; +$checkbox-disabled-icon-on-width: 12.599609375px; +$checkbox-disabled-icon-on-width-raw: 12.599609375; +$checkbox-disabled-icon-on-height: 12.5999755859375px; +$checkbox-disabled-icon-on-height-raw: 12.5999755859375; +$checkbox-disabled-label-on-spacing: -0.28px; +$checkbox-disabled-label-on-font-family: 'Inter'; +$checkbox-disabled-label-on-font-size: 14px; +$checkbox-disabled-label-on-font-weight: 400; +$checkbox-disabled-label-on-line-height: 1.4285714721679688; +$checkbox-disabled-label-on-letter-spacing: -0.28px; +$checkbox-disabled-label-on-text-align: left; +$checkbox-disabled-label-on-text-decoration: none; +$checkbox-disabled-label-on-text-transform: none; +$checkbox-disabled-label-on-color: #ffffff; +$checkbox-disabled-label-on-opacity: 1; + +// input, theme: Dark, state: Hover +$checkbox-hover-on-background: #0073e6; +$checkbox-hover-on-width: 18px; +$checkbox-hover-on-width-raw: 18; +$checkbox-hover-on-height: 18px; +$checkbox-hover-on-height-raw: 18; +$checkbox-hover-on-icon-color: #ffffff; +$checkbox-hover-on-opacity: 1; +$checkbox-hover-on-padding-y: 0px; +$checkbox-hover-on-padding-x: 0px; +$checkbox-hover-on-padding-top: 0px; +$checkbox-hover-on-padding-right: 0px; +$checkbox-hover-on-padding-bottom: 0px; +$checkbox-hover-on-padding-left: 0px; +$checkbox-hover-on-padding-start: 12px; +$checkbox-hover-on-border-width: 1px; +$checkbox-hover-on-border-radius: 3px; +$checkbox-hover-on-border-color: transparent; +$checkbox-hover-on-box-shadow: none; +$checkbox-hover-icon-on-width: 12.599609375px; +$checkbox-hover-icon-on-width-raw: 12.599609375; +$checkbox-hover-icon-on-height: 12.5999755859375px; +$checkbox-hover-icon-on-height-raw: 12.5999755859375; +$checkbox-hover-label-on-spacing: -0.28px; +$checkbox-hover-label-on-font-family: 'Inter'; +$checkbox-hover-label-on-font-size: 14px; +$checkbox-hover-label-on-font-weight: 400; +$checkbox-hover-label-on-line-height: 1.4285714721679688; +$checkbox-hover-label-on-letter-spacing: -0.28px; +$checkbox-hover-label-on-text-align: left; +$checkbox-hover-label-on-text-decoration: none; +$checkbox-hover-label-on-text-transform: none; +$checkbox-hover-label-on-color: #ffffff; +$checkbox-hover-label-on-opacity: 1; + +// input, theme: Dark, state: Default +$checkbox-on-background: #258cf2; +$checkbox-on-width: 18px; +$checkbox-on-width-raw: 18; +$checkbox-on-height: 18px; +$checkbox-on-height-raw: 18; +$checkbox-on-icon-color: #ffffff; +$checkbox-on-opacity: 1; +$checkbox-on-padding-y: 0px; +$checkbox-on-padding-x: 0px; +$checkbox-on-padding-top: 0px; +$checkbox-on-padding-right: 0px; +$checkbox-on-padding-bottom: 0px; +$checkbox-on-padding-left: 0px; +$checkbox-on-padding-start: 12px; +$checkbox-on-border-width: 1px; +$checkbox-on-border-radius: 3px; +$checkbox-on-border-color: transparent; +$checkbox-on-box-shadow: none; +$checkbox-icon-on-width: 12.599609375px; +$checkbox-icon-on-width-raw: 12.599609375; +$checkbox-icon-on-height: 12.5999755859375px; +$checkbox-icon-on-height-raw: 12.5999755859375; +$checkbox-label-on-spacing: -0.28px; +$checkbox-label-on-font-family: 'Inter'; +$checkbox-label-on-font-size: 14px; +$checkbox-label-on-font-weight: 400; +$checkbox-label-on-line-height: 1.4285714721679688; +$checkbox-label-on-letter-spacing: -0.28px; +$checkbox-label-on-text-align: left; +$checkbox-label-on-text-decoration: none; +$checkbox-label-on-text-transform: none; +$checkbox-label-on-color: #ffffff; +$checkbox-label-on-opacity: 1; + +// input, theme: Dark, state: Disabled +$checkbox-disabled-off-background: #6e6e6e; +$checkbox-disabled-off-width: 18px; +$checkbox-disabled-off-width-raw: 18; +$checkbox-disabled-off-height: 18px; +$checkbox-disabled-off-height-raw: 18; +$checkbox-disabled-off-icon-color: #ffffff; +$checkbox-disabled-off-opacity: 0.4000000059604645; +$checkbox-disabled-off-padding-y: 0px; +$checkbox-disabled-off-padding-x: 0px; +$checkbox-disabled-off-padding-top: 0px; +$checkbox-disabled-off-padding-right: 0px; +$checkbox-disabled-off-padding-bottom: 0px; +$checkbox-disabled-off-padding-left: 0px; +$checkbox-disabled-off-padding-start: 12px; +$checkbox-disabled-off-border-width: 1px; +$checkbox-disabled-off-border-radius: 3px; +$checkbox-disabled-off-border-color: transparent; +$checkbox-disabled-off-box-shadow: none; +$checkbox-disabled-icon-off-width: 0px; +$checkbox-disabled-icon-off-width-raw: 0; +$checkbox-disabled-icon-off-height: 0px; +$checkbox-disabled-icon-off-height-raw: 0; +$checkbox-disabled-label-off-spacing: -0.28px; +$checkbox-disabled-label-off-font-family: 'Inter'; +$checkbox-disabled-label-off-font-size: 14px; +$checkbox-disabled-label-off-font-weight: 400; +$checkbox-disabled-label-off-line-height: 1.4285714721679688; +$checkbox-disabled-label-off-letter-spacing: -0.28px; +$checkbox-disabled-label-off-text-align: left; +$checkbox-disabled-label-off-text-decoration: none; +$checkbox-disabled-label-off-text-transform: none; +$checkbox-disabled-label-off-color: #ffffff; +$checkbox-disabled-label-off-opacity: 1; + +// input, theme: Dark, state: Hover +$checkbox-hover-off-background: transparent; +$checkbox-hover-off-width: 18px; +$checkbox-hover-off-width-raw: 18; +$checkbox-hover-off-height: 18px; +$checkbox-hover-off-height-raw: 18; +$checkbox-hover-off-icon-color: #ffffff; +$checkbox-hover-off-opacity: 1; +$checkbox-hover-off-padding-y: 0px; +$checkbox-hover-off-padding-x: 0px; +$checkbox-hover-off-padding-top: 0px; +$checkbox-hover-off-padding-right: 0px; +$checkbox-hover-off-padding-bottom: 0px; +$checkbox-hover-off-padding-left: 0px; +$checkbox-hover-off-padding-start: 12px; +$checkbox-hover-off-border-width: 1px; +$checkbox-hover-off-border-radius: 3px; +$checkbox-hover-off-border-color: rgba(255, 255, 255, 0.75); +$checkbox-hover-off-box-shadow: none; +$checkbox-hover-icon-off-width: 0px; +$checkbox-hover-icon-off-width-raw: 0; +$checkbox-hover-icon-off-height: 0px; +$checkbox-hover-icon-off-height-raw: 0; +$checkbox-hover-label-off-spacing: -0.28px; +$checkbox-hover-label-off-font-family: 'Inter'; +$checkbox-hover-label-off-font-size: 14px; +$checkbox-hover-label-off-font-weight: 400; +$checkbox-hover-label-off-line-height: 1.4285714721679688; +$checkbox-hover-label-off-letter-spacing: -0.28px; +$checkbox-hover-label-off-text-align: left; +$checkbox-hover-label-off-text-decoration: none; +$checkbox-hover-label-off-text-transform: none; +$checkbox-hover-label-off-color: #ffffff; +$checkbox-hover-label-off-opacity: 1; + +// input, theme: Dark, state: Default +$checkbox-off-background: transparent; +$checkbox-off-width: 18px; +$checkbox-off-width-raw: 18; +$checkbox-off-height: 18px; +$checkbox-off-height-raw: 18; +$checkbox-off-icon-color: #ffffff; +$checkbox-off-opacity: 1; +$checkbox-off-padding-y: 0px; +$checkbox-off-padding-x: 0px; +$checkbox-off-padding-top: 0px; +$checkbox-off-padding-right: 0px; +$checkbox-off-padding-bottom: 0px; +$checkbox-off-padding-left: 0px; +$checkbox-off-padding-start: 12px; +$checkbox-off-border-width: 1px; +$checkbox-off-border-radius: 3px; +$checkbox-off-border-color: rgba(255, 255, 255, 0.4000000059604645); +$checkbox-off-box-shadow: none; +$checkbox-icon-off-width: 0px; +$checkbox-icon-off-width-raw: 0; +$checkbox-icon-off-height: 0px; +$checkbox-icon-off-height-raw: 0; +$checkbox-label-off-spacing: -0.28px; +$checkbox-label-off-font-family: 'Inter'; +$checkbox-label-off-font-size: 14px; +$checkbox-label-off-font-weight: 400; +$checkbox-label-off-line-height: 1.4285714721679688; +$checkbox-label-off-letter-spacing: -0.28px; +$checkbox-label-off-text-align: left; +$checkbox-label-off-text-decoration: none; +$checkbox-label-off-text-transform: none; +$checkbox-label-off-color: #ffffff; +$checkbox-label-off-opacity: 1; + +// input, theme: Light, state: Disabled +$checkbox-disabled-on-background: #7158dd; +$checkbox-disabled-on-width: 18px; +$checkbox-disabled-on-width-raw: 18; +$checkbox-disabled-on-height: 18px; +$checkbox-disabled-on-height-raw: 18; +$checkbox-disabled-on-icon-color: #ffffff; +$checkbox-disabled-on-opacity: 0.30000001192092896; +$checkbox-disabled-on-padding-y: 0px; +$checkbox-disabled-on-padding-x: 0px; +$checkbox-disabled-on-padding-top: 0px; +$checkbox-disabled-on-padding-right: 0px; +$checkbox-disabled-on-padding-bottom: 0px; +$checkbox-disabled-on-padding-left: 0px; +$checkbox-disabled-on-padding-start: 12px; +$checkbox-disabled-on-border-width: 1px; +$checkbox-disabled-on-border-radius: 3px; +$checkbox-disabled-on-border-color: transparent; +$checkbox-disabled-on-box-shadow: none; +$checkbox-disabled-icon-on-width: 12.599609375px; +$checkbox-disabled-icon-on-width-raw: 12.599609375; +$checkbox-disabled-icon-on-height: 12.5999755859375px; +$checkbox-disabled-icon-on-height-raw: 12.5999755859375; +$checkbox-disabled-label-on-spacing: -0.28px; +$checkbox-disabled-label-on-font-family: 'Inter'; +$checkbox-disabled-label-on-font-size: 14px; +$checkbox-disabled-label-on-font-weight: 400; +$checkbox-disabled-label-on-line-height: 1.4285714721679688; +$checkbox-disabled-label-on-letter-spacing: -0.28px; +$checkbox-disabled-label-on-text-align: left; +$checkbox-disabled-label-on-text-decoration: none; +$checkbox-disabled-label-on-text-transform: none; +$checkbox-disabled-label-on-color: #777777; +$checkbox-disabled-label-on-opacity: 1; + +// input, theme: Light, state: Hover +$checkbox-hover-on-background: #258cf2; +$checkbox-hover-on-width: 18px; +$checkbox-hover-on-width-raw: 18; +$checkbox-hover-on-height: 18px; +$checkbox-hover-on-height-raw: 18; +$checkbox-hover-on-icon-color: #ffffff; +$checkbox-hover-on-opacity: 1; +$checkbox-hover-on-padding-y: 0px; +$checkbox-hover-on-padding-x: 0px; +$checkbox-hover-on-padding-top: 0px; +$checkbox-hover-on-padding-right: 0px; +$checkbox-hover-on-padding-bottom: 0px; +$checkbox-hover-on-padding-left: 0px; +$checkbox-hover-on-padding-start: 12px; +$checkbox-hover-on-border-width: 1px; +$checkbox-hover-on-border-radius: 3px; +$checkbox-hover-on-border-color: transparent; +$checkbox-hover-on-box-shadow: none; +$checkbox-hover-icon-on-width: 12.599609375px; +$checkbox-hover-icon-on-width-raw: 12.599609375; +$checkbox-hover-icon-on-height: 12.5999755859375px; +$checkbox-hover-icon-on-height-raw: 12.5999755859375; +$checkbox-hover-label-on-spacing: -0.28px; +$checkbox-hover-label-on-font-family: 'Inter'; +$checkbox-hover-label-on-font-size: 14px; +$checkbox-hover-label-on-font-weight: 400; +$checkbox-hover-label-on-line-height: 1.4285714721679688; +$checkbox-hover-label-on-letter-spacing: -0.28px; +$checkbox-hover-label-on-text-align: left; +$checkbox-hover-label-on-text-decoration: none; +$checkbox-hover-label-on-text-transform: none; +$checkbox-hover-label-on-color: #000000; +$checkbox-hover-label-on-opacity: 1; + +// input, theme: Light, state: Default +$checkbox-on-background: #4c34b6; +$checkbox-on-width: 18px; +$checkbox-on-width-raw: 18; +$checkbox-on-height: 18px; +$checkbox-on-height-raw: 18; +$checkbox-on-icon-color: #ffffff; +$checkbox-on-opacity: 1; +$checkbox-on-padding-y: 0px; +$checkbox-on-padding-x: 0px; +$checkbox-on-padding-top: 0px; +$checkbox-on-padding-right: 0px; +$checkbox-on-padding-bottom: 0px; +$checkbox-on-padding-left: 0px; +$checkbox-on-padding-start: 12px; +$checkbox-on-border-width: 1px; +$checkbox-on-border-radius: 3px; +$checkbox-on-border-color: transparent; +$checkbox-on-box-shadow: none; +$checkbox-icon-on-width: 12.599609375px; +$checkbox-icon-on-width-raw: 12.599609375; +$checkbox-icon-on-height: 12.5999755859375px; +$checkbox-icon-on-height-raw: 12.5999755859375; +$checkbox-label-on-spacing: -0.28px; +$checkbox-label-on-font-family: 'Inter'; +$checkbox-label-on-font-size: 14px; +$checkbox-label-on-font-weight: 400; +$checkbox-label-on-line-height: 1.4285714721679688; +$checkbox-label-on-letter-spacing: -0.28px; +$checkbox-label-on-text-align: left; +$checkbox-label-on-text-decoration: none; +$checkbox-label-on-text-transform: none; +$checkbox-label-on-color: #000000; +$checkbox-label-on-opacity: 1; + +// input, theme: Light, state: Disabled +$checkbox-disabled-off-background: #cccccc; +$checkbox-disabled-off-width: 18px; +$checkbox-disabled-off-width-raw: 18; +$checkbox-disabled-off-height: 18px; +$checkbox-disabled-off-height-raw: 18; +$checkbox-disabled-off-icon-color: #ffffff; +$checkbox-disabled-off-opacity: 0.30000001192092896; +$checkbox-disabled-off-padding-y: 0px; +$checkbox-disabled-off-padding-x: 0px; +$checkbox-disabled-off-padding-top: 0px; +$checkbox-disabled-off-padding-right: 0px; +$checkbox-disabled-off-padding-bottom: 0px; +$checkbox-disabled-off-padding-left: 0px; +$checkbox-disabled-off-padding-start: 12px; +$checkbox-disabled-off-border-width: 1px; +$checkbox-disabled-off-border-radius: 3px; +$checkbox-disabled-off-border-color: transparent; +$checkbox-disabled-off-box-shadow: none; +$checkbox-disabled-icon-off-width: 0px; +$checkbox-disabled-icon-off-width-raw: 0; +$checkbox-disabled-icon-off-height: 0px; +$checkbox-disabled-icon-off-height-raw: 0; +$checkbox-disabled-label-off-spacing: -0.28px; +$checkbox-disabled-label-off-font-family: 'Inter'; +$checkbox-disabled-label-off-font-size: 14px; +$checkbox-disabled-label-off-font-weight: 400; +$checkbox-disabled-label-off-line-height: 1.4285714721679688; +$checkbox-disabled-label-off-letter-spacing: -0.28px; +$checkbox-disabled-label-off-text-align: left; +$checkbox-disabled-label-off-text-decoration: none; +$checkbox-disabled-label-off-text-transform: none; +$checkbox-disabled-label-off-color: #777777; +$checkbox-disabled-label-off-opacity: 1; + +// input, theme: Light, state: Hover +$checkbox-hover-off-background: transparent; +$checkbox-hover-off-width: 18px; +$checkbox-hover-off-width-raw: 18; +$checkbox-hover-off-height: 18px; +$checkbox-hover-off-height-raw: 18; +$checkbox-hover-off-icon-color: #ffffff; +$checkbox-hover-off-opacity: 1; +$checkbox-hover-off-padding-y: 0px; +$checkbox-hover-off-padding-x: 0px; +$checkbox-hover-off-padding-top: 0px; +$checkbox-hover-off-padding-right: 0px; +$checkbox-hover-off-padding-bottom: 0px; +$checkbox-hover-off-padding-left: 0px; +$checkbox-hover-off-padding-start: 12px; +$checkbox-hover-off-border-width: 1px; +$checkbox-hover-off-border-radius: 3px; +$checkbox-hover-off-border-color: #929292; +$checkbox-hover-off-box-shadow: none; +$checkbox-hover-icon-off-width: 0px; +$checkbox-hover-icon-off-width-raw: 0; +$checkbox-hover-icon-off-height: 0px; +$checkbox-hover-icon-off-height-raw: 0; +$checkbox-hover-label-off-spacing: -0.28px; +$checkbox-hover-label-off-font-family: 'Inter'; +$checkbox-hover-label-off-font-size: 14px; +$checkbox-hover-label-off-font-weight: 400; +$checkbox-hover-label-off-line-height: 1.4285714721679688; +$checkbox-hover-label-off-letter-spacing: -0.28px; +$checkbox-hover-label-off-text-align: left; +$checkbox-hover-label-off-text-decoration: none; +$checkbox-hover-label-off-text-transform: none; +$checkbox-hover-label-off-color: #000000; +$checkbox-hover-label-off-opacity: 1; + +// input, theme: Light, state: Default +$checkbox-off-background: transparent; +$checkbox-off-width: 18px; +$checkbox-off-width-raw: 18; +$checkbox-off-height: 18px; +$checkbox-off-height-raw: 18; +$checkbox-off-icon-color: #ffffff; +$checkbox-off-opacity: 1; +$checkbox-off-padding-y: 0px; +$checkbox-off-padding-x: 0px; +$checkbox-off-padding-top: 0px; +$checkbox-off-padding-right: 0px; +$checkbox-off-padding-bottom: 0px; +$checkbox-off-padding-left: 0px; +$checkbox-off-padding-start: 12px; +$checkbox-off-border-width: 1px; +$checkbox-off-border-radius: 3px; +$checkbox-off-border-color: #b3b3b3; +$checkbox-off-box-shadow: none; +$checkbox-icon-off-width: 0px; +$checkbox-icon-off-width-raw: 0; +$checkbox-icon-off-height: 0px; +$checkbox-icon-off-height-raw: 0; +$checkbox-label-off-spacing: -0.28px; +$checkbox-label-off-font-family: 'Inter'; +$checkbox-label-off-font-size: 14px; +$checkbox-label-off-font-weight: 400; +$checkbox-label-off-line-height: 1.4285714721679688; +$checkbox-label-off-letter-spacing: -0.28px; +$checkbox-label-off-text-align: left; +$checkbox-label-off-text-decoration: none; +$checkbox-label-off-text-transform: none; +$checkbox-label-off-color: #555555; +$checkbox-label-off-opacity: 1; + +// Small input +$checkbox-small-off-background: transparent; +$checkbox-small-off-width: 16px; +$checkbox-small-off-width-raw: 16; +$checkbox-small-off-height: 16px; +$checkbox-small-off-height-raw: 16; +$checkbox-small-off-icon-color: #000000; +$checkbox-small-off-opacity: 1; +$checkbox-small-off-padding-y: 0px; +$checkbox-small-off-padding-x: 0px; +$checkbox-small-off-padding-top: 0px; +$checkbox-small-off-padding-right: 0px; +$checkbox-small-off-padding-bottom: 0px; +$checkbox-small-off-padding-left: 0px; +$checkbox-small-off-padding-start: 10px; +$checkbox-small-off-border-width: 1px; +$checkbox-small-off-border-radius: 3px; +$checkbox-small-off-border-color: #000000; +$checkbox-small-off-box-shadow: none; +$checkbox-small-icon-off-width: 0px; +$checkbox-small-icon-off-width-raw: 0; +$checkbox-small-icon-off-height: 0px; +$checkbox-small-icon-off-height-raw: 0; +$checkbox-small-label-off-spacing: -0.24px; +$checkbox-small-label-off-font-family: 'Inter'; +$checkbox-small-label-off-font-size: 12px; +$checkbox-small-label-off-font-weight: 400; +$checkbox-small-label-off-line-height: 1.6666667175292968; +$checkbox-small-label-off-letter-spacing: -0.24px; +$checkbox-small-label-off-text-align: left; +$checkbox-small-label-off-text-decoration: none; +$checkbox-small-label-off-text-transform: none; +$checkbox-small-label-off-color: #555555; +$checkbox-small-label-off-opacity: 1; + +// Medium input +$checkbox-medium-off-background: transparent; +$checkbox-medium-off-width: 18px; +$checkbox-medium-off-width-raw: 18; +$checkbox-medium-off-height: 18px; +$checkbox-medium-off-height-raw: 18; +$checkbox-medium-off-icon-color: #000000; +$checkbox-medium-off-opacity: 1; +$checkbox-medium-off-padding-y: 0px; +$checkbox-medium-off-padding-x: 0px; +$checkbox-medium-off-padding-top: 0px; +$checkbox-medium-off-padding-right: 0px; +$checkbox-medium-off-padding-bottom: 0px; +$checkbox-medium-off-padding-left: 0px; +$checkbox-medium-off-padding-start: 12px; +$checkbox-medium-off-border-width: 1px; +$checkbox-medium-off-border-radius: 3px; +$checkbox-medium-off-border-color: #000000; +$checkbox-medium-off-box-shadow: none; +$checkbox-medium-icon-off-width: 0px; +$checkbox-medium-icon-off-width-raw: 0; +$checkbox-medium-icon-off-height: 0px; +$checkbox-medium-icon-off-height-raw: 0; +$checkbox-medium-label-off-spacing: -0.28px; +$checkbox-medium-label-off-font-family: 'Inter'; +$checkbox-medium-label-off-font-size: 14px; +$checkbox-medium-label-off-font-weight: 400; +$checkbox-medium-label-off-line-height: 1.4285714721679688; +$checkbox-medium-label-off-letter-spacing: -0.28px; +$checkbox-medium-label-off-text-align: left; +$checkbox-medium-label-off-text-decoration: none; +$checkbox-medium-label-off-text-transform: none; +$checkbox-medium-label-off-color: #555555; +$checkbox-medium-label-off-opacity: 1; + +// Large input +$checkbox-large-off-background: transparent; +$checkbox-large-off-width: 20px; +$checkbox-large-off-width-raw: 20; +$checkbox-large-off-height: 20px; +$checkbox-large-off-height-raw: 20; +$checkbox-large-off-icon-color: #000000; +$checkbox-large-off-opacity: 1; +$checkbox-large-off-padding-y: 0px; +$checkbox-large-off-padding-x: 0px; +$checkbox-large-off-padding-top: 0px; +$checkbox-large-off-padding-right: 0px; +$checkbox-large-off-padding-bottom: 0px; +$checkbox-large-off-padding-left: 0px; +$checkbox-large-off-padding-start: 14px; +$checkbox-large-off-border-width: 1px; +$checkbox-large-off-border-radius: 3px; +$checkbox-large-off-border-color: #000000; +$checkbox-large-off-box-shadow: none; +$checkbox-large-icon-off-width: 0px; +$checkbox-large-icon-off-width-raw: 0; +$checkbox-large-icon-off-height: 0px; +$checkbox-large-icon-off-height-raw: 0; +$checkbox-large-label-off-spacing: -0.32px; +$checkbox-large-label-off-font-family: 'Inter'; +$checkbox-large-label-off-font-size: 16px; +$checkbox-large-label-off-font-weight: 400; +$checkbox-large-label-off-line-height: 1.25; +$checkbox-large-label-off-letter-spacing: -0.32px; +$checkbox-large-label-off-text-align: left; +$checkbox-large-label-off-text-decoration: none; +$checkbox-large-label-off-text-transform: none; +$checkbox-large-label-off-color: #555555; +$checkbox-large-label-off-opacity: 1; \ No newline at end of file diff --git a/sass/project/default_vars/defaults.scss b/sass/project/default_vars/defaults.scss new file mode 100644 index 00000000..553d99f9 --- /dev/null +++ b/sass/project/default_vars/defaults.scss @@ -0,0 +1,26 @@ +@import './alerts_vars'; +@import './alerts'; + +@import './buttons_vars'; +@import './buttons'; + +@import './tooltips_vars'; +@import './tooltips'; + +@import './modal_vars'; +@import './modal'; + +@import './inputs_vars'; +@import './inputs'; + +@import './pagination_vars'; +@import './pagination'; + +@import './selects_vars'; +@import './selects'; + +@import './radios_vars'; +@import './radios'; + +@import './checkboxes_vars'; +@import './checkboxes'; \ No newline at end of file diff --git a/sass/project/default_vars/inputs.scss b/sass/project/default_vars/inputs.scss new file mode 100644 index 00000000..e02a44a0 --- /dev/null +++ b/sass/project/default_vars/inputs.scss @@ -0,0 +1,683 @@ +$input-sizes: ( "sm", "md", "lg" ); + +$input-themes: ( "dark", "light" ); + +$input-states: ( "disabled", "error", "complete", "active", "hover", "" ); + +.input { + + // input , theme: Dark, state: Disabled + --input-dark-disabled-background: #cccccc; + --input-dark-disabled-bg: #cccccc; + --input-dark-disabled-padding-y: 12px; + --input-dark-disabled-padding-x: 20px; + --input-dark-disabled-padding-top: 12px; + --input-dark-disabled-padding-right: 20px; + --input-dark-disabled-padding-bottom: 12px; + --input-dark-disabled-padding-left: 20px; + --input-dark-disabled-border-width: 2px; + --input-dark-disabled-border-radius: 4px; + --input-dark-disabled-border-color: transparent; + --input-dark-disabled-font-family: 'Inter'; + --input-dark-disabled-font-size: 14px; + --input-dark-disabled-font-weight: 400; + --input-dark-disabled-line-height: 1.4285714721679688; + --input-dark-disabled-letter-spacing: -0.28px; + --input-dark-disabled-text-align: left; + --input-dark-disabled-text-decoration: none; + --input-dark-disabled-text-transform: none; + --input-dark-disabled-color: #555555; + --input-dark-disabled-box-shadow: none; + --input-label-dark-disabled-spacing: 5px; + --input-label-dark-disabled-font-family: 'Inter'; + --input-label-dark-disabled-font-size: 12px; + --input-label-dark-disabled-font-weight: 400; + --input-label-dark-disabled-line-height: 1.6; + --input-label-dark-disabled-letter-spacing: -0.24px; + --input-label-dark-disabled-text-align: left; + --input-label-dark-disabled-text-decoration: none; + --input-label-dark-disabled-text-transform: none; + --input-label-dark-disabled-color: #ffffff; + --input-icon-dark-disabled-border-width: 2px; + --input-icon-dark-disabled-border-color: #000000; + --input-additional-info-dark-disabled-spacing: 5px; + --input-additional-info-dark-disabled-font-family: 'Inter'; + --input-additional-info-dark-disabled-font-size: 12px; + --input-additional-info-dark-disabled-font-weight: 400; + --input-additional-info-dark-disabled-line-height: 1.6; + --input-additional-info-dark-disabled-letter-spacing: -0.24px; + --input-additional-info-dark-disabled-text-align: left; + --input-additional-info-dark-disabled-text-decoration: none; + --input-additional-info-dark-disabled-text-transform: none; + --input-additional-info-dark-disabled-color: #ffffff; + + // input , theme: Dark, state: Error + --input-dark-error-background: #f8f8f8; + --input-dark-error-bg: #f8f8f8; + --input-dark-error-padding-y: 12px; + --input-dark-error-padding-x: 20px; + --input-dark-error-padding-top: 12px; + --input-dark-error-padding-right: 20px; + --input-dark-error-padding-bottom: 12px; + --input-dark-error-padding-left: 20px; + --input-dark-error-border-width: 2px; + --input-dark-error-border-radius: 4px; + --input-dark-error-border-color: #f35d6c; + --input-dark-error-font-family: 'Inter'; + --input-dark-error-font-size: 14px; + --input-dark-error-font-weight: 400; + --input-dark-error-line-height: 1.4285714721679688; + --input-dark-error-letter-spacing: -0.28px; + --input-dark-error-text-align: left; + --input-dark-error-text-decoration: none; + --input-dark-error-text-transform: none; + --input-dark-error-color: #555555; + --input-dark-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-dark-error-spacing: 5px; + --input-label-dark-error-font-family: 'Inter'; + --input-label-dark-error-font-size: 12px; + --input-label-dark-error-font-weight: 400; + --input-label-dark-error-line-height: 1.6; + --input-label-dark-error-letter-spacing: -0.24px; + --input-label-dark-error-text-align: left; + --input-label-dark-error-text-decoration: none; + --input-label-dark-error-text-transform: none; + --input-label-dark-error-color: #ffffff; + --input-icon-dark-error-border-width: 2px; + --input-icon-dark-error-border-color: #000000; + --input-additional-info-dark-error-spacing: 5px; + --input-additional-info-dark-error-font-family: 'Inter'; + --input-additional-info-dark-error-font-size: 12px; + --input-additional-info-dark-error-font-weight: 400; + --input-additional-info-dark-error-line-height: 1.6; + --input-additional-info-dark-error-letter-spacing: -0.24px; + --input-additional-info-dark-error-text-align: left; + --input-additional-info-dark-error-text-decoration: none; + --input-additional-info-dark-error-text-transform: none; + --input-additional-info-dark-error-color: #f35d6c; + + // input , theme: Dark, state: Complete + --input-dark-complete-background: #f8f8f8; + --input-dark-complete-bg: #f8f8f8; + --input-dark-complete-padding-y: 12px; + --input-dark-complete-padding-x: 20px; + --input-dark-complete-padding-top: 12px; + --input-dark-complete-padding-right: 20px; + --input-dark-complete-padding-bottom: 12px; + --input-dark-complete-padding-left: 20px; + --input-dark-complete-border-width: 2px; + --input-dark-complete-border-radius: 4px; + --input-dark-complete-border-color: transparent; + --input-dark-complete-font-family: 'Inter'; + --input-dark-complete-font-size: 14px; + --input-dark-complete-font-weight: 400; + --input-dark-complete-line-height: 1.4285714721679688; + --input-dark-complete-letter-spacing: -0.28px; + --input-dark-complete-text-align: left; + --input-dark-complete-text-decoration: none; + --input-dark-complete-text-transform: none; + --input-dark-complete-color: #000000; + --input-dark-complete-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-dark-complete-spacing: 5px; + --input-label-dark-complete-font-family: 'Inter'; + --input-label-dark-complete-font-size: 12px; + --input-label-dark-complete-font-weight: 400; + --input-label-dark-complete-line-height: 1.6; + --input-label-dark-complete-letter-spacing: -0.24px; + --input-label-dark-complete-text-align: left; + --input-label-dark-complete-text-decoration: none; + --input-label-dark-complete-text-transform: none; + --input-label-dark-complete-color: #ffffff; + --input-icon-dark-complete-border-width: 2px; + --input-icon-dark-complete-border-color: #000000; + --input-additional-info-dark-complete-spacing: 5px; + --input-additional-info-dark-complete-font-family: 'Inter'; + --input-additional-info-dark-complete-font-size: 12px; + --input-additional-info-dark-complete-font-weight: 400; + --input-additional-info-dark-complete-line-height: 1.6; + --input-additional-info-dark-complete-letter-spacing: -0.24px; + --input-additional-info-dark-complete-text-align: left; + --input-additional-info-dark-complete-text-decoration: none; + --input-additional-info-dark-complete-text-transform: none; + --input-additional-info-dark-complete-color: #ffffff; + + // input , theme: Dark, state: Active + --input-dark-active-background: #ffffff; + --input-dark-active-bg: #ffffff; + --input-dark-active-padding-y: 12px; + --input-dark-active-padding-x: 20px; + --input-dark-active-padding-top: 12px; + --input-dark-active-padding-right: 20px; + --input-dark-active-padding-bottom: 12px; + --input-dark-active-padding-left: 20px; + --input-dark-active-border-width: 2px; + --input-dark-active-border-radius: 4px; + --input-dark-active-border-color: transparent; + --input-dark-active-font-family: 'Inter'; + --input-dark-active-font-size: 14px; + --input-dark-active-font-weight: 400; + --input-dark-active-line-height: 1.4285714721679688; + --input-dark-active-letter-spacing: -0.28px; + --input-dark-active-text-align: left; + --input-dark-active-text-decoration: none; + --input-dark-active-text-transform: none; + --input-dark-active-color: #000000; + --input-dark-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-dark-active-spacing: 5px; + --input-label-dark-active-font-family: 'Inter'; + --input-label-dark-active-font-size: 12px; + --input-label-dark-active-font-weight: 400; + --input-label-dark-active-line-height: 1.6; + --input-label-dark-active-letter-spacing: -0.24px; + --input-label-dark-active-text-align: left; + --input-label-dark-active-text-decoration: none; + --input-label-dark-active-text-transform: none; + --input-label-dark-active-color: #ffffff; + --input-icon-dark-active-border-width: 2px; + --input-icon-dark-active-border-color: #000000; + --input-additional-info-dark-active-spacing: 5px; + --input-additional-info-dark-active-font-family: 'Inter'; + --input-additional-info-dark-active-font-size: 12px; + --input-additional-info-dark-active-font-weight: 400; + --input-additional-info-dark-active-line-height: 1.6; + --input-additional-info-dark-active-letter-spacing: -0.24px; + --input-additional-info-dark-active-text-align: left; + --input-additional-info-dark-active-text-decoration: none; + --input-additional-info-dark-active-text-transform: none; + --input-additional-info-dark-active-color: #ffffff; + + // input , theme: Dark, state: Hover + --input-dark-hover-background: #ffffff; + --input-dark-hover-bg: #ffffff; + --input-dark-hover-padding-y: 12px; + --input-dark-hover-padding-x: 20px; + --input-dark-hover-padding-top: 12px; + --input-dark-hover-padding-right: 20px; + --input-dark-hover-padding-bottom: 12px; + --input-dark-hover-padding-left: 20px; + --input-dark-hover-border-width: 2px; + --input-dark-hover-border-radius: 4px; + --input-dark-hover-border-color: transparent; + --input-dark-hover-font-family: 'Inter'; + --input-dark-hover-font-size: 14px; + --input-dark-hover-font-weight: 400; + --input-dark-hover-line-height: 1.4285714721679688; + --input-dark-hover-letter-spacing: -0.28px; + --input-dark-hover-text-align: left; + --input-dark-hover-text-decoration: none; + --input-dark-hover-text-transform: none; + --input-dark-hover-color: #555555; + --input-dark-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-dark-hover-spacing: 5px; + --input-label-dark-hover-font-family: 'Inter'; + --input-label-dark-hover-font-size: 12px; + --input-label-dark-hover-font-weight: 400; + --input-label-dark-hover-line-height: 1.6; + --input-label-dark-hover-letter-spacing: -0.24px; + --input-label-dark-hover-text-align: left; + --input-label-dark-hover-text-decoration: none; + --input-label-dark-hover-text-transform: none; + --input-label-dark-hover-color: #ffffff; + --input-icon-dark-hover-border-width: 2px; + --input-icon-dark-hover-border-color: #000000; + --input-additional-info-dark-hover-spacing: 5px; + --input-additional-info-dark-hover-font-family: 'Inter'; + --input-additional-info-dark-hover-font-size: 12px; + --input-additional-info-dark-hover-font-weight: 400; + --input-additional-info-dark-hover-line-height: 1.6; + --input-additional-info-dark-hover-letter-spacing: -0.24px; + --input-additional-info-dark-hover-text-align: left; + --input-additional-info-dark-hover-text-decoration: none; + --input-additional-info-dark-hover-text-transform: none; + --input-additional-info-dark-hover-color: #ffffff; + + // input , theme: Dark, state: Default + --input-dark-background: #f8f8f8; + --input-dark-bg: #f8f8f8; + --input-dark-padding-y: 12px; + --input-dark-padding-x: 20px; + --input-dark-padding-top: 12px; + --input-dark-padding-right: 20px; + --input-dark-padding-bottom: 12px; + --input-dark-padding-left: 20px; + --input-dark-border-width: 2px; + --input-dark-border-radius: 4px; + --input-dark-border-color: transparent; + --input-dark-font-family: 'Inter'; + --input-dark-font-size: 14px; + --input-dark-font-weight: 400; + --input-dark-line-height: 1.4285714721679688; + --input-dark-letter-spacing: -0.28px; + --input-dark-text-align: left; + --input-dark-text-decoration: none; + --input-dark-text-transform: none; + --input-dark-color: #555555; + --input-dark-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-dark-spacing: 5px; + --input-label-dark-font-family: 'Inter'; + --input-label-dark-font-size: 12px; + --input-label-dark-font-weight: 400; + --input-label-dark-line-height: 1.6; + --input-label-dark-letter-spacing: -0.24px; + --input-label-dark-text-align: left; + --input-label-dark-text-decoration: none; + --input-label-dark-text-transform: none; + --input-label-dark-color: #ffffff; + --input-icon-dark-border-width: 2px; + --input-icon-dark-border-color: #000000; + --input-additional-info-dark-spacing: 5px; + --input-additional-info-dark-font-family: 'Inter'; + --input-additional-info-dark-font-size: 12px; + --input-additional-info-dark-font-weight: 400; + --input-additional-info-dark-line-height: 1.6; + --input-additional-info-dark-letter-spacing: -0.24px; + --input-additional-info-dark-text-align: left; + --input-additional-info-dark-text-decoration: none; + --input-additional-info-dark-text-transform: none; + --input-additional-info-dark-color: #ffffff; + + // input , theme: Light, state: Disabled + --input-disabled-background: #f8f8f8; + --input-disabled-bg: #f8f8f8; + --input-disabled-padding-y: 12px; + --input-disabled-padding-x: 20px; + --input-disabled-padding-top: 12px; + --input-disabled-padding-right: 20px; + --input-disabled-padding-bottom: 12px; + --input-disabled-padding-left: 20px; + --input-disabled-border-width: 2px; + --input-disabled-border-radius: 4px; + --input-disabled-border-color: transparent; + --input-disabled-font-family: 'Inter'; + --input-disabled-font-size: 14px; + --input-disabled-font-weight: 400; + --input-disabled-line-height: 1.4285714721679688; + --input-disabled-letter-spacing: -0.28px; + --input-disabled-text-align: left; + --input-disabled-text-decoration: none; + --input-disabled-text-transform: none; + --input-disabled-color: #777777; + --input-disabled-box-shadow: none; + --input-label-disabled-spacing: 5px; + --input-label-disabled-font-family: 'Inter'; + --input-label-disabled-font-size: 12px; + --input-label-disabled-font-weight: 400; + --input-label-disabled-line-height: 1.6; + --input-label-disabled-letter-spacing: -0.24px; + --input-label-disabled-text-align: left; + --input-label-disabled-text-decoration: none; + --input-label-disabled-text-transform: none; + --input-label-disabled-color: #777777; + --input-icon-disabled-border-width: 2px; + --input-icon-disabled-border-color: #000000; + --input-additional-info-disabled-spacing: 5px; + --input-additional-info-disabled-font-family: 'Inter'; + --input-additional-info-disabled-font-size: 12px; + --input-additional-info-disabled-font-weight: 400; + --input-additional-info-disabled-line-height: 1.6; + --input-additional-info-disabled-letter-spacing: -0.24px; + --input-additional-info-disabled-text-align: left; + --input-additional-info-disabled-text-decoration: none; + --input-additional-info-disabled-text-transform: none; + --input-additional-info-disabled-color: #777777; + + // input , theme: Light, state: Error + --input-error-background: #ffffff; + --input-error-bg: #ffffff; + --input-error-padding-y: 12px; + --input-error-padding-x: 20px; + --input-error-padding-top: 12px; + --input-error-padding-right: 20px; + --input-error-padding-bottom: 12px; + --input-error-padding-left: 20px; + --input-error-border-width: 2px; + --input-error-border-radius: 4px; + --input-error-border-color: #dc3545; + --input-error-font-family: 'Inter'; + --input-error-font-size: 14px; + --input-error-font-weight: 400; + --input-error-line-height: 1.4285714721679688; + --input-error-letter-spacing: -0.28px; + --input-error-text-align: left; + --input-error-text-decoration: none; + --input-error-text-transform: none; + --input-error-color: #777777; + --input-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-error-spacing: 5px; + --input-label-error-font-family: 'Inter'; + --input-label-error-font-size: 12px; + --input-label-error-font-weight: 400; + --input-label-error-line-height: 1.6; + --input-label-error-letter-spacing: -0.24px; + --input-label-error-text-align: left; + --input-label-error-text-decoration: none; + --input-label-error-text-transform: none; + --input-label-error-color: #555555; + --input-icon-error-border-width: 2px; + --input-icon-error-border-color: #000000; + --input-additional-info-error-spacing: 5px; + --input-additional-info-error-font-family: 'Inter'; + --input-additional-info-error-font-size: 12px; + --input-additional-info-error-font-weight: 400; + --input-additional-info-error-line-height: 1.6; + --input-additional-info-error-letter-spacing: -0.24px; + --input-additional-info-error-text-align: left; + --input-additional-info-error-text-decoration: none; + --input-additional-info-error-text-transform: none; + --input-additional-info-error-color: #dc3545; + + // input , theme: Light, state: Complete + --input-complete-background: #ffffff; + --input-complete-bg: #ffffff; + --input-complete-padding-y: 12px; + --input-complete-padding-x: 20px; + --input-complete-padding-top: 12px; + --input-complete-padding-right: 20px; + --input-complete-padding-bottom: 12px; + --input-complete-padding-left: 20px; + --input-complete-border-width: 2px; + --input-complete-border-radius: 4px; + --input-complete-border-color: #e8e8e8; + --input-complete-font-family: 'Inter'; + --input-complete-font-size: 14px; + --input-complete-font-weight: 400; + --input-complete-line-height: 1.4285714721679688; + --input-complete-letter-spacing: -0.28px; + --input-complete-text-align: left; + --input-complete-text-decoration: none; + --input-complete-text-transform: none; + --input-complete-color: #000000; + --input-complete-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-complete-spacing: 5px; + --input-label-complete-font-family: 'Inter'; + --input-label-complete-font-size: 12px; + --input-label-complete-font-weight: 400; + --input-label-complete-line-height: 1.6; + --input-label-complete-letter-spacing: -0.24px; + --input-label-complete-text-align: left; + --input-label-complete-text-decoration: none; + --input-label-complete-text-transform: none; + --input-label-complete-color: #555555; + --input-icon-complete-border-width: 2px; + --input-icon-complete-border-color: #000000; + --input-additional-info-complete-spacing: 5px; + --input-additional-info-complete-font-family: 'Inter'; + --input-additional-info-complete-font-size: 12px; + --input-additional-info-complete-font-weight: 400; + --input-additional-info-complete-line-height: 1.6; + --input-additional-info-complete-letter-spacing: -0.24px; + --input-additional-info-complete-text-align: left; + --input-additional-info-complete-text-decoration: none; + --input-additional-info-complete-text-transform: none; + --input-additional-info-complete-color: #777777; + + // input , theme: Light, state: Active + --input-active-background: #ffffff; + --input-active-bg: #ffffff; + --input-active-padding-y: 12px; + --input-active-padding-x: 20px; + --input-active-padding-top: 12px; + --input-active-padding-right: 20px; + --input-active-padding-bottom: 12px; + --input-active-padding-left: 20px; + --input-active-border-width: 2px; + --input-active-border-radius: 4px; + --input-active-border-color: #929292; + --input-active-font-family: 'Inter'; + --input-active-font-size: 14px; + --input-active-font-weight: 400; + --input-active-line-height: 1.4285714721679688; + --input-active-letter-spacing: -0.28px; + --input-active-text-align: left; + --input-active-text-decoration: none; + --input-active-text-transform: none; + --input-active-color: #000000; + --input-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-active-spacing: 5px; + --input-label-active-font-family: 'Inter'; + --input-label-active-font-size: 12px; + --input-label-active-font-weight: 400; + --input-label-active-line-height: 1.6; + --input-label-active-letter-spacing: -0.24px; + --input-label-active-text-align: left; + --input-label-active-text-decoration: none; + --input-label-active-text-transform: none; + --input-label-active-color: #000000; + --input-icon-active-border-width: 2px; + --input-icon-active-border-color: #000000; + --input-additional-info-active-spacing: 5px; + --input-additional-info-active-font-family: 'Inter'; + --input-additional-info-active-font-size: 12px; + --input-additional-info-active-font-weight: 400; + --input-additional-info-active-line-height: 1.6; + --input-additional-info-active-letter-spacing: -0.24px; + --input-additional-info-active-text-align: left; + --input-additional-info-active-text-decoration: none; + --input-additional-info-active-text-transform: none; + --input-additional-info-active-color: #777777; + + // input , theme: Light, state: Hover + --input-hover-background: #ffffff; + --input-hover-bg: #ffffff; + --input-hover-padding-y: 12px; + --input-hover-padding-x: 20px; + --input-hover-padding-top: 12px; + --input-hover-padding-right: 20px; + --input-hover-padding-bottom: 12px; + --input-hover-padding-left: 20px; + --input-hover-border-width: 2px; + --input-hover-border-radius: 4px; + --input-hover-border-color: #b3b3b3; + --input-hover-font-family: 'Inter'; + --input-hover-font-size: 14px; + --input-hover-font-weight: 400; + --input-hover-line-height: 1.4285714721679688; + --input-hover-letter-spacing: -0.28px; + --input-hover-text-align: left; + --input-hover-text-decoration: none; + --input-hover-text-transform: none; + --input-hover-color: #777777; + --input-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-hover-spacing: 5px; + --input-label-hover-font-family: 'Inter'; + --input-label-hover-font-size: 12px; + --input-label-hover-font-weight: 400; + --input-label-hover-line-height: 1.6; + --input-label-hover-letter-spacing: -0.24px; + --input-label-hover-text-align: left; + --input-label-hover-text-decoration: none; + --input-label-hover-text-transform: none; + --input-label-hover-color: #555555; + --input-icon-hover-border-width: 2px; + --input-icon-hover-border-color: #000000; + --input-additional-info-hover-spacing: 5px; + --input-additional-info-hover-font-family: 'Inter'; + --input-additional-info-hover-font-size: 12px; + --input-additional-info-hover-font-weight: 400; + --input-additional-info-hover-line-height: 1.6; + --input-additional-info-hover-letter-spacing: -0.24px; + --input-additional-info-hover-text-align: left; + --input-additional-info-hover-text-decoration: none; + --input-additional-info-hover-text-transform: none; + --input-additional-info-hover-color: #777777; + + // input , theme: Light, state: Default + --input-background: #ffffff; + --input-bg: #ffffff; + --input-padding-y: 12px; + --input-padding-x: 20px; + --input-padding-top: 12px; + --input-padding-right: 20px; + --input-padding-bottom: 12px; + --input-padding-left: 20px; + --input-border-width: 3px; + --input-border-radius: 4px; + --input-border-color: #b3b3b3; + --input-font-family: 'Inter'; + --input-font-size: 14px; + --input-font-weight: 400; + --input-line-height: 1.4285714721679688; + --input-letter-spacing: -0.28px; + --input-text-align: left; + --input-text-decoration: none; + --input-text-transform: none; + --input-color: #777777; + --input-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --input-label-spacing: 5px; + --input-label-font-family: 'Inter'; + --input-label-font-size: 12px; + --input-label-font-weight: 400; + --input-label-line-height: 1.6; + --input-label-letter-spacing: -0.24px; + --input-label-text-align: left; + --input-label-text-decoration: none; + --input-label-text-transform: none; + --input-label-color: #555555; + --input-icon-border-width: 2px; + --input-icon-border-color: #000000; + --input-additional-info-spacing: 5px; + --input-additional-info-font-family: 'Inter'; + --input-additional-info-font-size: 12px; + --input-additional-info-font-weight: 400; + --input-additional-info-line-height: 1.6; + --input-additional-info-letter-spacing: -0.24px; + --input-additional-info-text-align: left; + --input-additional-info-text-decoration: none; + --input-additional-info-text-transform: none; + --input-additional-info-color: #777777; + + // input Small falsefalse + --input-small-background: transparent; + --input-small-bg: transparent; + --input-small-padding-y: 10px; + --input-small-padding-x: 16px; + --input-small-padding-top: 10px; + --input-small-padding-right: 16px; + --input-small-padding-bottom: 10px; + --input-small-padding-left: 16px; + --input-small-border-width: 1px; + --input-small-border-radius: 4px; + --input-small-border-color: #000000; + --input-small-font-family: 'Inter'; + --input-small-font-size: 12px; + --input-small-font-weight: 400; + --input-small-line-height: 1.6666667175292968; + --input-small-letter-spacing: -0.24px; + --input-small-text-align: left; + --input-small-text-decoration: none; + --input-small-text-transform: none; + --input-small-color: #555555; + --input-small-box-shadow: none; + --input-small-label-spacing: 2px; + --input-small-label-font-family: 'Inter'; + --input-small-label-font-size: 12px; + --input-small-label-font-weight: 400; + --input-small-label-line-height: 1.6; + --input-small-label-letter-spacing: -0.24px; + --input-small-label-text-align: left; + --input-small-label-text-decoration: none; + --input-small-label-text-transform: none; + --input-small-label-color: #555555; + --input-small-icon-border-width: 2px; + --input-small-icon-border-color: #000000; + --input-small-additional-info-spacing: 2px; + --input-small-additional-info-font-family: 'Inter'; + --input-small-additional-info-font-size: 12px; + --input-small-additional-info-font-weight: 400; + --input-small-additional-info-line-height: 1.6; + --input-small-additional-info-letter-spacing: -0.24px; + --input-small-additional-info-text-align: left; + --input-small-additional-info-text-decoration: none; + --input-small-additional-info-text-transform: none; + --input-small-additional-info-color: #555555; + + // input Medium falsefalse + --input-medium-background: transparent; + --input-medium-bg: transparent; + --input-medium-padding-y: 12px; + --input-medium-padding-x: 20px; + --input-medium-padding-top: 12px; + --input-medium-padding-right: 20px; + --input-medium-padding-bottom: 12px; + --input-medium-padding-left: 20px; + --input-medium-border-width: 2px; + --input-medium-border-radius: 4px; + --input-medium-border-color: #000000; + --input-medium-font-family: 'Inter'; + --input-medium-font-size: 14px; + --input-medium-font-weight: 400; + --input-medium-line-height: 1.4285714721679688; + --input-medium-letter-spacing: -0.28px; + --input-medium-text-align: left; + --input-medium-text-decoration: none; + --input-medium-text-transform: none; + --input-medium-color: #555555; + --input-medium-box-shadow: none; + --input-medium-label-spacing: 5px; + --input-medium-label-font-family: 'Inter'; + --input-medium-label-font-size: 12px; + --input-medium-label-font-weight: 400; + --input-medium-label-line-height: 1.6; + --input-medium-label-letter-spacing: -0.24px; + --input-medium-label-text-align: left; + --input-medium-label-text-decoration: none; + --input-medium-label-text-transform: none; + --input-medium-label-color: #555555; + --input-medium-icon-border-width: 2px; + --input-medium-icon-border-color: #000000; + --input-medium-additional-info-spacing: 5px; + --input-medium-additional-info-font-family: 'Inter'; + --input-medium-additional-info-font-size: 12px; + --input-medium-additional-info-font-weight: 400; + --input-medium-additional-info-line-height: 1.6; + --input-medium-additional-info-letter-spacing: -0.24px; + --input-medium-additional-info-text-align: left; + --input-medium-additional-info-text-decoration: none; + --input-medium-additional-info-text-transform: none; + --input-medium-additional-info-color: #555555; + + // input Large falsefalse + --input-large-background: transparent; + --input-large-bg: transparent; + --input-large-padding-y: 14px; + --input-large-padding-x: 20px; + --input-large-padding-top: 14px; + --input-large-padding-right: 20px; + --input-large-padding-bottom: 14px; + --input-large-padding-left: 20px; + --input-large-border-width: 1px; + --input-large-border-radius: 4px; + --input-large-border-color: #000000; + --input-large-font-family: 'Inter'; + --input-large-font-size: 16px; + --input-large-font-weight: 400; + --input-large-line-height: 1.25; + --input-large-letter-spacing: -0.32px; + --input-large-text-align: left; + --input-large-text-decoration: none; + --input-large-text-transform: none; + --input-large-color: #555555; + --input-large-box-shadow: none; + --input-large-label-spacing: 5px; + --input-large-label-font-family: 'Inter'; + --input-large-label-font-size: 12px; + --input-large-label-font-weight: 400; + --input-large-label-line-height: 1.6; + --input-large-label-letter-spacing: -0.24px; + --input-large-label-text-align: left; + --input-large-label-text-decoration: none; + --input-large-label-text-transform: none; + --input-large-label-color: #555555; + --input-large-icon-border-width: 2px; + --input-large-icon-border-color: #000000; + --input-large-additional-info-spacing: 5px; + --input-large-additional-info-font-family: 'Inter'; + --input-large-additional-info-font-size: 12px; + --input-large-additional-info-font-weight: 400; + --input-large-additional-info-line-height: 1.6; + --input-large-additional-info-letter-spacing: -0.24px; + --input-large-additional-info-text-align: left; + --input-large-additional-info-text-decoration: none; + --input-large-additional-info-text-transform: none; + --input-large-additional-info-color: #555555; +} \ No newline at end of file diff --git a/sass/project/default_vars/inputs_vars.scss b/sass/project/default_vars/inputs_vars.scss new file mode 100644 index 00000000..bdd04fff --- /dev/null +++ b/sass/project/default_vars/inputs_vars.scss @@ -0,0 +1,674 @@ +// input, theme: Dark, state: Disabled +$input-dark-disabled-background: #cccccc; +$input-dark-disabled-bg: #cccccc; +$input-dark-disabled-padding-y: 12px; +$input-dark-disabled-padding-x: 20px; +$input-dark-disabled-padding-top: 12px; +$input-dark-disabled-padding-right: 20px; +$input-dark-disabled-padding-bottom: 12px; +$input-dark-disabled-padding-left: 20px; +$input-dark-disabled-border-width: 2px; +$input-dark-disabled-border-radius: 4px; +$input-dark-disabled-border-color: transparent; +$input-dark-disabled-font-family: 'Inter'; +$input-dark-disabled-font-size: 14px; +$input-dark-disabled-font-weight: 400; +$input-dark-disabled-line-height: 1.4285714721679688; +$input-dark-disabled-letter-spacing: -0.28px; +$input-dark-disabled-text-align: left; +$input-dark-disabled-text-decoration: none; +$input-dark-disabled-text-transform: none; +$input-dark-disabled-color: #555555; +$input-dark-disabled-box-shadow: none; +$input-label-dark-disabled-spacing: 5px; +$input-label-dark-disabled-font-family: 'Inter'; +$input-label-dark-disabled-font-size: 12px; +$input-label-dark-disabled-font-weight: 400; +$input-label-dark-disabled-line-height: 1.6; +$input-label-dark-disabled-letter-spacing: -0.24px; +$input-label-dark-disabled-text-align: left; +$input-label-dark-disabled-text-decoration: none; +$input-label-dark-disabled-text-transform: none; +$input-label-dark-disabled-color: #ffffff; +$input-icon-dark-disabled-border-width: 2px; +$input-icon-dark-disabled-border-color: #000000; +$input-additional-info-dark-disabled-spacing: 5px; +$input-additional-info-dark-disabled-font-family: 'Inter'; +$input-additional-info-dark-disabled-font-size: 12px; +$input-additional-info-dark-disabled-font-weight: 400; +$input-additional-info-dark-disabled-line-height: 1.6; +$input-additional-info-dark-disabled-letter-spacing: -0.24px; +$input-additional-info-dark-disabled-text-align: left; +$input-additional-info-dark-disabled-text-decoration: none; +$input-additional-info-dark-disabled-text-transform: none; +$input-additional-info-dark-disabled-color: #ffffff; + +// input, theme: Dark, state: Error +$input-dark-error-background: #f8f8f8; +$input-dark-error-bg: #f8f8f8; +$input-dark-error-padding-y: 12px; +$input-dark-error-padding-x: 20px; +$input-dark-error-padding-top: 12px; +$input-dark-error-padding-right: 20px; +$input-dark-error-padding-bottom: 12px; +$input-dark-error-padding-left: 20px; +$input-dark-error-border-width: 2px; +$input-dark-error-border-radius: 4px; +$input-dark-error-border-color: #f35d6c; +$input-dark-error-font-family: 'Inter'; +$input-dark-error-font-size: 14px; +$input-dark-error-font-weight: 400; +$input-dark-error-line-height: 1.4285714721679688; +$input-dark-error-letter-spacing: -0.28px; +$input-dark-error-text-align: left; +$input-dark-error-text-decoration: none; +$input-dark-error-text-transform: none; +$input-dark-error-color: #555555; +$input-dark-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-dark-error-spacing: 5px; +$input-label-dark-error-font-family: 'Inter'; +$input-label-dark-error-font-size: 12px; +$input-label-dark-error-font-weight: 400; +$input-label-dark-error-line-height: 1.6; +$input-label-dark-error-letter-spacing: -0.24px; +$input-label-dark-error-text-align: left; +$input-label-dark-error-text-decoration: none; +$input-label-dark-error-text-transform: none; +$input-label-dark-error-color: #ffffff; +$input-icon-dark-error-border-width: 2px; +$input-icon-dark-error-border-color: #000000; +$input-additional-info-dark-error-spacing: 5px; +$input-additional-info-dark-error-font-family: 'Inter'; +$input-additional-info-dark-error-font-size: 12px; +$input-additional-info-dark-error-font-weight: 400; +$input-additional-info-dark-error-line-height: 1.6; +$input-additional-info-dark-error-letter-spacing: -0.24px; +$input-additional-info-dark-error-text-align: left; +$input-additional-info-dark-error-text-decoration: none; +$input-additional-info-dark-error-text-transform: none; +$input-additional-info-dark-error-color: #f35d6c; + +// input, theme: Dark, state: Complete +$input-dark-complete-background: #f8f8f8; +$input-dark-complete-bg: #f8f8f8; +$input-dark-complete-padding-y: 12px; +$input-dark-complete-padding-x: 20px; +$input-dark-complete-padding-top: 12px; +$input-dark-complete-padding-right: 20px; +$input-dark-complete-padding-bottom: 12px; +$input-dark-complete-padding-left: 20px; +$input-dark-complete-border-width: 2px; +$input-dark-complete-border-radius: 4px; +$input-dark-complete-border-color: transparent; +$input-dark-complete-font-family: 'Inter'; +$input-dark-complete-font-size: 14px; +$input-dark-complete-font-weight: 400; +$input-dark-complete-line-height: 1.4285714721679688; +$input-dark-complete-letter-spacing: -0.28px; +$input-dark-complete-text-align: left; +$input-dark-complete-text-decoration: none; +$input-dark-complete-text-transform: none; +$input-dark-complete-color: #000000; +$input-dark-complete-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-dark-complete-spacing: 5px; +$input-label-dark-complete-font-family: 'Inter'; +$input-label-dark-complete-font-size: 12px; +$input-label-dark-complete-font-weight: 400; +$input-label-dark-complete-line-height: 1.6; +$input-label-dark-complete-letter-spacing: -0.24px; +$input-label-dark-complete-text-align: left; +$input-label-dark-complete-text-decoration: none; +$input-label-dark-complete-text-transform: none; +$input-label-dark-complete-color: #ffffff; +$input-icon-dark-complete-border-width: 2px; +$input-icon-dark-complete-border-color: #000000; +$input-additional-info-dark-complete-spacing: 5px; +$input-additional-info-dark-complete-font-family: 'Inter'; +$input-additional-info-dark-complete-font-size: 12px; +$input-additional-info-dark-complete-font-weight: 400; +$input-additional-info-dark-complete-line-height: 1.6; +$input-additional-info-dark-complete-letter-spacing: -0.24px; +$input-additional-info-dark-complete-text-align: left; +$input-additional-info-dark-complete-text-decoration: none; +$input-additional-info-dark-complete-text-transform: none; +$input-additional-info-dark-complete-color: #ffffff; + +// input, theme: Dark, state: Active +$input-dark-active-background: #ffffff; +$input-dark-active-bg: #ffffff; +$input-dark-active-padding-y: 12px; +$input-dark-active-padding-x: 20px; +$input-dark-active-padding-top: 12px; +$input-dark-active-padding-right: 20px; +$input-dark-active-padding-bottom: 12px; +$input-dark-active-padding-left: 20px; +$input-dark-active-border-width: 2px; +$input-dark-active-border-radius: 4px; +$input-dark-active-border-color: transparent; +$input-dark-active-font-family: 'Inter'; +$input-dark-active-font-size: 14px; +$input-dark-active-font-weight: 400; +$input-dark-active-line-height: 1.4285714721679688; +$input-dark-active-letter-spacing: -0.28px; +$input-dark-active-text-align: left; +$input-dark-active-text-decoration: none; +$input-dark-active-text-transform: none; +$input-dark-active-color: #000000; +$input-dark-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-dark-active-spacing: 5px; +$input-label-dark-active-font-family: 'Inter'; +$input-label-dark-active-font-size: 12px; +$input-label-dark-active-font-weight: 400; +$input-label-dark-active-line-height: 1.6; +$input-label-dark-active-letter-spacing: -0.24px; +$input-label-dark-active-text-align: left; +$input-label-dark-active-text-decoration: none; +$input-label-dark-active-text-transform: none; +$input-label-dark-active-color: #ffffff; +$input-icon-dark-active-border-width: 2px; +$input-icon-dark-active-border-color: #000000; +$input-additional-info-dark-active-spacing: 5px; +$input-additional-info-dark-active-font-family: 'Inter'; +$input-additional-info-dark-active-font-size: 12px; +$input-additional-info-dark-active-font-weight: 400; +$input-additional-info-dark-active-line-height: 1.6; +$input-additional-info-dark-active-letter-spacing: -0.24px; +$input-additional-info-dark-active-text-align: left; +$input-additional-info-dark-active-text-decoration: none; +$input-additional-info-dark-active-text-transform: none; +$input-additional-info-dark-active-color: #ffffff; + +// input, theme: Dark, state: Hover +$input-dark-hover-background: #ffffff; +$input-dark-hover-bg: #ffffff; +$input-dark-hover-padding-y: 12px; +$input-dark-hover-padding-x: 20px; +$input-dark-hover-padding-top: 12px; +$input-dark-hover-padding-right: 20px; +$input-dark-hover-padding-bottom: 12px; +$input-dark-hover-padding-left: 20px; +$input-dark-hover-border-width: 2px; +$input-dark-hover-border-radius: 4px; +$input-dark-hover-border-color: transparent; +$input-dark-hover-font-family: 'Inter'; +$input-dark-hover-font-size: 14px; +$input-dark-hover-font-weight: 400; +$input-dark-hover-line-height: 1.4285714721679688; +$input-dark-hover-letter-spacing: -0.28px; +$input-dark-hover-text-align: left; +$input-dark-hover-text-decoration: none; +$input-dark-hover-text-transform: none; +$input-dark-hover-color: #555555; +$input-dark-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-dark-hover-spacing: 5px; +$input-label-dark-hover-font-family: 'Inter'; +$input-label-dark-hover-font-size: 12px; +$input-label-dark-hover-font-weight: 400; +$input-label-dark-hover-line-height: 1.6; +$input-label-dark-hover-letter-spacing: -0.24px; +$input-label-dark-hover-text-align: left; +$input-label-dark-hover-text-decoration: none; +$input-label-dark-hover-text-transform: none; +$input-label-dark-hover-color: #ffffff; +$input-icon-dark-hover-border-width: 2px; +$input-icon-dark-hover-border-color: #000000; +$input-additional-info-dark-hover-spacing: 5px; +$input-additional-info-dark-hover-font-family: 'Inter'; +$input-additional-info-dark-hover-font-size: 12px; +$input-additional-info-dark-hover-font-weight: 400; +$input-additional-info-dark-hover-line-height: 1.6; +$input-additional-info-dark-hover-letter-spacing: -0.24px; +$input-additional-info-dark-hover-text-align: left; +$input-additional-info-dark-hover-text-decoration: none; +$input-additional-info-dark-hover-text-transform: none; +$input-additional-info-dark-hover-color: #ffffff; + +// input, theme: Dark, state: Default +$input-dark-background: #f8f8f8; +$input-dark-bg: #f8f8f8; +$input-dark-padding-y: 12px; +$input-dark-padding-x: 20px; +$input-dark-padding-top: 12px; +$input-dark-padding-right: 20px; +$input-dark-padding-bottom: 12px; +$input-dark-padding-left: 20px; +$input-dark-border-width: 2px; +$input-dark-border-radius: 4px; +$input-dark-border-color: transparent; +$input-dark-font-family: 'Inter'; +$input-dark-font-size: 14px; +$input-dark-font-weight: 400; +$input-dark-line-height: 1.4285714721679688; +$input-dark-letter-spacing: -0.28px; +$input-dark-text-align: left; +$input-dark-text-decoration: none; +$input-dark-text-transform: none; +$input-dark-color: #555555; +$input-dark-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-dark-spacing: 5px; +$input-label-dark-font-family: 'Inter'; +$input-label-dark-font-size: 12px; +$input-label-dark-font-weight: 400; +$input-label-dark-line-height: 1.6; +$input-label-dark-letter-spacing: -0.24px; +$input-label-dark-text-align: left; +$input-label-dark-text-decoration: none; +$input-label-dark-text-transform: none; +$input-label-dark-color: #ffffff; +$input-icon-dark-border-width: 2px; +$input-icon-dark-border-color: #000000; +$input-additional-info-dark-spacing: 5px; +$input-additional-info-dark-font-family: 'Inter'; +$input-additional-info-dark-font-size: 12px; +$input-additional-info-dark-font-weight: 400; +$input-additional-info-dark-line-height: 1.6; +$input-additional-info-dark-letter-spacing: -0.24px; +$input-additional-info-dark-text-align: left; +$input-additional-info-dark-text-decoration: none; +$input-additional-info-dark-text-transform: none; +$input-additional-info-dark-color: #ffffff; + +// input, theme: Light, state: Disabled +$input-disabled-background: #f8f8f8; +$input-disabled-bg: #f8f8f8; +$input-disabled-padding-y: 12px; +$input-disabled-padding-x: 20px; +$input-disabled-padding-top: 12px; +$input-disabled-padding-right: 20px; +$input-disabled-padding-bottom: 12px; +$input-disabled-padding-left: 20px; +$input-disabled-border-width: 2px; +$input-disabled-border-radius: 4px; +$input-disabled-border-color: transparent; +$input-disabled-font-family: 'Inter'; +$input-disabled-font-size: 14px; +$input-disabled-font-weight: 400; +$input-disabled-line-height: 1.4285714721679688; +$input-disabled-letter-spacing: -0.28px; +$input-disabled-text-align: left; +$input-disabled-text-decoration: none; +$input-disabled-text-transform: none; +$input-disabled-color: #777777; +$input-disabled-box-shadow: none; +$input-label-disabled-spacing: 5px; +$input-label-disabled-font-family: 'Inter'; +$input-label-disabled-font-size: 12px; +$input-label-disabled-font-weight: 400; +$input-label-disabled-line-height: 1.6; +$input-label-disabled-letter-spacing: -0.24px; +$input-label-disabled-text-align: left; +$input-label-disabled-text-decoration: none; +$input-label-disabled-text-transform: none; +$input-label-disabled-color: #777777; +$input-icon-disabled-border-width: 2px; +$input-icon-disabled-border-color: #000000; +$input-additional-info-disabled-spacing: 5px; +$input-additional-info-disabled-font-family: 'Inter'; +$input-additional-info-disabled-font-size: 12px; +$input-additional-info-disabled-font-weight: 400; +$input-additional-info-disabled-line-height: 1.6; +$input-additional-info-disabled-letter-spacing: -0.24px; +$input-additional-info-disabled-text-align: left; +$input-additional-info-disabled-text-decoration: none; +$input-additional-info-disabled-text-transform: none; +$input-additional-info-disabled-color: #777777; + +// input, theme: Light, state: Error +$input-error-background: #ffffff; +$input-error-bg: #ffffff; +$input-error-padding-y: 12px; +$input-error-padding-x: 20px; +$input-error-padding-top: 12px; +$input-error-padding-right: 20px; +$input-error-padding-bottom: 12px; +$input-error-padding-left: 20px; +$input-error-border-width: 2px; +$input-error-border-radius: 4px; +$input-error-border-color: #dc3545; +$input-error-font-family: 'Inter'; +$input-error-font-size: 14px; +$input-error-font-weight: 400; +$input-error-line-height: 1.4285714721679688; +$input-error-letter-spacing: -0.28px; +$input-error-text-align: left; +$input-error-text-decoration: none; +$input-error-text-transform: none; +$input-error-color: #777777; +$input-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-error-spacing: 5px; +$input-label-error-font-family: 'Inter'; +$input-label-error-font-size: 12px; +$input-label-error-font-weight: 400; +$input-label-error-line-height: 1.6; +$input-label-error-letter-spacing: -0.24px; +$input-label-error-text-align: left; +$input-label-error-text-decoration: none; +$input-label-error-text-transform: none; +$input-label-error-color: #555555; +$input-icon-error-border-width: 2px; +$input-icon-error-border-color: #000000; +$input-additional-info-error-spacing: 5px; +$input-additional-info-error-font-family: 'Inter'; +$input-additional-info-error-font-size: 12px; +$input-additional-info-error-font-weight: 400; +$input-additional-info-error-line-height: 1.6; +$input-additional-info-error-letter-spacing: -0.24px; +$input-additional-info-error-text-align: left; +$input-additional-info-error-text-decoration: none; +$input-additional-info-error-text-transform: none; +$input-additional-info-error-color: #dc3545; + +// input, theme: Light, state: Complete +$input-complete-background: #ffffff; +$input-complete-bg: #ffffff; +$input-complete-padding-y: 12px; +$input-complete-padding-x: 20px; +$input-complete-padding-top: 12px; +$input-complete-padding-right: 20px; +$input-complete-padding-bottom: 12px; +$input-complete-padding-left: 20px; +$input-complete-border-width: 2px; +$input-complete-border-radius: 4px; +$input-complete-border-color: #e8e8e8; +$input-complete-font-family: 'Inter'; +$input-complete-font-size: 14px; +$input-complete-font-weight: 400; +$input-complete-line-height: 1.4285714721679688; +$input-complete-letter-spacing: -0.28px; +$input-complete-text-align: left; +$input-complete-text-decoration: none; +$input-complete-text-transform: none; +$input-complete-color: #000000; +$input-complete-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-complete-spacing: 5px; +$input-label-complete-font-family: 'Inter'; +$input-label-complete-font-size: 12px; +$input-label-complete-font-weight: 400; +$input-label-complete-line-height: 1.6; +$input-label-complete-letter-spacing: -0.24px; +$input-label-complete-text-align: left; +$input-label-complete-text-decoration: none; +$input-label-complete-text-transform: none; +$input-label-complete-color: #555555; +$input-icon-complete-border-width: 2px; +$input-icon-complete-border-color: #000000; +$input-additional-info-complete-spacing: 5px; +$input-additional-info-complete-font-family: 'Inter'; +$input-additional-info-complete-font-size: 12px; +$input-additional-info-complete-font-weight: 400; +$input-additional-info-complete-line-height: 1.6; +$input-additional-info-complete-letter-spacing: -0.24px; +$input-additional-info-complete-text-align: left; +$input-additional-info-complete-text-decoration: none; +$input-additional-info-complete-text-transform: none; +$input-additional-info-complete-color: #777777; + +// input, theme: Light, state: Active +$input-active-background: #ffffff; +$input-active-bg: #ffffff; +$input-active-padding-y: 12px; +$input-active-padding-x: 20px; +$input-active-padding-top: 12px; +$input-active-padding-right: 20px; +$input-active-padding-bottom: 12px; +$input-active-padding-left: 20px; +$input-active-border-width: 2px; +$input-active-border-radius: 4px; +$input-active-border-color: #929292; +$input-active-font-family: 'Inter'; +$input-active-font-size: 14px; +$input-active-font-weight: 400; +$input-active-line-height: 1.4285714721679688; +$input-active-letter-spacing: -0.28px; +$input-active-text-align: left; +$input-active-text-decoration: none; +$input-active-text-transform: none; +$input-active-color: #000000; +$input-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-active-spacing: 5px; +$input-label-active-font-family: 'Inter'; +$input-label-active-font-size: 12px; +$input-label-active-font-weight: 400; +$input-label-active-line-height: 1.6; +$input-label-active-letter-spacing: -0.24px; +$input-label-active-text-align: left; +$input-label-active-text-decoration: none; +$input-label-active-text-transform: none; +$input-label-active-color: #000000; +$input-icon-active-border-width: 2px; +$input-icon-active-border-color: #000000; +$input-additional-info-active-spacing: 5px; +$input-additional-info-active-font-family: 'Inter'; +$input-additional-info-active-font-size: 12px; +$input-additional-info-active-font-weight: 400; +$input-additional-info-active-line-height: 1.6; +$input-additional-info-active-letter-spacing: -0.24px; +$input-additional-info-active-text-align: left; +$input-additional-info-active-text-decoration: none; +$input-additional-info-active-text-transform: none; +$input-additional-info-active-color: #777777; + +// input, theme: Light, state: Hover +$input-hover-background: #ffffff; +$input-hover-bg: #ffffff; +$input-hover-padding-y: 12px; +$input-hover-padding-x: 20px; +$input-hover-padding-top: 12px; +$input-hover-padding-right: 20px; +$input-hover-padding-bottom: 12px; +$input-hover-padding-left: 20px; +$input-hover-border-width: 2px; +$input-hover-border-radius: 4px; +$input-hover-border-color: #b3b3b3; +$input-hover-font-family: 'Inter'; +$input-hover-font-size: 14px; +$input-hover-font-weight: 400; +$input-hover-line-height: 1.4285714721679688; +$input-hover-letter-spacing: -0.28px; +$input-hover-text-align: left; +$input-hover-text-decoration: none; +$input-hover-text-transform: none; +$input-hover-color: #777777; +$input-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-hover-spacing: 5px; +$input-label-hover-font-family: 'Inter'; +$input-label-hover-font-size: 12px; +$input-label-hover-font-weight: 400; +$input-label-hover-line-height: 1.6; +$input-label-hover-letter-spacing: -0.24px; +$input-label-hover-text-align: left; +$input-label-hover-text-decoration: none; +$input-label-hover-text-transform: none; +$input-label-hover-color: #555555; +$input-icon-hover-border-width: 2px; +$input-icon-hover-border-color: #000000; +$input-additional-info-hover-spacing: 5px; +$input-additional-info-hover-font-family: 'Inter'; +$input-additional-info-hover-font-size: 12px; +$input-additional-info-hover-font-weight: 400; +$input-additional-info-hover-line-height: 1.6; +$input-additional-info-hover-letter-spacing: -0.24px; +$input-additional-info-hover-text-align: left; +$input-additional-info-hover-text-decoration: none; +$input-additional-info-hover-text-transform: none; +$input-additional-info-hover-color: #777777; + +// input, theme: Light, state: Default +$input-background: #ffffff; +$input-bg: #ffffff; +$input-padding-y: 12px; +$input-padding-x: 20px; +$input-padding-top: 12px; +$input-padding-right: 20px; +$input-padding-bottom: 12px; +$input-padding-left: 20px; +$input-border-width: 3px; +$input-border-radius: 4px; +$input-border-color: #b3b3b3; +$input-font-family: 'Inter'; +$input-font-size: 14px; +$input-font-weight: 400; +$input-line-height: 1.4285714721679688; +$input-letter-spacing: -0.28px; +$input-text-align: left; +$input-text-decoration: none; +$input-text-transform: none; +$input-color: #777777; +$input-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$input-label-spacing: 5px; +$input-label-font-family: 'Inter'; +$input-label-font-size: 12px; +$input-label-font-weight: 400; +$input-label-line-height: 1.6; +$input-label-letter-spacing: -0.24px; +$input-label-text-align: left; +$input-label-text-decoration: none; +$input-label-text-transform: none; +$input-label-color: #555555; +$input-icon-border-width: 2px; +$input-icon-border-color: #000000; +$input-additional-info-spacing: 5px; +$input-additional-info-font-family: 'Inter'; +$input-additional-info-font-size: 12px; +$input-additional-info-font-weight: 400; +$input-additional-info-line-height: 1.6; +$input-additional-info-letter-spacing: -0.24px; +$input-additional-info-text-align: left; +$input-additional-info-text-decoration: none; +$input-additional-info-text-transform: none; +$input-additional-info-color: #777777; + +// Small input +$input-small-background: transparent; +$input-small-bg: transparent; +$input-small-padding-y: 10px; +$input-small-padding-x: 16px; +$input-small-padding-top: 10px; +$input-small-padding-right: 16px; +$input-small-padding-bottom: 10px; +$input-small-padding-left: 16px; +$input-small-border-width: 1px; +$input-small-border-radius: 4px; +$input-small-border-color: #000000; +$input-small-font-family: 'Inter'; +$input-small-font-size: 12px; +$input-small-font-weight: 400; +$input-small-line-height: 1.6666667175292968; +$input-small-letter-spacing: -0.24px; +$input-small-text-align: left; +$input-small-text-decoration: none; +$input-small-text-transform: none; +$input-small-color: #555555; +$input-small-box-shadow: none; +$input-small-label-spacing: 2px; +$input-small-label-font-family: 'Inter'; +$input-small-label-font-size: 12px; +$input-small-label-font-weight: 400; +$input-small-label-line-height: 1.6; +$input-small-label-letter-spacing: -0.24px; +$input-small-label-text-align: left; +$input-small-label-text-decoration: none; +$input-small-label-text-transform: none; +$input-small-label-color: #555555; +$input-small-icon-border-width: 2px; +$input-small-icon-border-color: #000000; +$input-small-additional-info-spacing: 2px; +$input-small-additional-info-font-family: 'Inter'; +$input-small-additional-info-font-size: 12px; +$input-small-additional-info-font-weight: 400; +$input-small-additional-info-line-height: 1.6; +$input-small-additional-info-letter-spacing: -0.24px; +$input-small-additional-info-text-align: left; +$input-small-additional-info-text-decoration: none; +$input-small-additional-info-text-transform: none; +$input-small-additional-info-color: #555555; + +// Medium input +$input-medium-background: transparent; +$input-medium-bg: transparent; +$input-medium-padding-y: 12px; +$input-medium-padding-x: 20px; +$input-medium-padding-top: 12px; +$input-medium-padding-right: 20px; +$input-medium-padding-bottom: 12px; +$input-medium-padding-left: 20px; +$input-medium-border-width: 2px; +$input-medium-border-radius: 4px; +$input-medium-border-color: #000000; +$input-medium-font-family: 'Inter'; +$input-medium-font-size: 14px; +$input-medium-font-weight: 400; +$input-medium-line-height: 1.4285714721679688; +$input-medium-letter-spacing: -0.28px; +$input-medium-text-align: left; +$input-medium-text-decoration: none; +$input-medium-text-transform: none; +$input-medium-color: #555555; +$input-medium-box-shadow: none; +$input-medium-label-spacing: 5px; +$input-medium-label-font-family: 'Inter'; +$input-medium-label-font-size: 12px; +$input-medium-label-font-weight: 400; +$input-medium-label-line-height: 1.6; +$input-medium-label-letter-spacing: -0.24px; +$input-medium-label-text-align: left; +$input-medium-label-text-decoration: none; +$input-medium-label-text-transform: none; +$input-medium-label-color: #555555; +$input-medium-icon-border-width: 2px; +$input-medium-icon-border-color: #000000; +$input-medium-additional-info-spacing: 5px; +$input-medium-additional-info-font-family: 'Inter'; +$input-medium-additional-info-font-size: 12px; +$input-medium-additional-info-font-weight: 400; +$input-medium-additional-info-line-height: 1.6; +$input-medium-additional-info-letter-spacing: -0.24px; +$input-medium-additional-info-text-align: left; +$input-medium-additional-info-text-decoration: none; +$input-medium-additional-info-text-transform: none; +$input-medium-additional-info-color: #555555; + +// Large input +$input-large-background: transparent; +$input-large-bg: transparent; +$input-large-padding-y: 14px; +$input-large-padding-x: 20px; +$input-large-padding-top: 14px; +$input-large-padding-right: 20px; +$input-large-padding-bottom: 14px; +$input-large-padding-left: 20px; +$input-large-border-width: 1px; +$input-large-border-radius: 4px; +$input-large-border-color: #000000; +$input-large-font-family: 'Inter'; +$input-large-font-size: 16px; +$input-large-font-weight: 400; +$input-large-line-height: 1.25; +$input-large-letter-spacing: -0.32px; +$input-large-text-align: left; +$input-large-text-decoration: none; +$input-large-text-transform: none; +$input-large-color: #555555; +$input-large-box-shadow: none; +$input-large-label-spacing: 5px; +$input-large-label-font-family: 'Inter'; +$input-large-label-font-size: 12px; +$input-large-label-font-weight: 400; +$input-large-label-line-height: 1.6; +$input-large-label-letter-spacing: -0.24px; +$input-large-label-text-align: left; +$input-large-label-text-decoration: none; +$input-large-label-text-transform: none; +$input-large-label-color: #555555; +$input-large-icon-border-width: 2px; +$input-large-icon-border-color: #000000; +$input-large-additional-info-spacing: 5px; +$input-large-additional-info-font-family: 'Inter'; +$input-large-additional-info-font-size: 12px; +$input-large-additional-info-font-weight: 400; +$input-large-additional-info-line-height: 1.6; +$input-large-additional-info-letter-spacing: -0.24px; +$input-large-additional-info-text-align: left; +$input-large-additional-info-text-decoration: none; +$input-large-additional-info-text-transform: none; +$input-large-additional-info-color: #555555; \ No newline at end of file diff --git a/sass/project/default_vars/modal.scss b/sass/project/default_vars/modal.scss new file mode 100644 index 00000000..a44ae013 --- /dev/null +++ b/sass/project/default_vars/modal.scss @@ -0,0 +1,302 @@ +.modal { + + // modal Default undefinedundefined + --modal-background: #ffffff; + --modal-padding-y: 0px; + --modal-padding-x: 0px; + --modal-padding-top: 0px; + --modal-padding-right: 0px; + --modal-padding-bottom: 0px; + --modal-padding-left: 0px; + --modal-border-width: 1px; + --modal-border-radius: 6px; + --modal-border-radius-sm: 6px; + --modal-border-radius-lg: 6px; + --modal-border-color: transparent; + --modal-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.05000000074505806), 0px 4px 20px rgba(0, 0, 0, 0.10000000149011612); + --modal-header-background: transparent; + --modal-header-padding-y: 20px; + --modal-header-padding-x: 20px; + --modal-header-padding-top: 20px; + --modal-header-padding-right: 24px; + --modal-header-padding-bottom: 0px; + --modal-header-padding-left: 24px; + --modal-header-border-width: 1px; + --modal-header-border-radius: 6px; + --modal-header-border-radius-sm: 6px; + --modal-header-border-radius-lg: 6px; + --modal-header-border-color: transparent; + --modal-header-box-shadow: none; + --modal-title-font-family: 'Inter'; + --modal-title-font-size: 18px; + --modal-title-font-weight: 700; + --modal-title-line-height: 1.6; + --modal-title-letter-spacing: -0.36px; + --modal-title-text-align: center; + --modal-title-text-decoration: none; + --modal-body-background: transparent; + --modal-body-padding-y: 10px; + --modal-body-padding-x: 10px; + --modal-body-padding-top: 10px; + --modal-body-padding-right: 24px; + --modal-body-padding-bottom: 28px; + --modal-body-padding-left: 24px; + --modal-body-border-width: 1px; + --modal-body-border-radius: 0px; + --modal-body-border-radius-sm: 0px; + --modal-body-border-radius-lg: 0px; + --modal-body-border-color: transparent; + --modal-body-box-shadow: none; + --modal-body-font-family: 'Inter'; + --modal-body-font-size: 16px; + --modal-body-font-weight: 400; + --modal-body-line-height: 1.6; + --modal-body-letter-spacing: -0.32px; + --modal-body-text-align: left; + --modal-body-text-decoration: none; + --modal-footer-background: transparent; + --modal-footer-padding-y: 12px; + --modal-footer-padding-x: 12px; + --modal-footer-padding-top: 12px; + --modal-footer-padding-right: 24px; + --modal-footer-padding-bottom: 12px; + --modal-footer-padding-left: 24px; + --modal-footer-border-width: 1px; + --modal-footer-border-radius: 0px; + --modal-footer-border-radius-sm: 0px; + --modal-footer-border-radius-lg: 0px; + --modal-footer-border-color: #e8e8e8; + --modal-footer-box-shadow: none; + --modal-footer-font-family: 'Inter'; + --modal-footer-font-size: 12px; + --modal-footer-font-weight: 400; + --modal-footer-line-height: 1.6; + --modal-footer-letter-spacing: -0.24px; + --modal-footer-text-align: center; + --modal-footer-text-decoration: none; + + // modal Small falsefalse + --modal-small-background: #000000; + --modal-small-padding-y: 0px; + --modal-small-padding-x: 0px; + --modal-small-padding-top: 0px; + --modal-small-padding-right: 0px; + --modal-small-padding-bottom: 0px; + --modal-small-padding-left: 0px; + --modal-small-border-width: 1px; + --modal-small-border-radius: 4px; + --modal-small-border-radius-sm: 4px; + --modal-small-border-radius-lg: 4px; + --modal-small-border-color: transparent; + --modal-small-box-shadow: none; + --modal-small-header-background: transparent; + --modal-small-header-padding-y: 16px; + --modal-small-header-padding-x: 16px; + --modal-small-header-padding-top: 16px; + --modal-small-header-padding-right: 20px; + --modal-small-header-padding-bottom: 16px; + --modal-small-header-padding-left: 20px; + --modal-small-header-border-width: 1px; + --modal-small-header-border-radius: 0px; + --modal-small-header-border-radius-sm: 0px; + --modal-small-header-border-radius-lg: 0px; + --modal-small-header-border-color: #686868; + --modal-small-header-box-shadow: none; + --modal-small-title-font-family: 'Inter'; + --modal-small-title-font-size: 20px; + --modal-small-title-font-weight: 600; + --modal-small-title-line-height: 1.3; + --modal-small-title-letter-spacing: -0.4px; + --modal-small-title-text-align: center; + --modal-small-title-text-decoration: none; + --modal-small-body-background: transparent; + --modal-small-body-padding-y: 18px; + --modal-small-body-padding-x: 18px; + --modal-small-body-padding-top: 18px; + --modal-small-body-padding-right: 20px; + --modal-small-body-padding-bottom: 18px; + --modal-small-body-padding-left: 20px; + --modal-small-body-border-width: 1px; + --modal-small-body-border-radius: 0px; + --modal-small-body-border-radius-sm: 0px; + --modal-small-body-border-radius-lg: 0px; + --modal-small-body-border-color: transparent; + --modal-small-body-box-shadow: none; + --modal-small-body-font-family: 'Inter'; + --modal-small-body-font-size: 14px; + --modal-small-body-font-weight: 600; + --modal-small-body-line-height: 1.2857142639160157; + --modal-small-body-letter-spacing: -0.28px; + --modal-small-body-text-align: left; + --modal-small-body-text-decoration: none; + --modal-small-footer-background: transparent; + --modal-small-footer-padding-y: 12px; + --modal-small-footer-padding-x: 12px; + --modal-small-footer-padding-top: 12px; + --modal-small-footer-padding-right: 20px; + --modal-small-footer-padding-bottom: 12px; + --modal-small-footer-padding-left: 20px; + --modal-small-footer-border-width: 1px; + --modal-small-footer-border-radius: 0px; + --modal-small-footer-border-radius-sm: 0px; + --modal-small-footer-border-radius-lg: 0px; + --modal-small-footer-border-color: #686868; + --modal-small-footer-box-shadow: none; + --modal-small-footer-font-family: 'Inter'; + --modal-small-footer-font-size: 12px; + --modal-small-footer-font-weight: 400; + --modal-small-footer-line-height: 1.6; + --modal-small-footer-letter-spacing: -0.24px; + --modal-small-footer-text-align: center; + --modal-small-footer-text-decoration: none; + + // modal Medium falsefalse + --modal-medium-background: #000000; + --modal-medium-padding-y: 0px; + --modal-medium-padding-x: 0px; + --modal-medium-padding-top: 0px; + --modal-medium-padding-right: 0px; + --modal-medium-padding-bottom: 0px; + --modal-medium-padding-left: 0px; + --modal-medium-border-width: 1px; + --modal-medium-border-radius: 6px; + --modal-medium-border-radius-sm: 6px; + --modal-medium-border-radius-lg: 6px; + --modal-medium-border-color: transparent; + --modal-medium-box-shadow: none; + --modal-medium-header-background: transparent; + --modal-medium-header-padding-y: 20px; + --modal-medium-header-padding-x: 20px; + --modal-medium-header-padding-top: 20px; + --modal-medium-header-padding-right: 24px; + --modal-medium-header-padding-bottom: 20px; + --modal-medium-header-padding-left: 24px; + --modal-medium-header-border-width: 1px; + --modal-medium-header-border-radius: 0px; + --modal-medium-header-border-radius-sm: 0px; + --modal-medium-header-border-radius-lg: 0px; + --modal-medium-header-border-color: #686868; + --modal-medium-header-box-shadow: none; + --modal-medium-title-font-family: 'Inter'; + --modal-medium-title-font-size: 20px; + --modal-medium-title-font-weight: 600; + --modal-medium-title-line-height: 1.3; + --modal-medium-title-letter-spacing: -0.4px; + --modal-medium-title-text-align: center; + --modal-medium-title-text-decoration: none; + --modal-medium-body-background: transparent; + --modal-medium-body-padding-y: 18px; + --modal-medium-body-padding-x: 18px; + --modal-medium-body-padding-top: 18px; + --modal-medium-body-padding-right: 24px; + --modal-medium-body-padding-bottom: 18px; + --modal-medium-body-padding-left: 24px; + --modal-medium-body-border-width: 1px; + --modal-medium-body-border-radius: 0px; + --modal-medium-body-border-radius-sm: 0px; + --modal-medium-body-border-radius-lg: 0px; + --modal-medium-body-border-color: transparent; + --modal-medium-body-box-shadow: none; + --modal-medium-body-font-family: 'Inter'; + --modal-medium-body-font-size: 14px; + --modal-medium-body-font-weight: 600; + --modal-medium-body-line-height: 1.2857142639160157; + --modal-medium-body-letter-spacing: -0.28px; + --modal-medium-body-text-align: left; + --modal-medium-body-text-decoration: none; + --modal-medium-footer-background: transparent; + --modal-medium-footer-padding-y: 12px; + --modal-medium-footer-padding-x: 12px; + --modal-medium-footer-padding-top: 12px; + --modal-medium-footer-padding-right: 24px; + --modal-medium-footer-padding-bottom: 12px; + --modal-medium-footer-padding-left: 24px; + --modal-medium-footer-border-width: 1px; + --modal-medium-footer-border-radius: 0px; + --modal-medium-footer-border-radius-sm: 0px; + --modal-medium-footer-border-radius-lg: 0px; + --modal-medium-footer-border-color: #686868; + --modal-medium-footer-box-shadow: none; + --modal-medium-footer-font-family: 'Inter'; + --modal-medium-footer-font-size: 12px; + --modal-medium-footer-font-weight: 400; + --modal-medium-footer-line-height: 1.6; + --modal-medium-footer-letter-spacing: -0.24px; + --modal-medium-footer-text-align: center; + --modal-medium-footer-text-decoration: none; + + // modal Large falsefalse + --modal-large-background: #000000; + --modal-large-padding-y: 0px; + --modal-large-padding-x: 0px; + --modal-large-padding-top: 0px; + --modal-large-padding-right: 0px; + --modal-large-padding-bottom: 0px; + --modal-large-padding-left: 0px; + --modal-large-border-width: 1px; + --modal-large-border-radius: 8px; + --modal-large-border-radius-sm: 8px; + --modal-large-border-radius-lg: 8px; + --modal-large-border-color: transparent; + --modal-large-box-shadow: none; + --modal-large-header-background: transparent; + --modal-large-header-padding-y: 22px; + --modal-large-header-padding-x: 22px; + --modal-large-header-padding-top: 22px; + --modal-large-header-padding-right: 28px; + --modal-large-header-padding-bottom: 22px; + --modal-large-header-padding-left: 28px; + --modal-large-header-border-width: 1px; + --modal-large-header-border-radius: 0px; + --modal-large-header-border-radius-sm: 0px; + --modal-large-header-border-radius-lg: 0px; + --modal-large-header-border-color: #686868; + --modal-large-header-box-shadow: none; + --modal-large-title-font-family: 'Inter'; + --modal-large-title-font-size: 24px; + --modal-large-title-font-weight: 500; + --modal-large-title-line-height: 1.3; + --modal-large-title-letter-spacing: -0.48px; + --modal-large-title-text-align: center; + --modal-large-title-text-decoration: none; + --modal-large-body-background: transparent; + --modal-large-body-padding-y: 18px; + --modal-large-body-padding-x: 18px; + --modal-large-body-padding-top: 18px; + --modal-large-body-padding-right: 28px; + --modal-large-body-padding-bottom: 18px; + --modal-large-body-padding-left: 28px; + --modal-large-body-border-width: 1px; + --modal-large-body-border-radius: 0px; + --modal-large-body-border-radius-sm: 0px; + --modal-large-body-border-radius-lg: 0px; + --modal-large-body-border-color: transparent; + --modal-large-body-box-shadow: none; + --modal-large-body-font-family: 'Inter'; + --modal-large-body-font-size: 14px; + --modal-large-body-font-weight: 600; + --modal-large-body-line-height: 1.2857142639160157; + --modal-large-body-letter-spacing: -0.28px; + --modal-large-body-text-align: left; + --modal-large-body-text-decoration: none; + --modal-large-footer-background: transparent; + --modal-large-footer-padding-y: 12px; + --modal-large-footer-padding-x: 12px; + --modal-large-footer-padding-top: 12px; + --modal-large-footer-padding-right: 28px; + --modal-large-footer-padding-bottom: 12px; + --modal-large-footer-padding-left: 28px; + --modal-large-footer-border-width: 1px; + --modal-large-footer-border-radius: 0px; + --modal-large-footer-border-radius-sm: 0px; + --modal-large-footer-border-radius-lg: 0px; + --modal-large-footer-border-color: #686868; + --modal-large-footer-box-shadow: none; + --modal-large-footer-font-family: 'Inter'; + --modal-large-footer-font-size: 12px; + --modal-large-footer-font-weight: 400; + --modal-large-footer-line-height: 1.6; + --modal-large-footer-letter-spacing: -0.24px; + --modal-large-footer-text-align: center; + --modal-large-footer-text-decoration: none; +} \ No newline at end of file diff --git a/sass/project/default_vars/modal_vars.scss b/sass/project/default_vars/modal_vars.scss new file mode 100644 index 00000000..323e37b1 --- /dev/null +++ b/sass/project/default_vars/modal_vars.scss @@ -0,0 +1,299 @@ +// Modal +$modal-background: #ffffff; +$modal-padding-y: 0px; +$modal-padding-x: 0px; +$modal-padding-top: 0px; +$modal-padding-right: 0px; +$modal-padding-bottom: 0px; +$modal-padding-left: 0px; +$modal-border-width: 1px; +$modal-border-radius: 6px; +$modal-border-radius-sm: 6px; +$modal-border-radius-lg: 6px; +$modal-border-color: transparent; +$modal-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.05000000074505806), 0px 4px 20px rgba(0, 0, 0, 0.10000000149011612); +$modal-header-background: transparent; +$modal-header-padding-y: 20px; +$modal-header-padding-x: 20px; +$modal-header-padding-top: 20px; +$modal-header-padding-right: 24px; +$modal-header-padding-bottom: 0px; +$modal-header-padding-left: 24px; +$modal-header-border-width: 1px; +$modal-header-border-radius: 6px; +$modal-header-border-radius-sm: 6px; +$modal-header-border-radius-lg: 6px; +$modal-header-border-color: transparent; +$modal-header-box-shadow: none; +$modal-title-font-family: 'Inter'; +$modal-title-font-size: 18px; +$modal-title-font-weight: 700; +$modal-title-line-height: 1.6; +$modal-title-letter-spacing: -0.36px; +$modal-title-text-align: center; +$modal-title-text-decoration: none; +$modal-body-background: transparent; +$modal-body-padding-y: 10px; +$modal-body-padding-x: 10px; +$modal-body-padding-top: 10px; +$modal-body-padding-right: 24px; +$modal-body-padding-bottom: 28px; +$modal-body-padding-left: 24px; +$modal-body-border-width: 1px; +$modal-body-border-radius: 0px; +$modal-body-border-radius-sm: 0px; +$modal-body-border-radius-lg: 0px; +$modal-body-border-color: transparent; +$modal-body-box-shadow: none; +$modal-body-font-family: 'Inter'; +$modal-body-font-size: 16px; +$modal-body-font-weight: 400; +$modal-body-line-height: 1.6; +$modal-body-letter-spacing: -0.32px; +$modal-body-text-align: left; +$modal-body-text-decoration: none; +$modal-footer-background: transparent; +$modal-footer-padding-y: 12px; +$modal-footer-padding-x: 12px; +$modal-footer-padding-top: 12px; +$modal-footer-padding-right: 24px; +$modal-footer-padding-bottom: 12px; +$modal-footer-padding-left: 24px; +$modal-footer-border-width: 1px; +$modal-footer-border-radius: 0px; +$modal-footer-border-radius-sm: 0px; +$modal-footer-border-radius-lg: 0px; +$modal-footer-border-color: #e8e8e8; +$modal-footer-box-shadow: none; +$modal-footer-font-family: 'Inter'; +$modal-footer-font-size: 12px; +$modal-footer-font-weight: 400; +$modal-footer-line-height: 1.6; +$modal-footer-letter-spacing: -0.24px; +$modal-footer-text-align: center; +$modal-footer-text-decoration: none; + +// Modal +$modal-small-background: #000000; +$modal-small-padding-y: 0px; +$modal-small-padding-x: 0px; +$modal-small-padding-top: 0px; +$modal-small-padding-right: 0px; +$modal-small-padding-bottom: 0px; +$modal-small-padding-left: 0px; +$modal-small-border-width: 1px; +$modal-small-border-radius: 4px; +$modal-small-border-radius-sm: 4px; +$modal-small-border-radius-lg: 4px; +$modal-small-border-color: transparent; +$modal-small-box-shadow: none; +$modal-small-header-background: transparent; +$modal-small-header-padding-y: 16px; +$modal-small-header-padding-x: 16px; +$modal-small-header-padding-top: 16px; +$modal-small-header-padding-right: 20px; +$modal-small-header-padding-bottom: 16px; +$modal-small-header-padding-left: 20px; +$modal-small-header-border-width: 1px; +$modal-small-header-border-radius: 0px; +$modal-small-header-border-radius-sm: 0px; +$modal-small-header-border-radius-lg: 0px; +$modal-small-header-border-color: #686868; +$modal-small-header-box-shadow: none; +$modal-small-title-font-family: 'Inter'; +$modal-small-title-font-size: 20px; +$modal-small-title-font-weight: 600; +$modal-small-title-line-height: 1.3; +$modal-small-title-letter-spacing: -0.4px; +$modal-small-title-text-align: center; +$modal-small-title-text-decoration: none; +$modal-small-body-background: transparent; +$modal-small-body-padding-y: 18px; +$modal-small-body-padding-x: 18px; +$modal-small-body-padding-top: 18px; +$modal-small-body-padding-right: 20px; +$modal-small-body-padding-bottom: 18px; +$modal-small-body-padding-left: 20px; +$modal-small-body-border-width: 1px; +$modal-small-body-border-radius: 0px; +$modal-small-body-border-radius-sm: 0px; +$modal-small-body-border-radius-lg: 0px; +$modal-small-body-border-color: transparent; +$modal-small-body-box-shadow: none; +$modal-small-body-font-family: 'Inter'; +$modal-small-body-font-size: 14px; +$modal-small-body-font-weight: 600; +$modal-small-body-line-height: 1.2857142639160157; +$modal-small-body-letter-spacing: -0.28px; +$modal-small-body-text-align: left; +$modal-small-body-text-decoration: none; +$modal-small-footer-background: transparent; +$modal-small-footer-padding-y: 12px; +$modal-small-footer-padding-x: 12px; +$modal-small-footer-padding-top: 12px; +$modal-small-footer-padding-right: 20px; +$modal-small-footer-padding-bottom: 12px; +$modal-small-footer-padding-left: 20px; +$modal-small-footer-border-width: 1px; +$modal-small-footer-border-radius: 0px; +$modal-small-footer-border-radius-sm: 0px; +$modal-small-footer-border-radius-lg: 0px; +$modal-small-footer-border-color: #686868; +$modal-small-footer-box-shadow: none; +$modal-small-footer-font-family: 'Inter'; +$modal-small-footer-font-size: 12px; +$modal-small-footer-font-weight: 400; +$modal-small-footer-line-height: 1.6; +$modal-small-footer-letter-spacing: -0.24px; +$modal-small-footer-text-align: center; +$modal-small-footer-text-decoration: none; + +// Modal +$modal-medium-background: #000000; +$modal-medium-padding-y: 0px; +$modal-medium-padding-x: 0px; +$modal-medium-padding-top: 0px; +$modal-medium-padding-right: 0px; +$modal-medium-padding-bottom: 0px; +$modal-medium-padding-left: 0px; +$modal-medium-border-width: 1px; +$modal-medium-border-radius: 6px; +$modal-medium-border-radius-sm: 6px; +$modal-medium-border-radius-lg: 6px; +$modal-medium-border-color: transparent; +$modal-medium-box-shadow: none; +$modal-medium-header-background: transparent; +$modal-medium-header-padding-y: 20px; +$modal-medium-header-padding-x: 20px; +$modal-medium-header-padding-top: 20px; +$modal-medium-header-padding-right: 24px; +$modal-medium-header-padding-bottom: 20px; +$modal-medium-header-padding-left: 24px; +$modal-medium-header-border-width: 1px; +$modal-medium-header-border-radius: 0px; +$modal-medium-header-border-radius-sm: 0px; +$modal-medium-header-border-radius-lg: 0px; +$modal-medium-header-border-color: #686868; +$modal-medium-header-box-shadow: none; +$modal-medium-title-font-family: 'Inter'; +$modal-medium-title-font-size: 20px; +$modal-medium-title-font-weight: 600; +$modal-medium-title-line-height: 1.3; +$modal-medium-title-letter-spacing: -0.4px; +$modal-medium-title-text-align: center; +$modal-medium-title-text-decoration: none; +$modal-medium-body-background: transparent; +$modal-medium-body-padding-y: 18px; +$modal-medium-body-padding-x: 18px; +$modal-medium-body-padding-top: 18px; +$modal-medium-body-padding-right: 24px; +$modal-medium-body-padding-bottom: 18px; +$modal-medium-body-padding-left: 24px; +$modal-medium-body-border-width: 1px; +$modal-medium-body-border-radius: 0px; +$modal-medium-body-border-radius-sm: 0px; +$modal-medium-body-border-radius-lg: 0px; +$modal-medium-body-border-color: transparent; +$modal-medium-body-box-shadow: none; +$modal-medium-body-font-family: 'Inter'; +$modal-medium-body-font-size: 14px; +$modal-medium-body-font-weight: 600; +$modal-medium-body-line-height: 1.2857142639160157; +$modal-medium-body-letter-spacing: -0.28px; +$modal-medium-body-text-align: left; +$modal-medium-body-text-decoration: none; +$modal-medium-footer-background: transparent; +$modal-medium-footer-padding-y: 12px; +$modal-medium-footer-padding-x: 12px; +$modal-medium-footer-padding-top: 12px; +$modal-medium-footer-padding-right: 24px; +$modal-medium-footer-padding-bottom: 12px; +$modal-medium-footer-padding-left: 24px; +$modal-medium-footer-border-width: 1px; +$modal-medium-footer-border-radius: 0px; +$modal-medium-footer-border-radius-sm: 0px; +$modal-medium-footer-border-radius-lg: 0px; +$modal-medium-footer-border-color: #686868; +$modal-medium-footer-box-shadow: none; +$modal-medium-footer-font-family: 'Inter'; +$modal-medium-footer-font-size: 12px; +$modal-medium-footer-font-weight: 400; +$modal-medium-footer-line-height: 1.6; +$modal-medium-footer-letter-spacing: -0.24px; +$modal-medium-footer-text-align: center; +$modal-medium-footer-text-decoration: none; + +// Modal +$modal-large-background: #000000; +$modal-large-padding-y: 0px; +$modal-large-padding-x: 0px; +$modal-large-padding-top: 0px; +$modal-large-padding-right: 0px; +$modal-large-padding-bottom: 0px; +$modal-large-padding-left: 0px; +$modal-large-border-width: 1px; +$modal-large-border-radius: 8px; +$modal-large-border-radius-sm: 8px; +$modal-large-border-radius-lg: 8px; +$modal-large-border-color: transparent; +$modal-large-box-shadow: none; +$modal-large-header-background: transparent; +$modal-large-header-padding-y: 22px; +$modal-large-header-padding-x: 22px; +$modal-large-header-padding-top: 22px; +$modal-large-header-padding-right: 28px; +$modal-large-header-padding-bottom: 22px; +$modal-large-header-padding-left: 28px; +$modal-large-header-border-width: 1px; +$modal-large-header-border-radius: 0px; +$modal-large-header-border-radius-sm: 0px; +$modal-large-header-border-radius-lg: 0px; +$modal-large-header-border-color: #686868; +$modal-large-header-box-shadow: none; +$modal-large-title-font-family: 'Inter'; +$modal-large-title-font-size: 24px; +$modal-large-title-font-weight: 500; +$modal-large-title-line-height: 1.3; +$modal-large-title-letter-spacing: -0.48px; +$modal-large-title-text-align: center; +$modal-large-title-text-decoration: none; +$modal-large-body-background: transparent; +$modal-large-body-padding-y: 18px; +$modal-large-body-padding-x: 18px; +$modal-large-body-padding-top: 18px; +$modal-large-body-padding-right: 28px; +$modal-large-body-padding-bottom: 18px; +$modal-large-body-padding-left: 28px; +$modal-large-body-border-width: 1px; +$modal-large-body-border-radius: 0px; +$modal-large-body-border-radius-sm: 0px; +$modal-large-body-border-radius-lg: 0px; +$modal-large-body-border-color: transparent; +$modal-large-body-box-shadow: none; +$modal-large-body-font-family: 'Inter'; +$modal-large-body-font-size: 14px; +$modal-large-body-font-weight: 600; +$modal-large-body-line-height: 1.2857142639160157; +$modal-large-body-letter-spacing: -0.28px; +$modal-large-body-text-align: left; +$modal-large-body-text-decoration: none; +$modal-large-footer-background: transparent; +$modal-large-footer-padding-y: 12px; +$modal-large-footer-padding-x: 12px; +$modal-large-footer-padding-top: 12px; +$modal-large-footer-padding-right: 28px; +$modal-large-footer-padding-bottom: 12px; +$modal-large-footer-padding-left: 28px; +$modal-large-footer-border-width: 1px; +$modal-large-footer-border-radius: 0px; +$modal-large-footer-border-radius-sm: 0px; +$modal-large-footer-border-radius-lg: 0px; +$modal-large-footer-border-color: #686868; +$modal-large-footer-box-shadow: none; +$modal-large-footer-font-family: 'Inter'; +$modal-large-footer-font-size: 12px; +$modal-large-footer-font-weight: 400; +$modal-large-footer-line-height: 1.6; +$modal-large-footer-letter-spacing: -0.24px; +$modal-large-footer-text-align: center; +$modal-large-footer-text-decoration: none; \ No newline at end of file diff --git a/sass/project/default_vars/pagination.scss b/sass/project/default_vars/pagination.scss new file mode 100644 index 00000000..dfed72d2 --- /dev/null +++ b/sass/project/default_vars/pagination.scss @@ -0,0 +1,8 @@ +$pagination-sizes: ( ); + +$pagination-themes: ( ); + +$pagination-states: ( ); + +.pagination { +} \ No newline at end of file diff --git a/sass/project/default_vars/pagination_vars.scss b/sass/project/default_vars/pagination_vars.scss new file mode 100644 index 00000000..e69de29b diff --git a/sass/project/default_vars/radios.scss b/sass/project/default_vars/radios.scss new file mode 100644 index 00000000..8fa486ec --- /dev/null +++ b/sass/project/default_vars/radios.scss @@ -0,0 +1,563 @@ +$radio-sizes: ( "sm", "md", "lg" ); + +$radio-themes: ( "dark", "light" ); + +$radio-states: ( "disabled", "hover", "" ); + +.radio { + + // radio , theme: Dark, state: Disabled + --radio-disabled-on-background: #258cf2; + --radio-disabled-on-width: 18px; + --radio-disabled-on-width-raw: 18; + --radio-disabled-on-height: 18px; + --radio-disabled-on-height-raw: 18; + --radio-disabled-on-padding-y: 0px; + --radio-disabled-on-padding-x: 0px; + --radio-disabled-on-padding-top: 0px; + --radio-disabled-on-padding-right: 0px; + --radio-disabled-on-padding-bottom: 0px; + --radio-disabled-on-padding-left: 0px; + --radio-disabled-on-padding-start: 12px; + --radio-disabled-on-border-width: 1px; + --radio-disabled-on-border-radius: 100px; + --radio-disabled-on-border-color: transparent; + --radio-disabled-on-opacity: 0.4000000059604645; + --radio-disabled-on-box-shadow: none; + --radio-disabled-label-on-spacing: -0.28px; + --radio-disabled-label-on-font-family: 'Inter'; + --radio-disabled-label-on-font-size: 14px; + --radio-disabled-label-on-font-weight: 400; + --radio-disabled-label-on-line-height: 1.4285714721679688; + --radio-disabled-label-on-letter-spacing: -0.28px; + --radio-disabled-label-on-text-align: left; + --radio-disabled-label-on-text-decoration: none; + --radio-disabled-label-on-text-transform: none; + --radio-disabled-label-on-color: #ffffff; + --radio-disabled-label-on-opacity: 1; + --radio-disabled-thumb-on-width: 8px; + --radio-disabled-thumb-on-width-raw: 8; + --radio-disabled-thumb-on-height: 8px; + --radio-disabled-thumb-on-height-raw: 8; + --radio-disabled-thumb-on-background: #ffffff; + --radio-disabled-thumb-on-border-width: 1px; + --radio-disabled-thumb-on-border-color: transparent; + + // radio , theme: Dark, state: Hover + --radio-hover-on-background: #0073e6; + --radio-hover-on-width: 18px; + --radio-hover-on-width-raw: 18; + --radio-hover-on-height: 18px; + --radio-hover-on-height-raw: 18; + --radio-hover-on-padding-y: 0px; + --radio-hover-on-padding-x: 0px; + --radio-hover-on-padding-top: 0px; + --radio-hover-on-padding-right: 0px; + --radio-hover-on-padding-bottom: 0px; + --radio-hover-on-padding-left: 0px; + --radio-hover-on-padding-start: 12px; + --radio-hover-on-border-width: 1px; + --radio-hover-on-border-radius: 0px; + --radio-hover-on-border-color: transparent; + --radio-hover-on-opacity: 1; + --radio-hover-on-box-shadow: none; + --radio-hover-label-on-spacing: -0.28px; + --radio-hover-label-on-font-family: 'Inter'; + --radio-hover-label-on-font-size: 14px; + --radio-hover-label-on-font-weight: 400; + --radio-hover-label-on-line-height: 1.4285714721679688; + --radio-hover-label-on-letter-spacing: -0.28px; + --radio-hover-label-on-text-align: left; + --radio-hover-label-on-text-decoration: none; + --radio-hover-label-on-text-transform: none; + --radio-hover-label-on-color: #ffffff; + --radio-hover-label-on-opacity: 1; + --radio-hover-thumb-on-width: 8px; + --radio-hover-thumb-on-width-raw: 8; + --radio-hover-thumb-on-height: 8px; + --radio-hover-thumb-on-height-raw: 8; + --radio-hover-thumb-on-background: #ffffff; + --radio-hover-thumb-on-border-width: 1px; + --radio-hover-thumb-on-border-color: transparent; + + // radio , theme: Dark, state: Default + --radio-on-background: #258cf2; + --radio-on-width: 18px; + --radio-on-width-raw: 18; + --radio-on-height: 18px; + --radio-on-height-raw: 18; + --radio-on-padding-y: 0px; + --radio-on-padding-x: 0px; + --radio-on-padding-top: 0px; + --radio-on-padding-right: 0px; + --radio-on-padding-bottom: 0px; + --radio-on-padding-left: 0px; + --radio-on-padding-start: 12px; + --radio-on-border-width: 1px; + --radio-on-border-radius: 0px; + --radio-on-border-color: transparent; + --radio-on-opacity: 1; + --radio-on-box-shadow: none; + --radio-label-on-spacing: -0.28px; + --radio-label-on-font-family: 'Inter'; + --radio-label-on-font-size: 14px; + --radio-label-on-font-weight: 400; + --radio-label-on-line-height: 1.4285714721679688; + --radio-label-on-letter-spacing: -0.28px; + --radio-label-on-text-align: left; + --radio-label-on-text-decoration: none; + --radio-label-on-text-transform: none; + --radio-label-on-color: #ffffff; + --radio-label-on-opacity: 1; + --radio-thumb-on-width: 8px; + --radio-thumb-on-width-raw: 8; + --radio-thumb-on-height: 8px; + --radio-thumb-on-height-raw: 8; + --radio-thumb-on-background: #ffffff; + --radio-thumb-on-border-width: 1px; + --radio-thumb-on-border-color: transparent; + + // radio , theme: Dark, state: Disabled + --radio-disabled-off-background: #6e6e6e; + --radio-disabled-off-width: 18px; + --radio-disabled-off-width-raw: 18; + --radio-disabled-off-height: 18px; + --radio-disabled-off-height-raw: 18; + --radio-disabled-off-padding-y: 0px; + --radio-disabled-off-padding-x: 0px; + --radio-disabled-off-padding-top: 0px; + --radio-disabled-off-padding-right: 0px; + --radio-disabled-off-padding-bottom: 0px; + --radio-disabled-off-padding-left: 0px; + --radio-disabled-off-padding-start: 12px; + --radio-disabled-off-border-width: 1px; + --radio-disabled-off-border-radius: 100px; + --radio-disabled-off-border-color: transparent; + --radio-disabled-off-opacity: 0.4000000059604645; + --radio-disabled-off-box-shadow: none; + --radio-disabled-label-off-spacing: -0.28px; + --radio-disabled-label-off-font-family: 'Inter'; + --radio-disabled-label-off-font-size: 14px; + --radio-disabled-label-off-font-weight: 400; + --radio-disabled-label-off-line-height: 1.4285714721679688; + --radio-disabled-label-off-letter-spacing: -0.28px; + --radio-disabled-label-off-text-align: left; + --radio-disabled-label-off-text-decoration: none; + --radio-disabled-label-off-text-transform: none; + --radio-disabled-label-off-color: #ffffff; + --radio-disabled-label-off-opacity: 1; + --radio-disabled-thumb-off-width: 8px; + --radio-disabled-thumb-off-width-raw: 8; + --radio-disabled-thumb-off-height: 8px; + --radio-disabled-thumb-off-height-raw: 8; + --radio-disabled-thumb-off-background: #ffffff; + --radio-disabled-thumb-off-border-width: 1px; + --radio-disabled-thumb-off-border-color: transparent; + + // radio , theme: Dark, state: Hover + --radio-hover-off-background: transparent; + --radio-hover-off-width: 18px; + --radio-hover-off-width-raw: 18; + --radio-hover-off-height: 18px; + --radio-hover-off-height-raw: 18; + --radio-hover-off-padding-y: 0px; + --radio-hover-off-padding-x: 0px; + --radio-hover-off-padding-top: 0px; + --radio-hover-off-padding-right: 0px; + --radio-hover-off-padding-bottom: 0px; + --radio-hover-off-padding-left: 0px; + --radio-hover-off-padding-start: 12px; + --radio-hover-off-border-width: 1px; + --radio-hover-off-border-radius: 100px; + --radio-hover-off-border-color: transparent; + --radio-hover-off-opacity: 1; + --radio-hover-off-box-shadow: none; + --radio-hover-label-off-spacing: -0.28px; + --radio-hover-label-off-font-family: 'Inter'; + --radio-hover-label-off-font-size: 14px; + --radio-hover-label-off-font-weight: 400; + --radio-hover-label-off-line-height: 1.4285714721679688; + --radio-hover-label-off-letter-spacing: -0.28px; + --radio-hover-label-off-text-align: left; + --radio-hover-label-off-text-decoration: none; + --radio-hover-label-off-text-transform: none; + --radio-hover-label-off-color: #ffffff; + --radio-hover-label-off-opacity: 1; + --radio-hover-thumb-off-width: 8px; + --radio-hover-thumb-off-width-raw: 8; + --radio-hover-thumb-off-height: 8px; + --radio-hover-thumb-off-height-raw: 8; + --radio-hover-thumb-off-background: #ffffff; + --radio-hover-thumb-off-border-width: 1px; + --radio-hover-thumb-off-border-color: transparent; + + // radio , theme: Dark, state: Default + --radio-off-background: transparent; + --radio-off-width: 18px; + --radio-off-width-raw: 18; + --radio-off-height: 18px; + --radio-off-height-raw: 18; + --radio-off-padding-y: 0px; + --radio-off-padding-x: 0px; + --radio-off-padding-top: 0px; + --radio-off-padding-right: 0px; + --radio-off-padding-bottom: 0px; + --radio-off-padding-left: 0px; + --radio-off-padding-start: 12px; + --radio-off-border-width: 1px; + --radio-off-border-radius: 100px; + --radio-off-border-color: transparent; + --radio-off-opacity: 1; + --radio-off-box-shadow: none; + --radio-label-off-spacing: -0.28px; + --radio-label-off-font-family: 'Inter'; + --radio-label-off-font-size: 14px; + --radio-label-off-font-weight: 400; + --radio-label-off-line-height: 1.4285714721679688; + --radio-label-off-letter-spacing: -0.28px; + --radio-label-off-text-align: left; + --radio-label-off-text-decoration: none; + --radio-label-off-text-transform: none; + --radio-label-off-color: #ffffff; + --radio-label-off-opacity: 1; + --radio-thumb-off-width: 8px; + --radio-thumb-off-width-raw: 8; + --radio-thumb-off-height: 8px; + --radio-thumb-off-height-raw: 8; + --radio-thumb-off-background: #ffffff; + --radio-thumb-off-border-width: 1px; + --radio-thumb-off-border-color: transparent; + + // radio , theme: Light, state: Disabled + --radio-disabled-on-background: #ffce39; + --radio-disabled-on-width: 18px; + --radio-disabled-on-width-raw: 18; + --radio-disabled-on-height: 18px; + --radio-disabled-on-height-raw: 18; + --radio-disabled-on-padding-y: 0px; + --radio-disabled-on-padding-x: 0px; + --radio-disabled-on-padding-top: 0px; + --radio-disabled-on-padding-right: 0px; + --radio-disabled-on-padding-bottom: 0px; + --radio-disabled-on-padding-left: 0px; + --radio-disabled-on-padding-start: 12px; + --radio-disabled-on-border-width: 1px; + --radio-disabled-on-border-radius: 100px; + --radio-disabled-on-border-color: transparent; + --radio-disabled-on-opacity: 0.30000001192092896; + --radio-disabled-on-box-shadow: none; + --radio-disabled-label-on-spacing: -0.28px; + --radio-disabled-label-on-font-family: 'Inter'; + --radio-disabled-label-on-font-size: 14px; + --radio-disabled-label-on-font-weight: 400; + --radio-disabled-label-on-line-height: 1.4285714721679688; + --radio-disabled-label-on-letter-spacing: -0.28px; + --radio-disabled-label-on-text-align: left; + --radio-disabled-label-on-text-decoration: none; + --radio-disabled-label-on-text-transform: none; + --radio-disabled-label-on-color: #777777; + --radio-disabled-label-on-opacity: 1; + --radio-disabled-thumb-on-width: 8px; + --radio-disabled-thumb-on-width-raw: 8; + --radio-disabled-thumb-on-height: 8px; + --radio-disabled-thumb-on-height-raw: 8; + --radio-disabled-thumb-on-background: #ffffff; + --radio-disabled-thumb-on-border-width: 1px; + --radio-disabled-thumb-on-border-color: transparent; + + // radio , theme: Light, state: Hover + --radio-hover-on-background: #e0aa09; + --radio-hover-on-width: 18px; + --radio-hover-on-width-raw: 18; + --radio-hover-on-height: 18px; + --radio-hover-on-height-raw: 18; + --radio-hover-on-padding-y: 0px; + --radio-hover-on-padding-x: 0px; + --radio-hover-on-padding-top: 0px; + --radio-hover-on-padding-right: 0px; + --radio-hover-on-padding-bottom: 0px; + --radio-hover-on-padding-left: 0px; + --radio-hover-on-padding-start: 12px; + --radio-hover-on-border-width: 1px; + --radio-hover-on-border-radius: 0px; + --radio-hover-on-border-color: transparent; + --radio-hover-on-opacity: 1; + --radio-hover-on-box-shadow: none; + --radio-hover-label-on-spacing: -0.28px; + --radio-hover-label-on-font-family: 'Inter'; + --radio-hover-label-on-font-size: 14px; + --radio-hover-label-on-font-weight: 400; + --radio-hover-label-on-line-height: 1.4285714721679688; + --radio-hover-label-on-letter-spacing: -0.28px; + --radio-hover-label-on-text-align: left; + --radio-hover-label-on-text-decoration: none; + --radio-hover-label-on-text-transform: none; + --radio-hover-label-on-color: #000000; + --radio-hover-label-on-opacity: 1; + --radio-hover-thumb-on-width: 8px; + --radio-hover-thumb-on-width-raw: 8; + --radio-hover-thumb-on-height: 8px; + --radio-hover-thumb-on-height-raw: 8; + --radio-hover-thumb-on-background: #ffffff; + --radio-hover-thumb-on-border-width: 1px; + --radio-hover-thumb-on-border-color: transparent; + + // radio , theme: Light, state: Default + --radio-on-background: #ffc107; + --radio-on-width: 18px; + --radio-on-width-raw: 18; + --radio-on-height: 18px; + --radio-on-height-raw: 18; + --radio-on-padding-y: 0px; + --radio-on-padding-x: 0px; + --radio-on-padding-top: 0px; + --radio-on-padding-right: 0px; + --radio-on-padding-bottom: 0px; + --radio-on-padding-left: 0px; + --radio-on-padding-start: 12px; + --radio-on-border-width: 1px; + --radio-on-border-radius: 0px; + --radio-on-border-color: transparent; + --radio-on-opacity: 1; + --radio-on-box-shadow: none; + --radio-label-on-spacing: -0.28px; + --radio-label-on-font-family: 'Inter'; + --radio-label-on-font-size: 14px; + --radio-label-on-font-weight: 400; + --radio-label-on-line-height: 1.4285714721679688; + --radio-label-on-letter-spacing: -0.28px; + --radio-label-on-text-align: left; + --radio-label-on-text-decoration: none; + --radio-label-on-text-transform: none; + --radio-label-on-color: #000000; + --radio-label-on-opacity: 1; + --radio-thumb-on-width: 8px; + --radio-thumb-on-width-raw: 8; + --radio-thumb-on-height: 8px; + --radio-thumb-on-height-raw: 8; + --radio-thumb-on-background: #ffffff; + --radio-thumb-on-border-width: 1px; + --radio-thumb-on-border-color: transparent; + + // radio , theme: Light, state: Disabled + --radio-disabled-off-background: #cccccc; + --radio-disabled-off-width: 18px; + --radio-disabled-off-width-raw: 18; + --radio-disabled-off-height: 18px; + --radio-disabled-off-height-raw: 18; + --radio-disabled-off-padding-y: 0px; + --radio-disabled-off-padding-x: 0px; + --radio-disabled-off-padding-top: 0px; + --radio-disabled-off-padding-right: 0px; + --radio-disabled-off-padding-bottom: 0px; + --radio-disabled-off-padding-left: 0px; + --radio-disabled-off-padding-start: 12px; + --radio-disabled-off-border-width: 1px; + --radio-disabled-off-border-radius: 100px; + --radio-disabled-off-border-color: transparent; + --radio-disabled-off-opacity: 0.30000001192092896; + --radio-disabled-off-box-shadow: none; + --radio-disabled-label-off-spacing: -0.28px; + --radio-disabled-label-off-font-family: 'Inter'; + --radio-disabled-label-off-font-size: 14px; + --radio-disabled-label-off-font-weight: 400; + --radio-disabled-label-off-line-height: 1.4285714721679688; + --radio-disabled-label-off-letter-spacing: -0.28px; + --radio-disabled-label-off-text-align: left; + --radio-disabled-label-off-text-decoration: none; + --radio-disabled-label-off-text-transform: none; + --radio-disabled-label-off-color: #777777; + --radio-disabled-label-off-opacity: 1; + --radio-disabled-thumb-off-width: 8px; + --radio-disabled-thumb-off-width-raw: 8; + --radio-disabled-thumb-off-height: 8px; + --radio-disabled-thumb-off-height-raw: 8; + --radio-disabled-thumb-off-background: #ffffff; + --radio-disabled-thumb-off-border-width: 1px; + --radio-disabled-thumb-off-border-color: transparent; + + // radio , theme: Light, state: Hover + --radio-hover-off-background: transparent; + --radio-hover-off-width: 18px; + --radio-hover-off-width-raw: 18; + --radio-hover-off-height: 18px; + --radio-hover-off-height-raw: 18; + --radio-hover-off-padding-y: 0px; + --radio-hover-off-padding-x: 0px; + --radio-hover-off-padding-top: 0px; + --radio-hover-off-padding-right: 0px; + --radio-hover-off-padding-bottom: 0px; + --radio-hover-off-padding-left: 0px; + --radio-hover-off-padding-start: 12px; + --radio-hover-off-border-width: 1px; + --radio-hover-off-border-radius: 100px; + --radio-hover-off-border-color: transparent; + --radio-hover-off-opacity: 1; + --radio-hover-off-box-shadow: none; + --radio-hover-label-off-spacing: -0.28px; + --radio-hover-label-off-font-family: 'Inter'; + --radio-hover-label-off-font-size: 14px; + --radio-hover-label-off-font-weight: 400; + --radio-hover-label-off-line-height: 1.4285714721679688; + --radio-hover-label-off-letter-spacing: -0.28px; + --radio-hover-label-off-text-align: left; + --radio-hover-label-off-text-decoration: none; + --radio-hover-label-off-text-transform: none; + --radio-hover-label-off-color: #000000; + --radio-hover-label-off-opacity: 1; + --radio-hover-thumb-off-width: 8px; + --radio-hover-thumb-off-width-raw: 8; + --radio-hover-thumb-off-height: 8px; + --radio-hover-thumb-off-height-raw: 8; + --radio-hover-thumb-off-background: #ffffff; + --radio-hover-thumb-off-border-width: 1px; + --radio-hover-thumb-off-border-color: transparent; + + // radio , theme: Light, state: Default + --radio-off-background: transparent; + --radio-off-width: 18px; + --radio-off-width-raw: 18; + --radio-off-height: 18px; + --radio-off-height-raw: 18; + --radio-off-padding-y: 0px; + --radio-off-padding-x: 0px; + --radio-off-padding-top: 0px; + --radio-off-padding-right: 0px; + --radio-off-padding-bottom: 0px; + --radio-off-padding-left: 0px; + --radio-off-padding-start: 12px; + --radio-off-border-width: 1px; + --radio-off-border-radius: 100px; + --radio-off-border-color: transparent; + --radio-off-opacity: 1; + --radio-off-box-shadow: none; + --radio-label-off-spacing: -0.28px; + --radio-label-off-font-family: 'Inter'; + --radio-label-off-font-size: 14px; + --radio-label-off-font-weight: 400; + --radio-label-off-line-height: 1.4285714721679688; + --radio-label-off-letter-spacing: -0.28px; + --radio-label-off-text-align: left; + --radio-label-off-text-decoration: none; + --radio-label-off-text-transform: none; + --radio-label-off-color: #555555; + --radio-label-off-opacity: 1; + --radio-thumb-off-width: 8px; + --radio-thumb-off-width-raw: 8; + --radio-thumb-off-height: 8px; + --radio-thumb-off-height-raw: 8; + --radio-thumb-off-background: #ffffff; + --radio-thumb-off-border-width: 1px; + --radio-thumb-off-border-color: transparent; + + // radio Small falsefalse + --radio-small-off-background: transparent; + --radio-small-off-width: 16px; + --radio-small-off-width-raw: 16; + --radio-small-off-height: 16px; + --radio-small-off-height-raw: 16; + --radio-small-off-padding-y: 0px; + --radio-small-off-padding-x: 0px; + --radio-small-off-padding-top: 0px; + --radio-small-off-padding-right: 0px; + --radio-small-off-padding-bottom: 0px; + --radio-small-off-padding-left: 0px; + --radio-small-off-padding-start: 10px; + --radio-small-off-border-width: 1px; + --radio-small-off-border-radius: 0px; + --radio-small-off-border-color: transparent; + --radio-small-off-opacity: 1; + --radio-small-off-box-shadow: none; + --radio-small-label-off-spacing: -0.24px; + --radio-small-label-off-font-family: 'Inter'; + --radio-small-label-off-font-size: 12px; + --radio-small-label-off-font-weight: 400; + --radio-small-label-off-line-height: 1.6666667175292968; + --radio-small-label-off-letter-spacing: -0.24px; + --radio-small-label-off-text-align: left; + --radio-small-label-off-text-decoration: none; + --radio-small-label-off-text-transform: none; + --radio-small-label-off-color: #555555; + --radio-small-label-off-opacity: 1; + --radio-small-thumb-off-width: 7.111328125px; + --radio-small-thumb-off-width-raw: 7.111328125; + --radio-small-thumb-off-height: 7.111083984375px; + --radio-small-thumb-off-height-raw: 7.111083984375; + --radio-small-thumb-off-background: #000000; + --radio-small-thumb-off-border-width: 1px; + --radio-small-thumb-off-border-color: transparent; + + // radio Medium falsefalse + --radio-medium-off-background: transparent; + --radio-medium-off-width: 18px; + --radio-medium-off-width-raw: 18; + --radio-medium-off-height: 18px; + --radio-medium-off-height-raw: 18; + --radio-medium-off-padding-y: 0px; + --radio-medium-off-padding-x: 0px; + --radio-medium-off-padding-top: 0px; + --radio-medium-off-padding-right: 0px; + --radio-medium-off-padding-bottom: 0px; + --radio-medium-off-padding-left: 0px; + --radio-medium-off-padding-start: 12px; + --radio-medium-off-border-width: 1px; + --radio-medium-off-border-radius: 0px; + --radio-medium-off-border-color: transparent; + --radio-medium-off-opacity: 1; + --radio-medium-off-box-shadow: none; + --radio-medium-label-off-spacing: -0.28px; + --radio-medium-label-off-font-family: 'Inter'; + --radio-medium-label-off-font-size: 14px; + --radio-medium-label-off-font-weight: 400; + --radio-medium-label-off-line-height: 1.4285714721679688; + --radio-medium-label-off-letter-spacing: -0.28px; + --radio-medium-label-off-text-align: left; + --radio-medium-label-off-text-decoration: none; + --radio-medium-label-off-text-transform: none; + --radio-medium-label-off-color: #555555; + --radio-medium-label-off-opacity: 1; + --radio-medium-thumb-off-width: 8px; + --radio-medium-thumb-off-width-raw: 8; + --radio-medium-thumb-off-height: 8px; + --radio-medium-thumb-off-height-raw: 8; + --radio-medium-thumb-off-background: #000000; + --radio-medium-thumb-off-border-width: 1px; + --radio-medium-thumb-off-border-color: transparent; + + // radio Large falsefalse + --radio-large-off-background: transparent; + --radio-large-off-width: 20px; + --radio-large-off-width-raw: 20; + --radio-large-off-height: 20px; + --radio-large-off-height-raw: 20; + --radio-large-off-padding-y: 0px; + --radio-large-off-padding-x: 0px; + --radio-large-off-padding-top: 0px; + --radio-large-off-padding-right: 0px; + --radio-large-off-padding-bottom: 0px; + --radio-large-off-padding-left: 0px; + --radio-large-off-padding-start: 14px; + --radio-large-off-border-width: 1px; + --radio-large-off-border-radius: 0px; + --radio-large-off-border-color: transparent; + --radio-large-off-opacity: 1; + --radio-large-off-box-shadow: none; + --radio-large-label-off-spacing: -0.32px; + --radio-large-label-off-font-family: 'Inter'; + --radio-large-label-off-font-size: 16px; + --radio-large-label-off-font-weight: 400; + --radio-large-label-off-line-height: 1.25; + --radio-large-label-off-letter-spacing: -0.32px; + --radio-large-label-off-text-align: left; + --radio-large-label-off-text-decoration: none; + --radio-large-label-off-text-transform: none; + --radio-large-label-off-color: #555555; + --radio-large-label-off-opacity: 1; + --radio-large-thumb-off-width: 8.888671875px; + --radio-large-thumb-off-width-raw: 8.888671875; + --radio-large-thumb-off-height: 8.888916015625px; + --radio-large-thumb-off-height-raw: 8.888916015625; + --radio-large-thumb-off-background: #000000; + --radio-large-thumb-off-border-width: 1px; + --radio-large-thumb-off-border-color: transparent; +} \ No newline at end of file diff --git a/sass/project/default_vars/radios_vars.scss b/sass/project/default_vars/radios_vars.scss new file mode 100644 index 00000000..aafe5349 --- /dev/null +++ b/sass/project/default_vars/radios_vars.scss @@ -0,0 +1,554 @@ +// pagination, theme: Dark, state: Disabled +$radio-disabled-on-background: #258cf2; +$radio-disabled-on-width: 18px; +$radio-disabled-on-width-raw: 18; +$radio-disabled-on-height: 18px; +$radio-disabled-on-height-raw: 18; +$radio-disabled-on-padding-y: 0px; +$radio-disabled-on-padding-x: 0px; +$radio-disabled-on-padding-top: 0px; +$radio-disabled-on-padding-right: 0px; +$radio-disabled-on-padding-bottom: 0px; +$radio-disabled-on-padding-left: 0px; +$radio-disabled-on-padding-start: 12px; +$radio-disabled-on-border-width: 1px; +$radio-disabled-on-border-radius: 100px; +$radio-disabled-on-border-color: transparent; +$radio-disabled-on-opacity: 0.4000000059604645; +$radio-disabled-on-box-shadow: none; +$radio-disabled-label-on-spacing: -0.28px; +$radio-disabled-label-on-font-family: 'Inter'; +$radio-disabled-label-on-font-size: 14px; +$radio-disabled-label-on-font-weight: 400; +$radio-disabled-label-on-line-height: 1.4285714721679688; +$radio-disabled-label-on-letter-spacing: -0.28px; +$radio-disabled-label-on-text-align: left; +$radio-disabled-label-on-text-decoration: none; +$radio-disabled-label-on-text-transform: none; +$radio-disabled-label-on-color: #ffffff; +$radio-disabled-label-on-opacity: 1; +$radio-disabled-thumb-on-width: 8px; +$radio-disabled-thumb-on-width-raw: 8; +$radio-disabled-thumb-on-height: 8px; +$radio-disabled-thumb-on-height-raw: 8; +$radio-disabled-thumb-on-background: #ffffff; +$radio-disabled-thumb-on-border-width: 1px; +$radio-disabled-thumb-on-border-color: transparent; + +// pagination, theme: Dark, state: Hover +$radio-hover-on-background: #0073e6; +$radio-hover-on-width: 18px; +$radio-hover-on-width-raw: 18; +$radio-hover-on-height: 18px; +$radio-hover-on-height-raw: 18; +$radio-hover-on-padding-y: 0px; +$radio-hover-on-padding-x: 0px; +$radio-hover-on-padding-top: 0px; +$radio-hover-on-padding-right: 0px; +$radio-hover-on-padding-bottom: 0px; +$radio-hover-on-padding-left: 0px; +$radio-hover-on-padding-start: 12px; +$radio-hover-on-border-width: 1px; +$radio-hover-on-border-radius: 0px; +$radio-hover-on-border-color: transparent; +$radio-hover-on-opacity: 1; +$radio-hover-on-box-shadow: none; +$radio-hover-label-on-spacing: -0.28px; +$radio-hover-label-on-font-family: 'Inter'; +$radio-hover-label-on-font-size: 14px; +$radio-hover-label-on-font-weight: 400; +$radio-hover-label-on-line-height: 1.4285714721679688; +$radio-hover-label-on-letter-spacing: -0.28px; +$radio-hover-label-on-text-align: left; +$radio-hover-label-on-text-decoration: none; +$radio-hover-label-on-text-transform: none; +$radio-hover-label-on-color: #ffffff; +$radio-hover-label-on-opacity: 1; +$radio-hover-thumb-on-width: 8px; +$radio-hover-thumb-on-width-raw: 8; +$radio-hover-thumb-on-height: 8px; +$radio-hover-thumb-on-height-raw: 8; +$radio-hover-thumb-on-background: #ffffff; +$radio-hover-thumb-on-border-width: 1px; +$radio-hover-thumb-on-border-color: transparent; + +// pagination, theme: Dark, state: Default +$radio-on-background: #258cf2; +$radio-on-width: 18px; +$radio-on-width-raw: 18; +$radio-on-height: 18px; +$radio-on-height-raw: 18; +$radio-on-padding-y: 0px; +$radio-on-padding-x: 0px; +$radio-on-padding-top: 0px; +$radio-on-padding-right: 0px; +$radio-on-padding-bottom: 0px; +$radio-on-padding-left: 0px; +$radio-on-padding-start: 12px; +$radio-on-border-width: 1px; +$radio-on-border-radius: 0px; +$radio-on-border-color: transparent; +$radio-on-opacity: 1; +$radio-on-box-shadow: none; +$radio-label-on-spacing: -0.28px; +$radio-label-on-font-family: 'Inter'; +$radio-label-on-font-size: 14px; +$radio-label-on-font-weight: 400; +$radio-label-on-line-height: 1.4285714721679688; +$radio-label-on-letter-spacing: -0.28px; +$radio-label-on-text-align: left; +$radio-label-on-text-decoration: none; +$radio-label-on-text-transform: none; +$radio-label-on-color: #ffffff; +$radio-label-on-opacity: 1; +$radio-thumb-on-width: 8px; +$radio-thumb-on-width-raw: 8; +$radio-thumb-on-height: 8px; +$radio-thumb-on-height-raw: 8; +$radio-thumb-on-background: #ffffff; +$radio-thumb-on-border-width: 1px; +$radio-thumb-on-border-color: transparent; + +// pagination, theme: Dark, state: Disabled +$radio-disabled-off-background: #6e6e6e; +$radio-disabled-off-width: 18px; +$radio-disabled-off-width-raw: 18; +$radio-disabled-off-height: 18px; +$radio-disabled-off-height-raw: 18; +$radio-disabled-off-padding-y: 0px; +$radio-disabled-off-padding-x: 0px; +$radio-disabled-off-padding-top: 0px; +$radio-disabled-off-padding-right: 0px; +$radio-disabled-off-padding-bottom: 0px; +$radio-disabled-off-padding-left: 0px; +$radio-disabled-off-padding-start: 12px; +$radio-disabled-off-border-width: 1px; +$radio-disabled-off-border-radius: 100px; +$radio-disabled-off-border-color: transparent; +$radio-disabled-off-opacity: 0.4000000059604645; +$radio-disabled-off-box-shadow: none; +$radio-disabled-label-off-spacing: -0.28px; +$radio-disabled-label-off-font-family: 'Inter'; +$radio-disabled-label-off-font-size: 14px; +$radio-disabled-label-off-font-weight: 400; +$radio-disabled-label-off-line-height: 1.4285714721679688; +$radio-disabled-label-off-letter-spacing: -0.28px; +$radio-disabled-label-off-text-align: left; +$radio-disabled-label-off-text-decoration: none; +$radio-disabled-label-off-text-transform: none; +$radio-disabled-label-off-color: #ffffff; +$radio-disabled-label-off-opacity: 1; +$radio-disabled-thumb-off-width: 8px; +$radio-disabled-thumb-off-width-raw: 8; +$radio-disabled-thumb-off-height: 8px; +$radio-disabled-thumb-off-height-raw: 8; +$radio-disabled-thumb-off-background: #ffffff; +$radio-disabled-thumb-off-border-width: 1px; +$radio-disabled-thumb-off-border-color: transparent; + +// pagination, theme: Dark, state: Hover +$radio-hover-off-background: transparent; +$radio-hover-off-width: 18px; +$radio-hover-off-width-raw: 18; +$radio-hover-off-height: 18px; +$radio-hover-off-height-raw: 18; +$radio-hover-off-padding-y: 0px; +$radio-hover-off-padding-x: 0px; +$radio-hover-off-padding-top: 0px; +$radio-hover-off-padding-right: 0px; +$radio-hover-off-padding-bottom: 0px; +$radio-hover-off-padding-left: 0px; +$radio-hover-off-padding-start: 12px; +$radio-hover-off-border-width: 1px; +$radio-hover-off-border-radius: 100px; +$radio-hover-off-border-color: transparent; +$radio-hover-off-opacity: 1; +$radio-hover-off-box-shadow: none; +$radio-hover-label-off-spacing: -0.28px; +$radio-hover-label-off-font-family: 'Inter'; +$radio-hover-label-off-font-size: 14px; +$radio-hover-label-off-font-weight: 400; +$radio-hover-label-off-line-height: 1.4285714721679688; +$radio-hover-label-off-letter-spacing: -0.28px; +$radio-hover-label-off-text-align: left; +$radio-hover-label-off-text-decoration: none; +$radio-hover-label-off-text-transform: none; +$radio-hover-label-off-color: #ffffff; +$radio-hover-label-off-opacity: 1; +$radio-hover-thumb-off-width: 8px; +$radio-hover-thumb-off-width-raw: 8; +$radio-hover-thumb-off-height: 8px; +$radio-hover-thumb-off-height-raw: 8; +$radio-hover-thumb-off-background: #ffffff; +$radio-hover-thumb-off-border-width: 1px; +$radio-hover-thumb-off-border-color: transparent; + +// pagination, theme: Dark, state: Default +$radio-off-background: transparent; +$radio-off-width: 18px; +$radio-off-width-raw: 18; +$radio-off-height: 18px; +$radio-off-height-raw: 18; +$radio-off-padding-y: 0px; +$radio-off-padding-x: 0px; +$radio-off-padding-top: 0px; +$radio-off-padding-right: 0px; +$radio-off-padding-bottom: 0px; +$radio-off-padding-left: 0px; +$radio-off-padding-start: 12px; +$radio-off-border-width: 1px; +$radio-off-border-radius: 100px; +$radio-off-border-color: transparent; +$radio-off-opacity: 1; +$radio-off-box-shadow: none; +$radio-label-off-spacing: -0.28px; +$radio-label-off-font-family: 'Inter'; +$radio-label-off-font-size: 14px; +$radio-label-off-font-weight: 400; +$radio-label-off-line-height: 1.4285714721679688; +$radio-label-off-letter-spacing: -0.28px; +$radio-label-off-text-align: left; +$radio-label-off-text-decoration: none; +$radio-label-off-text-transform: none; +$radio-label-off-color: #ffffff; +$radio-label-off-opacity: 1; +$radio-thumb-off-width: 8px; +$radio-thumb-off-width-raw: 8; +$radio-thumb-off-height: 8px; +$radio-thumb-off-height-raw: 8; +$radio-thumb-off-background: #ffffff; +$radio-thumb-off-border-width: 1px; +$radio-thumb-off-border-color: transparent; + +// pagination, theme: Light, state: Disabled +$radio-disabled-on-background: #ffce39; +$radio-disabled-on-width: 18px; +$radio-disabled-on-width-raw: 18; +$radio-disabled-on-height: 18px; +$radio-disabled-on-height-raw: 18; +$radio-disabled-on-padding-y: 0px; +$radio-disabled-on-padding-x: 0px; +$radio-disabled-on-padding-top: 0px; +$radio-disabled-on-padding-right: 0px; +$radio-disabled-on-padding-bottom: 0px; +$radio-disabled-on-padding-left: 0px; +$radio-disabled-on-padding-start: 12px; +$radio-disabled-on-border-width: 1px; +$radio-disabled-on-border-radius: 100px; +$radio-disabled-on-border-color: transparent; +$radio-disabled-on-opacity: 0.30000001192092896; +$radio-disabled-on-box-shadow: none; +$radio-disabled-label-on-spacing: -0.28px; +$radio-disabled-label-on-font-family: 'Inter'; +$radio-disabled-label-on-font-size: 14px; +$radio-disabled-label-on-font-weight: 400; +$radio-disabled-label-on-line-height: 1.4285714721679688; +$radio-disabled-label-on-letter-spacing: -0.28px; +$radio-disabled-label-on-text-align: left; +$radio-disabled-label-on-text-decoration: none; +$radio-disabled-label-on-text-transform: none; +$radio-disabled-label-on-color: #777777; +$radio-disabled-label-on-opacity: 1; +$radio-disabled-thumb-on-width: 8px; +$radio-disabled-thumb-on-width-raw: 8; +$radio-disabled-thumb-on-height: 8px; +$radio-disabled-thumb-on-height-raw: 8; +$radio-disabled-thumb-on-background: #ffffff; +$radio-disabled-thumb-on-border-width: 1px; +$radio-disabled-thumb-on-border-color: transparent; + +// pagination, theme: Light, state: Hover +$radio-hover-on-background: #e0aa09; +$radio-hover-on-width: 18px; +$radio-hover-on-width-raw: 18; +$radio-hover-on-height: 18px; +$radio-hover-on-height-raw: 18; +$radio-hover-on-padding-y: 0px; +$radio-hover-on-padding-x: 0px; +$radio-hover-on-padding-top: 0px; +$radio-hover-on-padding-right: 0px; +$radio-hover-on-padding-bottom: 0px; +$radio-hover-on-padding-left: 0px; +$radio-hover-on-padding-start: 12px; +$radio-hover-on-border-width: 1px; +$radio-hover-on-border-radius: 0px; +$radio-hover-on-border-color: transparent; +$radio-hover-on-opacity: 1; +$radio-hover-on-box-shadow: none; +$radio-hover-label-on-spacing: -0.28px; +$radio-hover-label-on-font-family: 'Inter'; +$radio-hover-label-on-font-size: 14px; +$radio-hover-label-on-font-weight: 400; +$radio-hover-label-on-line-height: 1.4285714721679688; +$radio-hover-label-on-letter-spacing: -0.28px; +$radio-hover-label-on-text-align: left; +$radio-hover-label-on-text-decoration: none; +$radio-hover-label-on-text-transform: none; +$radio-hover-label-on-color: #000000; +$radio-hover-label-on-opacity: 1; +$radio-hover-thumb-on-width: 8px; +$radio-hover-thumb-on-width-raw: 8; +$radio-hover-thumb-on-height: 8px; +$radio-hover-thumb-on-height-raw: 8; +$radio-hover-thumb-on-background: #ffffff; +$radio-hover-thumb-on-border-width: 1px; +$radio-hover-thumb-on-border-color: transparent; + +// pagination, theme: Light, state: Default +$radio-on-background: #ffc107; +$radio-on-width: 18px; +$radio-on-width-raw: 18; +$radio-on-height: 18px; +$radio-on-height-raw: 18; +$radio-on-padding-y: 0px; +$radio-on-padding-x: 0px; +$radio-on-padding-top: 0px; +$radio-on-padding-right: 0px; +$radio-on-padding-bottom: 0px; +$radio-on-padding-left: 0px; +$radio-on-padding-start: 12px; +$radio-on-border-width: 1px; +$radio-on-border-radius: 0px; +$radio-on-border-color: transparent; +$radio-on-opacity: 1; +$radio-on-box-shadow: none; +$radio-label-on-spacing: -0.28px; +$radio-label-on-font-family: 'Inter'; +$radio-label-on-font-size: 14px; +$radio-label-on-font-weight: 400; +$radio-label-on-line-height: 1.4285714721679688; +$radio-label-on-letter-spacing: -0.28px; +$radio-label-on-text-align: left; +$radio-label-on-text-decoration: none; +$radio-label-on-text-transform: none; +$radio-label-on-color: #000000; +$radio-label-on-opacity: 1; +$radio-thumb-on-width: 8px; +$radio-thumb-on-width-raw: 8; +$radio-thumb-on-height: 8px; +$radio-thumb-on-height-raw: 8; +$radio-thumb-on-background: #ffffff; +$radio-thumb-on-border-width: 1px; +$radio-thumb-on-border-color: transparent; + +// pagination, theme: Light, state: Disabled +$radio-disabled-off-background: #cccccc; +$radio-disabled-off-width: 18px; +$radio-disabled-off-width-raw: 18; +$radio-disabled-off-height: 18px; +$radio-disabled-off-height-raw: 18; +$radio-disabled-off-padding-y: 0px; +$radio-disabled-off-padding-x: 0px; +$radio-disabled-off-padding-top: 0px; +$radio-disabled-off-padding-right: 0px; +$radio-disabled-off-padding-bottom: 0px; +$radio-disabled-off-padding-left: 0px; +$radio-disabled-off-padding-start: 12px; +$radio-disabled-off-border-width: 1px; +$radio-disabled-off-border-radius: 100px; +$radio-disabled-off-border-color: transparent; +$radio-disabled-off-opacity: 0.30000001192092896; +$radio-disabled-off-box-shadow: none; +$radio-disabled-label-off-spacing: -0.28px; +$radio-disabled-label-off-font-family: 'Inter'; +$radio-disabled-label-off-font-size: 14px; +$radio-disabled-label-off-font-weight: 400; +$radio-disabled-label-off-line-height: 1.4285714721679688; +$radio-disabled-label-off-letter-spacing: -0.28px; +$radio-disabled-label-off-text-align: left; +$radio-disabled-label-off-text-decoration: none; +$radio-disabled-label-off-text-transform: none; +$radio-disabled-label-off-color: #777777; +$radio-disabled-label-off-opacity: 1; +$radio-disabled-thumb-off-width: 8px; +$radio-disabled-thumb-off-width-raw: 8; +$radio-disabled-thumb-off-height: 8px; +$radio-disabled-thumb-off-height-raw: 8; +$radio-disabled-thumb-off-background: #ffffff; +$radio-disabled-thumb-off-border-width: 1px; +$radio-disabled-thumb-off-border-color: transparent; + +// pagination, theme: Light, state: Hover +$radio-hover-off-background: transparent; +$radio-hover-off-width: 18px; +$radio-hover-off-width-raw: 18; +$radio-hover-off-height: 18px; +$radio-hover-off-height-raw: 18; +$radio-hover-off-padding-y: 0px; +$radio-hover-off-padding-x: 0px; +$radio-hover-off-padding-top: 0px; +$radio-hover-off-padding-right: 0px; +$radio-hover-off-padding-bottom: 0px; +$radio-hover-off-padding-left: 0px; +$radio-hover-off-padding-start: 12px; +$radio-hover-off-border-width: 1px; +$radio-hover-off-border-radius: 100px; +$radio-hover-off-border-color: transparent; +$radio-hover-off-opacity: 1; +$radio-hover-off-box-shadow: none; +$radio-hover-label-off-spacing: -0.28px; +$radio-hover-label-off-font-family: 'Inter'; +$radio-hover-label-off-font-size: 14px; +$radio-hover-label-off-font-weight: 400; +$radio-hover-label-off-line-height: 1.4285714721679688; +$radio-hover-label-off-letter-spacing: -0.28px; +$radio-hover-label-off-text-align: left; +$radio-hover-label-off-text-decoration: none; +$radio-hover-label-off-text-transform: none; +$radio-hover-label-off-color: #000000; +$radio-hover-label-off-opacity: 1; +$radio-hover-thumb-off-width: 8px; +$radio-hover-thumb-off-width-raw: 8; +$radio-hover-thumb-off-height: 8px; +$radio-hover-thumb-off-height-raw: 8; +$radio-hover-thumb-off-background: #ffffff; +$radio-hover-thumb-off-border-width: 1px; +$radio-hover-thumb-off-border-color: transparent; + +// pagination, theme: Light, state: Default +$radio-off-background: transparent; +$radio-off-width: 18px; +$radio-off-width-raw: 18; +$radio-off-height: 18px; +$radio-off-height-raw: 18; +$radio-off-padding-y: 0px; +$radio-off-padding-x: 0px; +$radio-off-padding-top: 0px; +$radio-off-padding-right: 0px; +$radio-off-padding-bottom: 0px; +$radio-off-padding-left: 0px; +$radio-off-padding-start: 12px; +$radio-off-border-width: 1px; +$radio-off-border-radius: 100px; +$radio-off-border-color: transparent; +$radio-off-opacity: 1; +$radio-off-box-shadow: none; +$radio-label-off-spacing: -0.28px; +$radio-label-off-font-family: 'Inter'; +$radio-label-off-font-size: 14px; +$radio-label-off-font-weight: 400; +$radio-label-off-line-height: 1.4285714721679688; +$radio-label-off-letter-spacing: -0.28px; +$radio-label-off-text-align: left; +$radio-label-off-text-decoration: none; +$radio-label-off-text-transform: none; +$radio-label-off-color: #555555; +$radio-label-off-opacity: 1; +$radio-thumb-off-width: 8px; +$radio-thumb-off-width-raw: 8; +$radio-thumb-off-height: 8px; +$radio-thumb-off-height-raw: 8; +$radio-thumb-off-background: #ffffff; +$radio-thumb-off-border-width: 1px; +$radio-thumb-off-border-color: transparent; + +// Small pagination +$radio-small-off-background: transparent; +$radio-small-off-width: 16px; +$radio-small-off-width-raw: 16; +$radio-small-off-height: 16px; +$radio-small-off-height-raw: 16; +$radio-small-off-padding-y: 0px; +$radio-small-off-padding-x: 0px; +$radio-small-off-padding-top: 0px; +$radio-small-off-padding-right: 0px; +$radio-small-off-padding-bottom: 0px; +$radio-small-off-padding-left: 0px; +$radio-small-off-padding-start: 10px; +$radio-small-off-border-width: 1px; +$radio-small-off-border-radius: 0px; +$radio-small-off-border-color: transparent; +$radio-small-off-opacity: 1; +$radio-small-off-box-shadow: none; +$radio-small-label-off-spacing: -0.24px; +$radio-small-label-off-font-family: 'Inter'; +$radio-small-label-off-font-size: 12px; +$radio-small-label-off-font-weight: 400; +$radio-small-label-off-line-height: 1.6666667175292968; +$radio-small-label-off-letter-spacing: -0.24px; +$radio-small-label-off-text-align: left; +$radio-small-label-off-text-decoration: none; +$radio-small-label-off-text-transform: none; +$radio-small-label-off-color: #555555; +$radio-small-label-off-opacity: 1; +$radio-small-thumb-off-width: 7.111328125px; +$radio-small-thumb-off-width-raw: 7.111328125; +$radio-small-thumb-off-height: 7.111083984375px; +$radio-small-thumb-off-height-raw: 7.111083984375; +$radio-small-thumb-off-background: #000000; +$radio-small-thumb-off-border-width: 1px; +$radio-small-thumb-off-border-color: transparent; + +// Medium pagination +$radio-medium-off-background: transparent; +$radio-medium-off-width: 18px; +$radio-medium-off-width-raw: 18; +$radio-medium-off-height: 18px; +$radio-medium-off-height-raw: 18; +$radio-medium-off-padding-y: 0px; +$radio-medium-off-padding-x: 0px; +$radio-medium-off-padding-top: 0px; +$radio-medium-off-padding-right: 0px; +$radio-medium-off-padding-bottom: 0px; +$radio-medium-off-padding-left: 0px; +$radio-medium-off-padding-start: 12px; +$radio-medium-off-border-width: 1px; +$radio-medium-off-border-radius: 0px; +$radio-medium-off-border-color: transparent; +$radio-medium-off-opacity: 1; +$radio-medium-off-box-shadow: none; +$radio-medium-label-off-spacing: -0.28px; +$radio-medium-label-off-font-family: 'Inter'; +$radio-medium-label-off-font-size: 14px; +$radio-medium-label-off-font-weight: 400; +$radio-medium-label-off-line-height: 1.4285714721679688; +$radio-medium-label-off-letter-spacing: -0.28px; +$radio-medium-label-off-text-align: left; +$radio-medium-label-off-text-decoration: none; +$radio-medium-label-off-text-transform: none; +$radio-medium-label-off-color: #555555; +$radio-medium-label-off-opacity: 1; +$radio-medium-thumb-off-width: 8px; +$radio-medium-thumb-off-width-raw: 8; +$radio-medium-thumb-off-height: 8px; +$radio-medium-thumb-off-height-raw: 8; +$radio-medium-thumb-off-background: #000000; +$radio-medium-thumb-off-border-width: 1px; +$radio-medium-thumb-off-border-color: transparent; + +// Large pagination +$radio-large-off-background: transparent; +$radio-large-off-width: 20px; +$radio-large-off-width-raw: 20; +$radio-large-off-height: 20px; +$radio-large-off-height-raw: 20; +$radio-large-off-padding-y: 0px; +$radio-large-off-padding-x: 0px; +$radio-large-off-padding-top: 0px; +$radio-large-off-padding-right: 0px; +$radio-large-off-padding-bottom: 0px; +$radio-large-off-padding-left: 0px; +$radio-large-off-padding-start: 14px; +$radio-large-off-border-width: 1px; +$radio-large-off-border-radius: 0px; +$radio-large-off-border-color: transparent; +$radio-large-off-opacity: 1; +$radio-large-off-box-shadow: none; +$radio-large-label-off-spacing: -0.32px; +$radio-large-label-off-font-family: 'Inter'; +$radio-large-label-off-font-size: 16px; +$radio-large-label-off-font-weight: 400; +$radio-large-label-off-line-height: 1.25; +$radio-large-label-off-letter-spacing: -0.32px; +$radio-large-label-off-text-align: left; +$radio-large-label-off-text-decoration: none; +$radio-large-label-off-text-transform: none; +$radio-large-label-off-color: #555555; +$radio-large-label-off-opacity: 1; +$radio-large-thumb-off-width: 8.888671875px; +$radio-large-thumb-off-width-raw: 8.888671875; +$radio-large-thumb-off-height: 8.888916015625px; +$radio-large-thumb-off-height-raw: 8.888916015625; +$radio-large-thumb-off-background: #000000; +$radio-large-thumb-off-border-width: 1px; +$radio-large-thumb-off-border-color: transparent; \ No newline at end of file diff --git a/sass/project/default_vars/selects.scss b/sass/project/default_vars/selects.scss new file mode 100644 index 00000000..df983f33 --- /dev/null +++ b/sass/project/default_vars/selects.scss @@ -0,0 +1,593 @@ +$select-sizes: ( "sm", "md", "lg" ); + +$select-themes: ( "dark", "light" ); + +$select-states: ( "disabled", "error", "active", "hover", "" ); + +.select { + + // select , theme: Dark, state: Disabled + --select-dark-disabled-background: #cccccc; + --select-dark-disabled-padding-top: 12px; + --select-dark-disabled-padding-right: 16px; + --select-dark-disabled-padding-bottom: 12px; + --select-dark-disabled-padding-left: 20px; + --select-dark-disabled-border-width: 1px; + --select-dark-disabled-border-radius: 4px; + --select-dark-disabled-border-color: transparent; + --select-dark-disabled-box-shadow: none; + --select-label-dark-disabled-spacing: 5px; + --select-label-dark-disabled-font-family: 'Inter'; + --select-label-dark-disabled-font-size: 12px; + --select-label-dark-disabled-font-weight: 400; + --select-label-dark-disabled-line-height: 1.6; + --select-label-dark-disabled-letter-spacing: -0.24px; + --select-label-dark-disabled-text-align: left; + --select-label-dark-disabled-text-transform: none; + --select-label-dark-disabled-text-decoration: none; + --select-label-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + --select-option-dark-disabled-font-family: 'Inter'; + --select-option-dark-disabled-font-size: 14px; + --select-option-dark-disabled-font-weight: 400; + --select-option-dark-disabled-line-height: 1.4285714721679688; + --select-option-dark-disabled-letter-spacing: -0.28px; + --select-option-dark-disabled-text-align: left; + --select-option-dark-disabled-text-transform: none; + --select-option-dark-disabled-text-decoration: none; + --select-option-dark-disabled-color: #555555; + --select-icon-dark-disabled-width: 16px; + --select-icon-dark-disabled-width-raw: 16; + --select-icon-dark-disabled-height: 16px; + --select-icon-dark-disabled-height-raw: 16; + --select-icon-dark-disabled-color: #aaaaaa; + --select-additional-info-dark-disabled-spacing: 5px; + --select-additional-info-dark-disabled-font-family: 'Inter'; + --select-additional-info-dark-disabled-font-size: 12px; + --select-additional-info-dark-disabled-font-weight: 400; + --select-additional-info-dark-disabled-line-height: 1.6; + --select-additional-info-dark-disabled-letter-spacing: -0.24px; + --select-additional-info-dark-disabled-text-align: left; + --select-additional-info-dark-disabled-text-transform: none; + --select-additional-info-dark-disabled-text-decoration: none; + --select-additional-info-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + + // select , theme: Dark, state: Error + --select-dark-error-background: #f8f8f8; + --select-dark-error-padding-top: 12px; + --select-dark-error-padding-right: 16px; + --select-dark-error-padding-bottom: 12px; + --select-dark-error-padding-left: 20px; + --select-dark-error-border-width: 1px; + --select-dark-error-border-radius: 4px; + --select-dark-error-border-color: #f35d6c; + --select-dark-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-dark-error-spacing: 5px; + --select-label-dark-error-font-family: 'Inter'; + --select-label-dark-error-font-size: 12px; + --select-label-dark-error-font-weight: 400; + --select-label-dark-error-line-height: 1.6; + --select-label-dark-error-letter-spacing: -0.24px; + --select-label-dark-error-text-align: left; + --select-label-dark-error-text-transform: none; + --select-label-dark-error-text-decoration: none; + --select-label-dark-error-color: rgba(255, 255, 255, 0.6499999761581421); + --select-option-dark-error-font-family: 'Inter'; + --select-option-dark-error-font-size: 14px; + --select-option-dark-error-font-weight: 400; + --select-option-dark-error-line-height: 1.4285714721679688; + --select-option-dark-error-letter-spacing: -0.28px; + --select-option-dark-error-text-align: left; + --select-option-dark-error-text-transform: none; + --select-option-dark-error-text-decoration: none; + --select-option-dark-error-color: #555555; + --select-icon-dark-error-width: 16px; + --select-icon-dark-error-width-raw: 16; + --select-icon-dark-error-height: 16px; + --select-icon-dark-error-height-raw: 16; + --select-icon-dark-error-color: #888888; + --select-additional-info-dark-error-spacing: 5px; + --select-additional-info-dark-error-font-family: 'Inter'; + --select-additional-info-dark-error-font-size: 12px; + --select-additional-info-dark-error-font-weight: 400; + --select-additional-info-dark-error-line-height: 1.6; + --select-additional-info-dark-error-letter-spacing: -0.24px; + --select-additional-info-dark-error-text-align: left; + --select-additional-info-dark-error-text-transform: none; + --select-additional-info-dark-error-text-decoration: none; + --select-additional-info-dark-error-color: #f35d6c; + + // select , theme: Dark, state: Active + --select-dark-active-background: #ffffff; + --select-dark-active-padding-top: 12px; + --select-dark-active-padding-right: 16px; + --select-dark-active-padding-bottom: 12px; + --select-dark-active-padding-left: 20px; + --select-dark-active-border-width: 1px; + --select-dark-active-border-radius: 4px; + --select-dark-active-border-color: transparent; + --select-dark-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-dark-active-spacing: 5px; + --select-label-dark-active-font-family: 'Inter'; + --select-label-dark-active-font-size: 12px; + --select-label-dark-active-font-weight: 400; + --select-label-dark-active-line-height: 1.6; + --select-label-dark-active-letter-spacing: -0.24px; + --select-label-dark-active-text-align: left; + --select-label-dark-active-text-transform: none; + --select-label-dark-active-text-decoration: none; + --select-label-dark-active-color: rgba(255, 255, 255, 0.8500000238418579); + --select-option-dark-active-font-family: 'Inter'; + --select-option-dark-active-font-size: 14px; + --select-option-dark-active-font-weight: 400; + --select-option-dark-active-line-height: 1.4285714721679688; + --select-option-dark-active-letter-spacing: -0.28px; + --select-option-dark-active-text-align: left; + --select-option-dark-active-text-transform: none; + --select-option-dark-active-text-decoration: none; + --select-option-dark-active-color: #000000; + --select-icon-dark-active-width: 16px; + --select-icon-dark-active-width-raw: 16; + --select-icon-dark-active-height: 16px; + --select-icon-dark-active-height-raw: 16; + --select-icon-dark-active-color: #888888; + --select-additional-info-dark-active-spacing: 5px; + --select-additional-info-dark-active-font-family: 'Inter'; + --select-additional-info-dark-active-font-size: 12px; + --select-additional-info-dark-active-font-weight: 400; + --select-additional-info-dark-active-line-height: 1.6; + --select-additional-info-dark-active-letter-spacing: -0.24px; + --select-additional-info-dark-active-text-align: left; + --select-additional-info-dark-active-text-transform: none; + --select-additional-info-dark-active-text-decoration: none; + --select-additional-info-dark-active-color: rgba(255, 255, 255, 0.6499999761581421); + + // select , theme: Dark, state: Hover + --select-dark-hover-background: #ffffff; + --select-dark-hover-padding-top: 12px; + --select-dark-hover-padding-right: 16px; + --select-dark-hover-padding-bottom: 12px; + --select-dark-hover-padding-left: 20px; + --select-dark-hover-border-width: 1px; + --select-dark-hover-border-radius: 4px; + --select-dark-hover-border-color: transparent; + --select-dark-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-dark-hover-spacing: 5px; + --select-label-dark-hover-font-family: 'Inter'; + --select-label-dark-hover-font-size: 12px; + --select-label-dark-hover-font-weight: 400; + --select-label-dark-hover-line-height: 1.6; + --select-label-dark-hover-letter-spacing: -0.24px; + --select-label-dark-hover-text-align: left; + --select-label-dark-hover-text-transform: none; + --select-label-dark-hover-text-decoration: none; + --select-label-dark-hover-color: rgba(255, 255, 255, 0.6499999761581421); + --select-option-dark-hover-font-family: 'Inter'; + --select-option-dark-hover-font-size: 14px; + --select-option-dark-hover-font-weight: 400; + --select-option-dark-hover-line-height: 1.4285714721679688; + --select-option-dark-hover-letter-spacing: -0.28px; + --select-option-dark-hover-text-align: left; + --select-option-dark-hover-text-transform: none; + --select-option-dark-hover-text-decoration: none; + --select-option-dark-hover-color: #555555; + --select-icon-dark-hover-width: 16px; + --select-icon-dark-hover-width-raw: 16; + --select-icon-dark-hover-height: 16px; + --select-icon-dark-hover-height-raw: 16; + --select-icon-dark-hover-color: #888888; + --select-additional-info-dark-hover-spacing: 5px; + --select-additional-info-dark-hover-font-family: 'Inter'; + --select-additional-info-dark-hover-font-size: 12px; + --select-additional-info-dark-hover-font-weight: 400; + --select-additional-info-dark-hover-line-height: 1.6; + --select-additional-info-dark-hover-letter-spacing: -0.24px; + --select-additional-info-dark-hover-text-align: left; + --select-additional-info-dark-hover-text-transform: none; + --select-additional-info-dark-hover-text-decoration: none; + --select-additional-info-dark-hover-color: rgba(255, 255, 255, 0.6499999761581421); + + // select , theme: Dark, state: Default + --select-dark-background: #f8f8f8; + --select-dark-padding-top: 12px; + --select-dark-padding-right: 16px; + --select-dark-padding-bottom: 12px; + --select-dark-padding-left: 20px; + --select-dark-border-width: 1px; + --select-dark-border-radius: 4px; + --select-dark-border-color: transparent; + --select-dark-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-dark-spacing: 5px; + --select-label-dark-font-family: 'Inter'; + --select-label-dark-font-size: 12px; + --select-label-dark-font-weight: 400; + --select-label-dark-line-height: 1.6; + --select-label-dark-letter-spacing: -0.24px; + --select-label-dark-text-align: left; + --select-label-dark-text-transform: none; + --select-label-dark-text-decoration: none; + --select-label-dark-color: rgba(255, 255, 255, 0.6499999761581421); + --select-option-dark-font-family: 'Inter'; + --select-option-dark-font-size: 14px; + --select-option-dark-font-weight: 400; + --select-option-dark-line-height: 1.4285714721679688; + --select-option-dark-letter-spacing: -0.28px; + --select-option-dark-text-align: left; + --select-option-dark-text-transform: none; + --select-option-dark-text-decoration: none; + --select-option-dark-color: #555555; + --select-icon-dark-width: 16px; + --select-icon-dark-width-raw: 16; + --select-icon-dark-height: 16px; + --select-icon-dark-height-raw: 16; + --select-icon-dark-color: #888888; + --select-additional-info-dark-spacing: 5px; + --select-additional-info-dark-font-family: 'Inter'; + --select-additional-info-dark-font-size: 12px; + --select-additional-info-dark-font-weight: 400; + --select-additional-info-dark-line-height: 1.6; + --select-additional-info-dark-letter-spacing: -0.24px; + --select-additional-info-dark-text-align: left; + --select-additional-info-dark-text-transform: none; + --select-additional-info-dark-text-decoration: none; + --select-additional-info-dark-color: rgba(255, 255, 255, 0.6499999761581421); + + // select , theme: Light, state: Disabled + --select-disabled-background: #f8f8f8; + --select-disabled-padding-top: 12px; + --select-disabled-padding-right: 16px; + --select-disabled-padding-bottom: 12px; + --select-disabled-padding-left: 20px; + --select-disabled-border-width: 1px; + --select-disabled-border-radius: 4px; + --select-disabled-border-color: transparent; + --select-disabled-box-shadow: none; + --select-label-disabled-spacing: 5px; + --select-label-disabled-font-family: 'Inter'; + --select-label-disabled-font-size: 12px; + --select-label-disabled-font-weight: 400; + --select-label-disabled-line-height: 1.6; + --select-label-disabled-letter-spacing: -0.24px; + --select-label-disabled-text-align: left; + --select-label-disabled-text-transform: none; + --select-label-disabled-text-decoration: none; + --select-label-disabled-color: #777777; + --select-option-disabled-font-family: 'Inter'; + --select-option-disabled-font-size: 14px; + --select-option-disabled-font-weight: 400; + --select-option-disabled-line-height: 1.4285714721679688; + --select-option-disabled-letter-spacing: -0.28px; + --select-option-disabled-text-align: left; + --select-option-disabled-text-transform: none; + --select-option-disabled-text-decoration: none; + --select-option-disabled-color: #777777; + --select-icon-disabled-width: 16px; + --select-icon-disabled-width-raw: 16; + --select-icon-disabled-height: 16px; + --select-icon-disabled-height-raw: 16; + --select-icon-disabled-color: #cccccc; + --select-additional-info-disabled-spacing: 5px; + --select-additional-info-disabled-font-family: 'Inter'; + --select-additional-info-disabled-font-size: 12px; + --select-additional-info-disabled-font-weight: 400; + --select-additional-info-disabled-line-height: 1.6; + --select-additional-info-disabled-letter-spacing: -0.24px; + --select-additional-info-disabled-text-align: left; + --select-additional-info-disabled-text-transform: none; + --select-additional-info-disabled-text-decoration: none; + --select-additional-info-disabled-color: #777777; + + // select , theme: Light, state: Error + --select-error-background: #ffffff; + --select-error-padding-top: 12px; + --select-error-padding-right: 16px; + --select-error-padding-bottom: 12px; + --select-error-padding-left: 20px; + --select-error-border-width: 1px; + --select-error-border-radius: 4px; + --select-error-border-color: #dc3545; + --select-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-error-spacing: 5px; + --select-label-error-font-family: 'Inter'; + --select-label-error-font-size: 12px; + --select-label-error-font-weight: 400; + --select-label-error-line-height: 1.6; + --select-label-error-letter-spacing: -0.24px; + --select-label-error-text-align: left; + --select-label-error-text-transform: none; + --select-label-error-text-decoration: none; + --select-label-error-color: #555555; + --select-option-error-font-family: 'Inter'; + --select-option-error-font-size: 14px; + --select-option-error-font-weight: 400; + --select-option-error-line-height: 1.4285714721679688; + --select-option-error-letter-spacing: -0.28px; + --select-option-error-text-align: left; + --select-option-error-text-transform: none; + --select-option-error-text-decoration: none; + --select-option-error-color: #777777; + --select-icon-error-width: 16px; + --select-icon-error-width-raw: 16; + --select-icon-error-height: 16px; + --select-icon-error-height-raw: 16; + --select-icon-error-color: #888888; + --select-additional-info-error-spacing: 5px; + --select-additional-info-error-font-family: 'Inter'; + --select-additional-info-error-font-size: 12px; + --select-additional-info-error-font-weight: 400; + --select-additional-info-error-line-height: 1.6; + --select-additional-info-error-letter-spacing: -0.24px; + --select-additional-info-error-text-align: left; + --select-additional-info-error-text-transform: none; + --select-additional-info-error-text-decoration: none; + --select-additional-info-error-color: #dc3545; + + // select , theme: Light, state: Active + --select-active-background: #ffffff; + --select-active-padding-top: 12px; + --select-active-padding-right: 16px; + --select-active-padding-bottom: 12px; + --select-active-padding-left: 20px; + --select-active-border-width: 1px; + --select-active-border-radius: 4px; + --select-active-border-color: #929292; + --select-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-active-spacing: 5px; + --select-label-active-font-family: 'Inter'; + --select-label-active-font-size: 12px; + --select-label-active-font-weight: 400; + --select-label-active-line-height: 1.6; + --select-label-active-letter-spacing: -0.24px; + --select-label-active-text-align: left; + --select-label-active-text-transform: none; + --select-label-active-text-decoration: none; + --select-label-active-color: rgba(0, 0, 0, 0.800000011920929); + --select-option-active-font-family: 'Inter'; + --select-option-active-font-size: 14px; + --select-option-active-font-weight: 400; + --select-option-active-line-height: 1.4285714721679688; + --select-option-active-letter-spacing: -0.28px; + --select-option-active-text-align: left; + --select-option-active-text-transform: none; + --select-option-active-text-decoration: none; + --select-option-active-color: #000000; + --select-icon-active-width: 16px; + --select-icon-active-width-raw: 16; + --select-icon-active-height: 16px; + --select-icon-active-height-raw: 16; + --select-icon-active-color: #888888; + --select-additional-info-active-spacing: 5px; + --select-additional-info-active-font-family: 'Inter'; + --select-additional-info-active-font-size: 12px; + --select-additional-info-active-font-weight: 400; + --select-additional-info-active-line-height: 1.6; + --select-additional-info-active-letter-spacing: -0.24px; + --select-additional-info-active-text-align: left; + --select-additional-info-active-text-transform: none; + --select-additional-info-active-text-decoration: none; + --select-additional-info-active-color: #777777; + + // select , theme: Light, state: Hover + --select-hover-background: #ffffff; + --select-hover-padding-top: 12px; + --select-hover-padding-right: 16px; + --select-hover-padding-bottom: 12px; + --select-hover-padding-left: 20px; + --select-hover-border-width: 1px; + --select-hover-border-radius: 4px; + --select-hover-border-color: #b3b3b3; + --select-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-hover-spacing: 5px; + --select-label-hover-font-family: 'Inter'; + --select-label-hover-font-size: 12px; + --select-label-hover-font-weight: 400; + --select-label-hover-line-height: 1.6; + --select-label-hover-letter-spacing: -0.24px; + --select-label-hover-text-align: left; + --select-label-hover-text-transform: none; + --select-label-hover-text-decoration: none; + --select-label-hover-color: #555555; + --select-option-hover-font-family: 'Inter'; + --select-option-hover-font-size: 14px; + --select-option-hover-font-weight: 400; + --select-option-hover-line-height: 1.4285714721679688; + --select-option-hover-letter-spacing: -0.28px; + --select-option-hover-text-align: left; + --select-option-hover-text-transform: none; + --select-option-hover-text-decoration: none; + --select-option-hover-color: #777777; + --select-icon-hover-width: 16px; + --select-icon-hover-width-raw: 16; + --select-icon-hover-height: 16px; + --select-icon-hover-height-raw: 16; + --select-icon-hover-color: #888888; + --select-additional-info-hover-spacing: 5px; + --select-additional-info-hover-font-family: 'Inter'; + --select-additional-info-hover-font-size: 12px; + --select-additional-info-hover-font-weight: 400; + --select-additional-info-hover-line-height: 1.6; + --select-additional-info-hover-letter-spacing: -0.24px; + --select-additional-info-hover-text-align: left; + --select-additional-info-hover-text-transform: none; + --select-additional-info-hover-text-decoration: none; + --select-additional-info-hover-color: #777777; + + // select , theme: Light, state: Default + --select-background: #ffffff; + --select-padding-top: 12px; + --select-padding-right: 16px; + --select-padding-bottom: 12px; + --select-padding-left: 20px; + --select-border-width: 1px; + --select-border-radius: 4px; + --select-border-color: #e8e8e8; + --select-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); + --select-label-spacing: 5px; + --select-label-font-family: 'Inter'; + --select-label-font-size: 12px; + --select-label-font-weight: 400; + --select-label-line-height: 1.6; + --select-label-letter-spacing: -0.24px; + --select-label-text-align: left; + --select-label-text-transform: none; + --select-label-text-decoration: none; + --select-label-color: #555555; + --select-option-font-family: 'Inter'; + --select-option-font-size: 14px; + --select-option-font-weight: 400; + --select-option-line-height: 1.4285714721679688; + --select-option-letter-spacing: -0.28px; + --select-option-text-align: left; + --select-option-text-transform: none; + --select-option-text-decoration: none; + --select-option-color: #777777; + --select-icon-width: 16px; + --select-icon-width-raw: 16; + --select-icon-height: 16px; + --select-icon-height-raw: 16; + --select-icon-color: #888888; + --select-additional-info-spacing: 5px; + --select-additional-info-font-family: 'Inter'; + --select-additional-info-font-size: 12px; + --select-additional-info-font-weight: 400; + --select-additional-info-line-height: 1.6; + --select-additional-info-letter-spacing: -0.24px; + --select-additional-info-text-align: left; + --select-additional-info-text-transform: none; + --select-additional-info-text-decoration: none; + --select-additional-info-color: #777777; + + // select Small falsefalse + --select-small-background: transparent; + --select-small-padding-top: 10px; + --select-small-padding-right: 12px; + --select-small-padding-bottom: 10px; + --select-small-padding-left: 16px; + --select-small-border-width: 1px; + --select-small-border-radius: 4px; + --select-small-border-color: #000000; + --select-small-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10000000149011612); + --select-small-label-spacing: 2px; + --select-small-label-font-family: 'Inter'; + --select-small-label-font-size: 12px; + --select-small-label-font-weight: 400; + --select-small-label-line-height: 1.6; + --select-small-label-letter-spacing: -0.24px; + --select-small-label-text-align: left; + --select-small-label-text-transform: none; + --select-small-label-text-decoration: none; + --select-small-label-color: #555555; + --select-small-option-font-family: 'Inter'; + --select-small-option-font-size: 12px; + --select-small-option-font-weight: 400; + --select-small-option-line-height: 1.6666667175292968; + --select-small-option-letter-spacing: -0.24px; + --select-small-option-text-align: left; + --select-small-option-text-transform: none; + --select-small-option-text-decoration: none; + --select-small-option-color: #555555; + --select-small-icon-width: 16px; + --select-small-icon-width-raw: 16; + --select-small-icon-height: 16px; + --select-small-icon-height-raw: 16; + --select-small-icon-color: #888888; + --select-small-additional-info-spacing: 2px; + --select-small-additional-info-font-family: 'Inter'; + --select-small-additional-info-font-size: 12px; + --select-small-additional-info-font-weight: 400; + --select-small-additional-info-line-height: 1.6; + --select-small-additional-info-letter-spacing: -0.24px; + --select-small-additional-info-text-align: left; + --select-small-additional-info-text-transform: none; + --select-small-additional-info-text-decoration: none; + --select-small-additional-info-color: #555555; + + // select Medium falsefalse + --select-medium-background: transparent; + --select-medium-padding-top: 12px; + --select-medium-padding-right: 16px; + --select-medium-padding-bottom: 12px; + --select-medium-padding-left: 20px; + --select-medium-border-width: 1px; + --select-medium-border-radius: 4px; + --select-medium-border-color: #000000; + --select-medium-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10000000149011612); + --select-medium-label-spacing: 5px; + --select-medium-label-font-family: 'Inter'; + --select-medium-label-font-size: 12px; + --select-medium-label-font-weight: 400; + --select-medium-label-line-height: 1.6; + --select-medium-label-letter-spacing: -0.24px; + --select-medium-label-text-align: left; + --select-medium-label-text-transform: none; + --select-medium-label-text-decoration: none; + --select-medium-label-color: #555555; + --select-medium-option-font-family: 'Inter'; + --select-medium-option-font-size: 14px; + --select-medium-option-font-weight: 400; + --select-medium-option-line-height: 1.4285714721679688; + --select-medium-option-letter-spacing: -0.28px; + --select-medium-option-text-align: left; + --select-medium-option-text-transform: none; + --select-medium-option-text-decoration: none; + --select-medium-option-color: #555555; + --select-medium-icon-width: 16px; + --select-medium-icon-width-raw: 16; + --select-medium-icon-height: 16px; + --select-medium-icon-height-raw: 16; + --select-medium-icon-color: #888888; + --select-medium-additional-info-spacing: 5px; + --select-medium-additional-info-font-family: 'Inter'; + --select-medium-additional-info-font-size: 12px; + --select-medium-additional-info-font-weight: 400; + --select-medium-additional-info-line-height: 1.6; + --select-medium-additional-info-letter-spacing: -0.24px; + --select-medium-additional-info-text-align: left; + --select-medium-additional-info-text-transform: none; + --select-medium-additional-info-text-decoration: none; + --select-medium-additional-info-color: #555555; + + // select Large falsefalse + --select-large-background: transparent; + --select-large-padding-top: 14px; + --select-large-padding-right: 16px; + --select-large-padding-bottom: 14px; + --select-large-padding-left: 20px; + --select-large-border-width: 1px; + --select-large-border-radius: 4px; + --select-large-border-color: #000000; + --select-large-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10000000149011612); + --select-large-label-spacing: 5px; + --select-large-label-font-family: 'Inter'; + --select-large-label-font-size: 12px; + --select-large-label-font-weight: 400; + --select-large-label-line-height: 1.6; + --select-large-label-letter-spacing: -0.24px; + --select-large-label-text-align: left; + --select-large-label-text-transform: none; + --select-large-label-text-decoration: none; + --select-large-label-color: #555555; + --select-large-option-font-family: 'Inter'; + --select-large-option-font-size: 16px; + --select-large-option-font-weight: 400; + --select-large-option-line-height: 1.25; + --select-large-option-letter-spacing: -0.32px; + --select-large-option-text-align: left; + --select-large-option-text-transform: none; + --select-large-option-text-decoration: none; + --select-large-option-color: #555555; + --select-large-icon-width: 16px; + --select-large-icon-width-raw: 16; + --select-large-icon-height: 16px; + --select-large-icon-height-raw: 16; + --select-large-icon-color: #888888; + --select-large-additional-info-spacing: 5px; + --select-large-additional-info-font-family: 'Inter'; + --select-large-additional-info-font-size: 12px; + --select-large-additional-info-font-weight: 400; + --select-large-additional-info-line-height: 1.6; + --select-large-additional-info-letter-spacing: -0.24px; + --select-large-additional-info-text-align: left; + --select-large-additional-info-text-transform: none; + --select-large-additional-info-text-decoration: none; + --select-large-additional-info-color: #555555; +} \ No newline at end of file diff --git a/sass/project/default_vars/selects_vars.scss b/sass/project/default_vars/selects_vars.scss new file mode 100644 index 00000000..833ac5b2 --- /dev/null +++ b/sass/project/default_vars/selects_vars.scss @@ -0,0 +1,584 @@ +// select, theme: Dark, state: Disabled +$select-dark-disabled-background: #cccccc; +$select-dark-disabled-padding-top: 12px; +$select-dark-disabled-padding-right: 16px; +$select-dark-disabled-padding-bottom: 12px; +$select-dark-disabled-padding-left: 20px; +$select-dark-disabled-border-width: 1px; +$select-dark-disabled-border-radius: 4px; +$select-dark-disabled-border-color: transparent; +$select-dark-disabled-box-shadow: none; +$select-label-dark-disabled-spacing: 5px; +$select-label-dark-disabled-font-family: 'Inter'; +$select-label-dark-disabled-font-size: 12px; +$select-label-dark-disabled-font-weight: 400; +$select-label-dark-disabled-line-height: 1.6; +$select-label-dark-disabled-letter-spacing: -0.24px; +$select-label-dark-disabled-text-align: left; +$select-label-dark-disabled-text-transform: none; +$select-label-dark-disabled-text-decoration: none; +$select-label-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); +$select-option-dark-disabled-font-family: 'Inter'; +$select-option-dark-disabled-font-size: 14px; +$select-option-dark-disabled-font-weight: 400; +$select-option-dark-disabled-line-height: 1.4285714721679688; +$select-option-dark-disabled-letter-spacing: -0.28px; +$select-option-dark-disabled-text-align: left; +$select-option-dark-disabled-text-transform: none; +$select-option-dark-disabled-text-decoration: none; +$select-option-dark-disabled-color: #555555; +$select-icon-dark-disabled-width: 16px; +$select-icon-dark-disabled-width-raw: 16; +$select-icon-dark-disabled-height: 16px; +$select-icon-dark-disabled-height-raw: 16; +$select-icon-dark-disabled-color: #aaaaaa; +$select-additional-info-dark-disabled-spacing: 5px; +$select-additional-info-dark-disabled-font-family: 'Inter'; +$select-additional-info-dark-disabled-font-size: 12px; +$select-additional-info-dark-disabled-font-weight: 400; +$select-additional-info-dark-disabled-line-height: 1.6; +$select-additional-info-dark-disabled-letter-spacing: -0.24px; +$select-additional-info-dark-disabled-text-align: left; +$select-additional-info-dark-disabled-text-transform: none; +$select-additional-info-dark-disabled-text-decoration: none; +$select-additional-info-dark-disabled-color: rgba(255, 255, 255, 0.44999998807907104); + +// select, theme: Dark, state: Error +$select-dark-error-background: #f8f8f8; +$select-dark-error-padding-top: 12px; +$select-dark-error-padding-right: 16px; +$select-dark-error-padding-bottom: 12px; +$select-dark-error-padding-left: 20px; +$select-dark-error-border-width: 1px; +$select-dark-error-border-radius: 4px; +$select-dark-error-border-color: #f35d6c; +$select-dark-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-dark-error-spacing: 5px; +$select-label-dark-error-font-family: 'Inter'; +$select-label-dark-error-font-size: 12px; +$select-label-dark-error-font-weight: 400; +$select-label-dark-error-line-height: 1.6; +$select-label-dark-error-letter-spacing: -0.24px; +$select-label-dark-error-text-align: left; +$select-label-dark-error-text-transform: none; +$select-label-dark-error-text-decoration: none; +$select-label-dark-error-color: rgba(255, 255, 255, 0.6499999761581421); +$select-option-dark-error-font-family: 'Inter'; +$select-option-dark-error-font-size: 14px; +$select-option-dark-error-font-weight: 400; +$select-option-dark-error-line-height: 1.4285714721679688; +$select-option-dark-error-letter-spacing: -0.28px; +$select-option-dark-error-text-align: left; +$select-option-dark-error-text-transform: none; +$select-option-dark-error-text-decoration: none; +$select-option-dark-error-color: #555555; +$select-icon-dark-error-width: 16px; +$select-icon-dark-error-width-raw: 16; +$select-icon-dark-error-height: 16px; +$select-icon-dark-error-height-raw: 16; +$select-icon-dark-error-color: #888888; +$select-additional-info-dark-error-spacing: 5px; +$select-additional-info-dark-error-font-family: 'Inter'; +$select-additional-info-dark-error-font-size: 12px; +$select-additional-info-dark-error-font-weight: 400; +$select-additional-info-dark-error-line-height: 1.6; +$select-additional-info-dark-error-letter-spacing: -0.24px; +$select-additional-info-dark-error-text-align: left; +$select-additional-info-dark-error-text-transform: none; +$select-additional-info-dark-error-text-decoration: none; +$select-additional-info-dark-error-color: #f35d6c; + +// select, theme: Dark, state: Active +$select-dark-active-background: #ffffff; +$select-dark-active-padding-top: 12px; +$select-dark-active-padding-right: 16px; +$select-dark-active-padding-bottom: 12px; +$select-dark-active-padding-left: 20px; +$select-dark-active-border-width: 1px; +$select-dark-active-border-radius: 4px; +$select-dark-active-border-color: transparent; +$select-dark-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-dark-active-spacing: 5px; +$select-label-dark-active-font-family: 'Inter'; +$select-label-dark-active-font-size: 12px; +$select-label-dark-active-font-weight: 400; +$select-label-dark-active-line-height: 1.6; +$select-label-dark-active-letter-spacing: -0.24px; +$select-label-dark-active-text-align: left; +$select-label-dark-active-text-transform: none; +$select-label-dark-active-text-decoration: none; +$select-label-dark-active-color: rgba(255, 255, 255, 0.8500000238418579); +$select-option-dark-active-font-family: 'Inter'; +$select-option-dark-active-font-size: 14px; +$select-option-dark-active-font-weight: 400; +$select-option-dark-active-line-height: 1.4285714721679688; +$select-option-dark-active-letter-spacing: -0.28px; +$select-option-dark-active-text-align: left; +$select-option-dark-active-text-transform: none; +$select-option-dark-active-text-decoration: none; +$select-option-dark-active-color: #000000; +$select-icon-dark-active-width: 16px; +$select-icon-dark-active-width-raw: 16; +$select-icon-dark-active-height: 16px; +$select-icon-dark-active-height-raw: 16; +$select-icon-dark-active-color: #888888; +$select-additional-info-dark-active-spacing: 5px; +$select-additional-info-dark-active-font-family: 'Inter'; +$select-additional-info-dark-active-font-size: 12px; +$select-additional-info-dark-active-font-weight: 400; +$select-additional-info-dark-active-line-height: 1.6; +$select-additional-info-dark-active-letter-spacing: -0.24px; +$select-additional-info-dark-active-text-align: left; +$select-additional-info-dark-active-text-transform: none; +$select-additional-info-dark-active-text-decoration: none; +$select-additional-info-dark-active-color: rgba(255, 255, 255, 0.6499999761581421); + +// select, theme: Dark, state: Hover +$select-dark-hover-background: #ffffff; +$select-dark-hover-padding-top: 12px; +$select-dark-hover-padding-right: 16px; +$select-dark-hover-padding-bottom: 12px; +$select-dark-hover-padding-left: 20px; +$select-dark-hover-border-width: 1px; +$select-dark-hover-border-radius: 4px; +$select-dark-hover-border-color: transparent; +$select-dark-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-dark-hover-spacing: 5px; +$select-label-dark-hover-font-family: 'Inter'; +$select-label-dark-hover-font-size: 12px; +$select-label-dark-hover-font-weight: 400; +$select-label-dark-hover-line-height: 1.6; +$select-label-dark-hover-letter-spacing: -0.24px; +$select-label-dark-hover-text-align: left; +$select-label-dark-hover-text-transform: none; +$select-label-dark-hover-text-decoration: none; +$select-label-dark-hover-color: rgba(255, 255, 255, 0.6499999761581421); +$select-option-dark-hover-font-family: 'Inter'; +$select-option-dark-hover-font-size: 14px; +$select-option-dark-hover-font-weight: 400; +$select-option-dark-hover-line-height: 1.4285714721679688; +$select-option-dark-hover-letter-spacing: -0.28px; +$select-option-dark-hover-text-align: left; +$select-option-dark-hover-text-transform: none; +$select-option-dark-hover-text-decoration: none; +$select-option-dark-hover-color: #555555; +$select-icon-dark-hover-width: 16px; +$select-icon-dark-hover-width-raw: 16; +$select-icon-dark-hover-height: 16px; +$select-icon-dark-hover-height-raw: 16; +$select-icon-dark-hover-color: #888888; +$select-additional-info-dark-hover-spacing: 5px; +$select-additional-info-dark-hover-font-family: 'Inter'; +$select-additional-info-dark-hover-font-size: 12px; +$select-additional-info-dark-hover-font-weight: 400; +$select-additional-info-dark-hover-line-height: 1.6; +$select-additional-info-dark-hover-letter-spacing: -0.24px; +$select-additional-info-dark-hover-text-align: left; +$select-additional-info-dark-hover-text-transform: none; +$select-additional-info-dark-hover-text-decoration: none; +$select-additional-info-dark-hover-color: rgba(255, 255, 255, 0.6499999761581421); + +// select, theme: Dark, state: Default +$select-dark-background: #f8f8f8; +$select-dark-padding-top: 12px; +$select-dark-padding-right: 16px; +$select-dark-padding-bottom: 12px; +$select-dark-padding-left: 20px; +$select-dark-border-width: 1px; +$select-dark-border-radius: 4px; +$select-dark-border-color: transparent; +$select-dark-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-dark-spacing: 5px; +$select-label-dark-font-family: 'Inter'; +$select-label-dark-font-size: 12px; +$select-label-dark-font-weight: 400; +$select-label-dark-line-height: 1.6; +$select-label-dark-letter-spacing: -0.24px; +$select-label-dark-text-align: left; +$select-label-dark-text-transform: none; +$select-label-dark-text-decoration: none; +$select-label-dark-color: rgba(255, 255, 255, 0.6499999761581421); +$select-option-dark-font-family: 'Inter'; +$select-option-dark-font-size: 14px; +$select-option-dark-font-weight: 400; +$select-option-dark-line-height: 1.4285714721679688; +$select-option-dark-letter-spacing: -0.28px; +$select-option-dark-text-align: left; +$select-option-dark-text-transform: none; +$select-option-dark-text-decoration: none; +$select-option-dark-color: #555555; +$select-icon-dark-width: 16px; +$select-icon-dark-width-raw: 16; +$select-icon-dark-height: 16px; +$select-icon-dark-height-raw: 16; +$select-icon-dark-color: #888888; +$select-additional-info-dark-spacing: 5px; +$select-additional-info-dark-font-family: 'Inter'; +$select-additional-info-dark-font-size: 12px; +$select-additional-info-dark-font-weight: 400; +$select-additional-info-dark-line-height: 1.6; +$select-additional-info-dark-letter-spacing: -0.24px; +$select-additional-info-dark-text-align: left; +$select-additional-info-dark-text-transform: none; +$select-additional-info-dark-text-decoration: none; +$select-additional-info-dark-color: rgba(255, 255, 255, 0.6499999761581421); + +// select, theme: Light, state: Disabled +$select-disabled-background: #f8f8f8; +$select-disabled-padding-top: 12px; +$select-disabled-padding-right: 16px; +$select-disabled-padding-bottom: 12px; +$select-disabled-padding-left: 20px; +$select-disabled-border-width: 1px; +$select-disabled-border-radius: 4px; +$select-disabled-border-color: transparent; +$select-disabled-box-shadow: none; +$select-label-disabled-spacing: 5px; +$select-label-disabled-font-family: 'Inter'; +$select-label-disabled-font-size: 12px; +$select-label-disabled-font-weight: 400; +$select-label-disabled-line-height: 1.6; +$select-label-disabled-letter-spacing: -0.24px; +$select-label-disabled-text-align: left; +$select-label-disabled-text-transform: none; +$select-label-disabled-text-decoration: none; +$select-label-disabled-color: #777777; +$select-option-disabled-font-family: 'Inter'; +$select-option-disabled-font-size: 14px; +$select-option-disabled-font-weight: 400; +$select-option-disabled-line-height: 1.4285714721679688; +$select-option-disabled-letter-spacing: -0.28px; +$select-option-disabled-text-align: left; +$select-option-disabled-text-transform: none; +$select-option-disabled-text-decoration: none; +$select-option-disabled-color: #777777; +$select-icon-disabled-width: 16px; +$select-icon-disabled-width-raw: 16; +$select-icon-disabled-height: 16px; +$select-icon-disabled-height-raw: 16; +$select-icon-disabled-color: #cccccc; +$select-additional-info-disabled-spacing: 5px; +$select-additional-info-disabled-font-family: 'Inter'; +$select-additional-info-disabled-font-size: 12px; +$select-additional-info-disabled-font-weight: 400; +$select-additional-info-disabled-line-height: 1.6; +$select-additional-info-disabled-letter-spacing: -0.24px; +$select-additional-info-disabled-text-align: left; +$select-additional-info-disabled-text-transform: none; +$select-additional-info-disabled-text-decoration: none; +$select-additional-info-disabled-color: #777777; + +// select, theme: Light, state: Error +$select-error-background: #ffffff; +$select-error-padding-top: 12px; +$select-error-padding-right: 16px; +$select-error-padding-bottom: 12px; +$select-error-padding-left: 20px; +$select-error-border-width: 1px; +$select-error-border-radius: 4px; +$select-error-border-color: #dc3545; +$select-error-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-error-spacing: 5px; +$select-label-error-font-family: 'Inter'; +$select-label-error-font-size: 12px; +$select-label-error-font-weight: 400; +$select-label-error-line-height: 1.6; +$select-label-error-letter-spacing: -0.24px; +$select-label-error-text-align: left; +$select-label-error-text-transform: none; +$select-label-error-text-decoration: none; +$select-label-error-color: #555555; +$select-option-error-font-family: 'Inter'; +$select-option-error-font-size: 14px; +$select-option-error-font-weight: 400; +$select-option-error-line-height: 1.4285714721679688; +$select-option-error-letter-spacing: -0.28px; +$select-option-error-text-align: left; +$select-option-error-text-transform: none; +$select-option-error-text-decoration: none; +$select-option-error-color: #777777; +$select-icon-error-width: 16px; +$select-icon-error-width-raw: 16; +$select-icon-error-height: 16px; +$select-icon-error-height-raw: 16; +$select-icon-error-color: #888888; +$select-additional-info-error-spacing: 5px; +$select-additional-info-error-font-family: 'Inter'; +$select-additional-info-error-font-size: 12px; +$select-additional-info-error-font-weight: 400; +$select-additional-info-error-line-height: 1.6; +$select-additional-info-error-letter-spacing: -0.24px; +$select-additional-info-error-text-align: left; +$select-additional-info-error-text-transform: none; +$select-additional-info-error-text-decoration: none; +$select-additional-info-error-color: #dc3545; + +// select, theme: Light, state: Active +$select-active-background: #ffffff; +$select-active-padding-top: 12px; +$select-active-padding-right: 16px; +$select-active-padding-bottom: 12px; +$select-active-padding-left: 20px; +$select-active-border-width: 1px; +$select-active-border-radius: 4px; +$select-active-border-color: #929292; +$select-active-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-active-spacing: 5px; +$select-label-active-font-family: 'Inter'; +$select-label-active-font-size: 12px; +$select-label-active-font-weight: 400; +$select-label-active-line-height: 1.6; +$select-label-active-letter-spacing: -0.24px; +$select-label-active-text-align: left; +$select-label-active-text-transform: none; +$select-label-active-text-decoration: none; +$select-label-active-color: rgba(0, 0, 0, 0.800000011920929); +$select-option-active-font-family: 'Inter'; +$select-option-active-font-size: 14px; +$select-option-active-font-weight: 400; +$select-option-active-line-height: 1.4285714721679688; +$select-option-active-letter-spacing: -0.28px; +$select-option-active-text-align: left; +$select-option-active-text-transform: none; +$select-option-active-text-decoration: none; +$select-option-active-color: #000000; +$select-icon-active-width: 16px; +$select-icon-active-width-raw: 16; +$select-icon-active-height: 16px; +$select-icon-active-height-raw: 16; +$select-icon-active-color: #888888; +$select-additional-info-active-spacing: 5px; +$select-additional-info-active-font-family: 'Inter'; +$select-additional-info-active-font-size: 12px; +$select-additional-info-active-font-weight: 400; +$select-additional-info-active-line-height: 1.6; +$select-additional-info-active-letter-spacing: -0.24px; +$select-additional-info-active-text-align: left; +$select-additional-info-active-text-transform: none; +$select-additional-info-active-text-decoration: none; +$select-additional-info-active-color: #777777; + +// select, theme: Light, state: Hover +$select-hover-background: #ffffff; +$select-hover-padding-top: 12px; +$select-hover-padding-right: 16px; +$select-hover-padding-bottom: 12px; +$select-hover-padding-left: 20px; +$select-hover-border-width: 1px; +$select-hover-border-radius: 4px; +$select-hover-border-color: #b3b3b3; +$select-hover-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-hover-spacing: 5px; +$select-label-hover-font-family: 'Inter'; +$select-label-hover-font-size: 12px; +$select-label-hover-font-weight: 400; +$select-label-hover-line-height: 1.6; +$select-label-hover-letter-spacing: -0.24px; +$select-label-hover-text-align: left; +$select-label-hover-text-transform: none; +$select-label-hover-text-decoration: none; +$select-label-hover-color: #555555; +$select-option-hover-font-family: 'Inter'; +$select-option-hover-font-size: 14px; +$select-option-hover-font-weight: 400; +$select-option-hover-line-height: 1.4285714721679688; +$select-option-hover-letter-spacing: -0.28px; +$select-option-hover-text-align: left; +$select-option-hover-text-transform: none; +$select-option-hover-text-decoration: none; +$select-option-hover-color: #777777; +$select-icon-hover-width: 16px; +$select-icon-hover-width-raw: 16; +$select-icon-hover-height: 16px; +$select-icon-hover-height-raw: 16; +$select-icon-hover-color: #888888; +$select-additional-info-hover-spacing: 5px; +$select-additional-info-hover-font-family: 'Inter'; +$select-additional-info-hover-font-size: 12px; +$select-additional-info-hover-font-weight: 400; +$select-additional-info-hover-line-height: 1.6; +$select-additional-info-hover-letter-spacing: -0.24px; +$select-additional-info-hover-text-align: left; +$select-additional-info-hover-text-transform: none; +$select-additional-info-hover-text-decoration: none; +$select-additional-info-hover-color: #777777; + +// select, theme: Light, state: Default +$select-background: #ffffff; +$select-padding-top: 12px; +$select-padding-right: 16px; +$select-padding-bottom: 12px; +$select-padding-left: 20px; +$select-border-width: 1px; +$select-border-radius: 4px; +$select-border-color: #e8e8e8; +$select-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07999999821186066); +$select-label-spacing: 5px; +$select-label-font-family: 'Inter'; +$select-label-font-size: 12px; +$select-label-font-weight: 400; +$select-label-line-height: 1.6; +$select-label-letter-spacing: -0.24px; +$select-label-text-align: left; +$select-label-text-transform: none; +$select-label-text-decoration: none; +$select-label-color: #555555; +$select-option-font-family: 'Inter'; +$select-option-font-size: 14px; +$select-option-font-weight: 400; +$select-option-line-height: 1.4285714721679688; +$select-option-letter-spacing: -0.28px; +$select-option-text-align: left; +$select-option-text-transform: none; +$select-option-text-decoration: none; +$select-option-color: #777777; +$select-icon-width: 16px; +$select-icon-width-raw: 16; +$select-icon-height: 16px; +$select-icon-height-raw: 16; +$select-icon-color: #888888; +$select-additional-info-spacing: 5px; +$select-additional-info-font-family: 'Inter'; +$select-additional-info-font-size: 12px; +$select-additional-info-font-weight: 400; +$select-additional-info-line-height: 1.6; +$select-additional-info-letter-spacing: -0.24px; +$select-additional-info-text-align: left; +$select-additional-info-text-transform: none; +$select-additional-info-text-decoration: none; +$select-additional-info-color: #777777; + +// Small select +$select-small-background: transparent; +$select-small-padding-top: 10px; +$select-small-padding-right: 12px; +$select-small-padding-bottom: 10px; +$select-small-padding-left: 16px; +$select-small-border-width: 1px; +$select-small-border-radius: 4px; +$select-small-border-color: #000000; +$select-small-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10000000149011612); +$select-small-label-spacing: 2px; +$select-small-label-font-family: 'Inter'; +$select-small-label-font-size: 12px; +$select-small-label-font-weight: 400; +$select-small-label-line-height: 1.6; +$select-small-label-letter-spacing: -0.24px; +$select-small-label-text-align: left; +$select-small-label-text-transform: none; +$select-small-label-text-decoration: none; +$select-small-label-color: #555555; +$select-small-option-font-family: 'Inter'; +$select-small-option-font-size: 12px; +$select-small-option-font-weight: 400; +$select-small-option-line-height: 1.6666667175292968; +$select-small-option-letter-spacing: -0.24px; +$select-small-option-text-align: left; +$select-small-option-text-transform: none; +$select-small-option-text-decoration: none; +$select-small-option-color: #555555; +$select-small-icon-width: 16px; +$select-small-icon-width-raw: 16; +$select-small-icon-height: 16px; +$select-small-icon-height-raw: 16; +$select-small-icon-color: #888888; +$select-small-additional-info-spacing: 2px; +$select-small-additional-info-font-family: 'Inter'; +$select-small-additional-info-font-size: 12px; +$select-small-additional-info-font-weight: 400; +$select-small-additional-info-line-height: 1.6; +$select-small-additional-info-letter-spacing: -0.24px; +$select-small-additional-info-text-align: left; +$select-small-additional-info-text-transform: none; +$select-small-additional-info-text-decoration: none; +$select-small-additional-info-color: #555555; + +// Medium select +$select-medium-background: transparent; +$select-medium-padding-top: 12px; +$select-medium-padding-right: 16px; +$select-medium-padding-bottom: 12px; +$select-medium-padding-left: 20px; +$select-medium-border-width: 1px; +$select-medium-border-radius: 4px; +$select-medium-border-color: #000000; +$select-medium-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10000000149011612); +$select-medium-label-spacing: 5px; +$select-medium-label-font-family: 'Inter'; +$select-medium-label-font-size: 12px; +$select-medium-label-font-weight: 400; +$select-medium-label-line-height: 1.6; +$select-medium-label-letter-spacing: -0.24px; +$select-medium-label-text-align: left; +$select-medium-label-text-transform: none; +$select-medium-label-text-decoration: none; +$select-medium-label-color: #555555; +$select-medium-option-font-family: 'Inter'; +$select-medium-option-font-size: 14px; +$select-medium-option-font-weight: 400; +$select-medium-option-line-height: 1.4285714721679688; +$select-medium-option-letter-spacing: -0.28px; +$select-medium-option-text-align: left; +$select-medium-option-text-transform: none; +$select-medium-option-text-decoration: none; +$select-medium-option-color: #555555; +$select-medium-icon-width: 16px; +$select-medium-icon-width-raw: 16; +$select-medium-icon-height: 16px; +$select-medium-icon-height-raw: 16; +$select-medium-icon-color: #888888; +$select-medium-additional-info-spacing: 5px; +$select-medium-additional-info-font-family: 'Inter'; +$select-medium-additional-info-font-size: 12px; +$select-medium-additional-info-font-weight: 400; +$select-medium-additional-info-line-height: 1.6; +$select-medium-additional-info-letter-spacing: -0.24px; +$select-medium-additional-info-text-align: left; +$select-medium-additional-info-text-transform: none; +$select-medium-additional-info-text-decoration: none; +$select-medium-additional-info-color: #555555; + +// Large select +$select-large-background: transparent; +$select-large-padding-top: 14px; +$select-large-padding-right: 16px; +$select-large-padding-bottom: 14px; +$select-large-padding-left: 20px; +$select-large-border-width: 1px; +$select-large-border-radius: 4px; +$select-large-border-color: #000000; +$select-large-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10000000149011612); +$select-large-label-spacing: 5px; +$select-large-label-font-family: 'Inter'; +$select-large-label-font-size: 12px; +$select-large-label-font-weight: 400; +$select-large-label-line-height: 1.6; +$select-large-label-letter-spacing: -0.24px; +$select-large-label-text-align: left; +$select-large-label-text-transform: none; +$select-large-label-text-decoration: none; +$select-large-label-color: #555555; +$select-large-option-font-family: 'Inter'; +$select-large-option-font-size: 16px; +$select-large-option-font-weight: 400; +$select-large-option-line-height: 1.25; +$select-large-option-letter-spacing: -0.32px; +$select-large-option-text-align: left; +$select-large-option-text-transform: none; +$select-large-option-text-decoration: none; +$select-large-option-color: #555555; +$select-large-icon-width: 16px; +$select-large-icon-width-raw: 16; +$select-large-icon-height: 16px; +$select-large-icon-height-raw: 16; +$select-large-icon-color: #888888; +$select-large-additional-info-spacing: 5px; +$select-large-additional-info-font-family: 'Inter'; +$select-large-additional-info-font-size: 12px; +$select-large-additional-info-font-weight: 400; +$select-large-additional-info-line-height: 1.6; +$select-large-additional-info-letter-spacing: -0.24px; +$select-large-additional-info-text-align: left; +$select-large-additional-info-text-transform: none; +$select-large-additional-info-text-decoration: none; +$select-large-additional-info-color: #555555; \ No newline at end of file diff --git a/sass/project/default_vars/switches.scss b/sass/project/default_vars/switches.scss new file mode 100644 index 00000000..0b9f3ce3 --- /dev/null +++ b/sass/project/default_vars/switches.scss @@ -0,0 +1,458 @@ +$switch-sizes: ( "sm", "md", "lg" ); + +$switch-themes: ( "dark", "light" ); + +$switch-states: ( "disabled", "hover", "" ); + +.switch { + + // switch , theme: Dark, state: Disabled + --switch-disabled-dark-on-padding-start: 12px; + --switch-disabled-dark-on-width: 36px; + --switch-disabled-dark-on-width-raw: 36; + --switch-disabled-dark-on-height: 20px; + --switch-disabled-dark-on-height-raw: 20; + --switch-disabled-dark-on-background: #258cf2; + --switch-disabled-dark-on-border-width: 1px; + --switch-disabled-dark-on-border-radius: 174px; + --switch-disabled-dark-on-border-color: transparent; + --switch-disabled-dark-on-opacity: 0.4000000059604645; + --switch-disabled-dark-on-box-shadow: none; + --switch-disabled-label-dark-on-font-family: 'Inter'; + --switch-disabled-label-dark-on-font-size: 14px; + --switch-disabled-label-dark-on-font-weight: 400; + --switch-disabled-label-dark-on-line-height: 1.4285714721679688; + --switch-disabled-label-dark-on-letter-spacing: -0.28px; + --switch-disabled-label-dark-on-text-align: left; + --switch-disabled-label-dark-on-text-transform: none; + --switch-disabled-label-dark-on-text-decoration: none; + --switch-disabled-label-dark-on-color: rgba(255, 255, 255, 0.44999998807907104); + --switch-disabled-label-dark-on-opacity: 1; + --switch-disabled-thumb-dark-on-width: 12px; + --switch-disabled-thumb-dark-on-width-raw: 12; + --switch-disabled-thumb-dark-on-height: 12px; + --switch-disabled-thumb-dark-on-height-raw: 12; + --switch-disabled-thumb-dark-on-background: #ffffff; + --switch-disabled-thumb-dark-on-border-width: 1px; + --switch-disabled-thumb-dark-on-border-color: transparent; + + // switch , theme: Dark, state: Hover + --switch-hover-dark-on-padding-start: 12px; + --switch-hover-dark-on-width: 36px; + --switch-hover-dark-on-width-raw: 36; + --switch-hover-dark-on-height: 20px; + --switch-hover-dark-on-height-raw: 20; + --switch-hover-dark-on-background: #0073e6; + --switch-hover-dark-on-border-width: 1px; + --switch-hover-dark-on-border-radius: 174px; + --switch-hover-dark-on-border-color: transparent; + --switch-hover-dark-on-opacity: 1; + --switch-hover-dark-on-box-shadow: none; + --switch-hover-label-dark-on-font-family: 'Inter'; + --switch-hover-label-dark-on-font-size: 14px; + --switch-hover-label-dark-on-font-weight: 400; + --switch-hover-label-dark-on-line-height: 1.4285714721679688; + --switch-hover-label-dark-on-letter-spacing: -0.28px; + --switch-hover-label-dark-on-text-align: left; + --switch-hover-label-dark-on-text-transform: none; + --switch-hover-label-dark-on-text-decoration: none; + --switch-hover-label-dark-on-color: rgba(255, 255, 255, 0.8500000238418579); + --switch-hover-label-dark-on-opacity: 1; + --switch-hover-thumb-dark-on-width: 12px; + --switch-hover-thumb-dark-on-width-raw: 12; + --switch-hover-thumb-dark-on-height: 12px; + --switch-hover-thumb-dark-on-height-raw: 12; + --switch-hover-thumb-dark-on-background: #ffffff; + --switch-hover-thumb-dark-on-border-width: 1px; + --switch-hover-thumb-dark-on-border-color: transparent; + + // switch , theme: Dark, state: Default + --switch-dark-on-padding-start: 12px; + --switch-dark-on-width: 36px; + --switch-dark-on-width-raw: 36; + --switch-dark-on-height: 20px; + --switch-dark-on-height-raw: 20; + --switch-dark-on-background: #258cf2; + --switch-dark-on-border-width: 1px; + --switch-dark-on-border-radius: 174px; + --switch-dark-on-border-color: transparent; + --switch-dark-on-opacity: 1; + --switch-dark-on-box-shadow: none; + --switch-label-dark-on-font-family: 'Inter'; + --switch-label-dark-on-font-size: 14px; + --switch-label-dark-on-font-weight: 400; + --switch-label-dark-on-line-height: 1.4285714721679688; + --switch-label-dark-on-letter-spacing: -0.28px; + --switch-label-dark-on-text-align: left; + --switch-label-dark-on-text-transform: none; + --switch-label-dark-on-text-decoration: none; + --switch-label-dark-on-color: rgba(255, 255, 255, 0.8500000238418579); + --switch-label-dark-on-opacity: 1; + --switch-thumb-dark-on-width: 12px; + --switch-thumb-dark-on-width-raw: 12; + --switch-thumb-dark-on-height: 12px; + --switch-thumb-dark-on-height-raw: 12; + --switch-thumb-dark-on-background: #ffffff; + --switch-thumb-dark-on-border-width: 1px; + --switch-thumb-dark-on-border-color: transparent; + + // switch , theme: Dark, state: Disabled + --switch-disabled-dark-off-padding-start: 12px; + --switch-disabled-dark-off-width: 36px; + --switch-disabled-dark-off-width-raw: 36; + --switch-disabled-dark-off-height: 20px; + --switch-disabled-dark-off-height-raw: 20; + --switch-disabled-dark-off-background: #6e6e6e; + --switch-disabled-dark-off-border-width: 1px; + --switch-disabled-dark-off-border-radius: 174px; + --switch-disabled-dark-off-border-color: transparent; + --switch-disabled-dark-off-opacity: 0.4000000059604645; + --switch-disabled-dark-off-box-shadow: none; + --switch-disabled-label-dark-off-font-family: 'Inter'; + --switch-disabled-label-dark-off-font-size: 14px; + --switch-disabled-label-dark-off-font-weight: 400; + --switch-disabled-label-dark-off-line-height: 1.4285714721679688; + --switch-disabled-label-dark-off-letter-spacing: -0.28px; + --switch-disabled-label-dark-off-text-align: left; + --switch-disabled-label-dark-off-text-transform: none; + --switch-disabled-label-dark-off-text-decoration: none; + --switch-disabled-label-dark-off-color: rgba(255, 255, 255, 0.44999998807907104); + --switch-disabled-label-dark-off-opacity: 1; + --switch-disabled-thumb-dark-off-width: 12px; + --switch-disabled-thumb-dark-off-width-raw: 12; + --switch-disabled-thumb-dark-off-height: 12px; + --switch-disabled-thumb-dark-off-height-raw: 12; + --switch-disabled-thumb-dark-off-background: #000000; + --switch-disabled-thumb-dark-off-border-width: 1px; + --switch-disabled-thumb-dark-off-border-color: transparent; + + // switch , theme: Dark, state: Hover + --switch-hover-dark-off-padding-start: 12px; + --switch-hover-dark-off-width: 36px; + --switch-hover-dark-off-width-raw: 36; + --switch-hover-dark-off-height: 20px; + --switch-hover-dark-off-height-raw: 20; + --switch-hover-dark-off-background: transparent; + --switch-hover-dark-off-border-width: 1px; + --switch-hover-dark-off-border-radius: 174px; + --switch-hover-dark-off-border-color: rgba(255, 255, 255, 0.75); + --switch-hover-dark-off-opacity: 1; + --switch-hover-dark-off-box-shadow: none; + --switch-hover-label-dark-off-font-family: 'Inter'; + --switch-hover-label-dark-off-font-size: 14px; + --switch-hover-label-dark-off-font-weight: 400; + --switch-hover-label-dark-off-line-height: 1.4285714721679688; + --switch-hover-label-dark-off-letter-spacing: -0.28px; + --switch-hover-label-dark-off-text-align: left; + --switch-hover-label-dark-off-text-transform: none; + --switch-hover-label-dark-off-text-decoration: none; + --switch-hover-label-dark-off-color: rgba(255, 255, 255, 0.8500000238418579); + --switch-hover-label-dark-off-opacity: 1; + --switch-hover-thumb-dark-off-width: 12px; + --switch-hover-thumb-dark-off-width-raw: 12; + --switch-hover-thumb-dark-off-height: 12px; + --switch-hover-thumb-dark-off-height-raw: 12; + --switch-hover-thumb-dark-off-background: #aaaaaa; + --switch-hover-thumb-dark-off-border-width: 1px; + --switch-hover-thumb-dark-off-border-color: transparent; + + // switch , theme: Dark, state: Default + --switch-dark-off-padding-start: 12px; + --switch-dark-off-width: 36px; + --switch-dark-off-width-raw: 36; + --switch-dark-off-height: 20px; + --switch-dark-off-height-raw: 20; + --switch-dark-off-background: transparent; + --switch-dark-off-border-width: 1px; + --switch-dark-off-border-radius: 174px; + --switch-dark-off-border-color: rgba(255, 255, 255, 0.4000000059604645); + --switch-dark-off-opacity: 1; + --switch-dark-off-box-shadow: none; + --switch-label-dark-off-font-family: 'Inter'; + --switch-label-dark-off-font-size: 14px; + --switch-label-dark-off-font-weight: 400; + --switch-label-dark-off-line-height: 1.4285714721679688; + --switch-label-dark-off-letter-spacing: -0.28px; + --switch-label-dark-off-text-align: left; + --switch-label-dark-off-text-transform: none; + --switch-label-dark-off-text-decoration: none; + --switch-label-dark-off-color: rgba(255, 255, 255, 0.6499999761581421); + --switch-label-dark-off-opacity: 1; + --switch-thumb-dark-off-width: 12px; + --switch-thumb-dark-off-width-raw: 12; + --switch-thumb-dark-off-height: 12px; + --switch-thumb-dark-off-height-raw: 12; + --switch-thumb-dark-off-background: #888888; + --switch-thumb-dark-off-border-width: 1px; + --switch-thumb-dark-off-border-color: transparent; + + // switch , theme: Light, state: Disabled + --switch-disabled-on-padding-start: 12px; + --switch-disabled-on-width: 36px; + --switch-disabled-on-width-raw: 36; + --switch-disabled-on-height: 20px; + --switch-disabled-on-height-raw: 20; + --switch-disabled-on-background: #258cf2; + --switch-disabled-on-border-width: 1px; + --switch-disabled-on-border-radius: 174px; + --switch-disabled-on-border-color: transparent; + --switch-disabled-on-opacity: 0.30000001192092896; + --switch-disabled-on-box-shadow: none; + --switch-disabled-label-on-font-family: 'Inter'; + --switch-disabled-label-on-font-size: 14px; + --switch-disabled-label-on-font-weight: 400; + --switch-disabled-label-on-line-height: 1.4285714721679688; + --switch-disabled-label-on-letter-spacing: -0.28px; + --switch-disabled-label-on-text-align: left; + --switch-disabled-label-on-text-transform: none; + --switch-disabled-label-on-text-decoration: none; + --switch-disabled-label-on-color: #777777; + --switch-disabled-label-on-opacity: 1; + --switch-disabled-thumb-on-width: 12px; + --switch-disabled-thumb-on-width-raw: 12; + --switch-disabled-thumb-on-height: 12px; + --switch-disabled-thumb-on-height-raw: 12; + --switch-disabled-thumb-on-background: #ffffff; + --switch-disabled-thumb-on-border-width: 1px; + --switch-disabled-thumb-on-border-color: transparent; + + // switch , theme: Light, state: Hover + --switch-hover-on-padding-start: 12px; + --switch-hover-on-width: 36px; + --switch-hover-on-width-raw: 36; + --switch-hover-on-height: 20px; + --switch-hover-on-height-raw: 20; + --switch-hover-on-background: #0f69c1; + --switch-hover-on-border-width: 2px; + --switch-hover-on-border-radius: 174px; + --switch-hover-on-border-color: transparent; + --switch-hover-on-opacity: 1; + --switch-hover-on-box-shadow: none; + --switch-hover-label-on-font-family: 'Inter'; + --switch-hover-label-on-font-size: 14px; + --switch-hover-label-on-font-weight: 400; + --switch-hover-label-on-line-height: 1.4285714721679688; + --switch-hover-label-on-letter-spacing: -0.28px; + --switch-hover-label-on-text-align: left; + --switch-hover-label-on-text-transform: none; + --switch-hover-label-on-text-decoration: none; + --switch-hover-label-on-color: rgba(0, 0, 0, 0.800000011920929); + --switch-hover-label-on-opacity: 1; + --switch-hover-thumb-on-width: 12px; + --switch-hover-thumb-on-width-raw: 12; + --switch-hover-thumb-on-height: 12px; + --switch-hover-thumb-on-height-raw: 12; + --switch-hover-thumb-on-background: #ffffff; + --switch-hover-thumb-on-border-width: 1px; + --switch-hover-thumb-on-border-color: transparent; + + // switch , theme: Light, state: Default + --switch-on-padding-start: 12px; + --switch-on-width: 36px; + --switch-on-width-raw: 36; + --switch-on-height: 20px; + --switch-on-height-raw: 20; + --switch-on-background: #0073e6; + --switch-on-border-width: 1px; + --switch-on-border-radius: 174px; + --switch-on-border-color: transparent; + --switch-on-opacity: 1; + --switch-on-box-shadow: none; + --switch-label-on-font-family: 'Inter'; + --switch-label-on-font-size: 14px; + --switch-label-on-font-weight: 400; + --switch-label-on-line-height: 1.4285714721679688; + --switch-label-on-letter-spacing: -0.28px; + --switch-label-on-text-align: left; + --switch-label-on-text-transform: none; + --switch-label-on-text-decoration: none; + --switch-label-on-color: rgba(0, 0, 0, 0.800000011920929); + --switch-label-on-opacity: 1; + --switch-thumb-on-width: 12px; + --switch-thumb-on-width-raw: 12; + --switch-thumb-on-height: 12px; + --switch-thumb-on-height-raw: 12; + --switch-thumb-on-background: #ffffff; + --switch-thumb-on-border-width: 1px; + --switch-thumb-on-border-color: transparent; + + // switch , theme: Light, state: Disabled + --switch-disabled-off-padding-start: 12px; + --switch-disabled-off-width: 36px; + --switch-disabled-off-width-raw: 36; + --switch-disabled-off-height: 20px; + --switch-disabled-off-height-raw: 20; + --switch-disabled-off-background: #cccccc; + --switch-disabled-off-border-width: 1px; + --switch-disabled-off-border-radius: 174px; + --switch-disabled-off-border-color: transparent; + --switch-disabled-off-opacity: 0.30000001192092896; + --switch-disabled-off-box-shadow: none; + --switch-disabled-label-off-font-family: 'Inter'; + --switch-disabled-label-off-font-size: 14px; + --switch-disabled-label-off-font-weight: 400; + --switch-disabled-label-off-line-height: 1.4285714721679688; + --switch-disabled-label-off-letter-spacing: -0.28px; + --switch-disabled-label-off-text-align: left; + --switch-disabled-label-off-text-transform: none; + --switch-disabled-label-off-text-decoration: none; + --switch-disabled-label-off-color: #777777; + --switch-disabled-label-off-opacity: 1; + --switch-disabled-thumb-off-width: 12px; + --switch-disabled-thumb-off-width-raw: 12; + --switch-disabled-thumb-off-height: 12px; + --switch-disabled-thumb-off-height-raw: 12; + --switch-disabled-thumb-off-background: #ffffff; + --switch-disabled-thumb-off-border-width: 1px; + --switch-disabled-thumb-off-border-color: transparent; + + // switch , theme: Light, state: Hover + --switch-hover-off-padding-start: 12px; + --switch-hover-off-width: 36px; + --switch-hover-off-width-raw: 36; + --switch-hover-off-height: 20px; + --switch-hover-off-height-raw: 20; + --switch-hover-off-background: transparent; + --switch-hover-off-border-width: 1px; + --switch-hover-off-border-radius: 174px; + --switch-hover-off-border-color: #929292; + --switch-hover-off-opacity: 1; + --switch-hover-off-box-shadow: none; + --switch-hover-label-off-font-family: 'Inter'; + --switch-hover-label-off-font-size: 14px; + --switch-hover-label-off-font-weight: 400; + --switch-hover-label-off-line-height: 1.4285714721679688; + --switch-hover-label-off-letter-spacing: -0.28px; + --switch-hover-label-off-text-align: left; + --switch-hover-label-off-text-transform: none; + --switch-hover-label-off-text-decoration: none; + --switch-hover-label-off-color: rgba(0, 0, 0, 0.800000011920929); + --switch-hover-label-off-opacity: 1; + --switch-hover-thumb-off-width: 12px; + --switch-hover-thumb-off-width-raw: 12; + --switch-hover-thumb-off-height: 12px; + --switch-hover-thumb-off-height-raw: 12; + --switch-hover-thumb-off-background: #888888; + --switch-hover-thumb-off-border-width: 1px; + --switch-hover-thumb-off-border-color: transparent; + + // switch , theme: Light, state: Default + --switch-off-padding-start: 12px; + --switch-off-width: 36px; + --switch-off-width-raw: 36; + --switch-off-height: 20px; + --switch-off-height-raw: 20; + --switch-off-background: transparent; + --switch-off-border-width: 1px; + --switch-off-border-radius: 174px; + --switch-off-border-color: #b3b3b3; + --switch-off-opacity: 1; + --switch-off-box-shadow: none; + --switch-label-off-font-family: 'Inter'; + --switch-label-off-font-size: 14px; + --switch-label-off-font-weight: 400; + --switch-label-off-line-height: 1.4285714721679688; + --switch-label-off-letter-spacing: -0.28px; + --switch-label-off-text-align: left; + --switch-label-off-text-transform: none; + --switch-label-off-text-decoration: none; + --switch-label-off-color: #555555; + --switch-label-off-opacity: 1; + --switch-thumb-off-width: 12px; + --switch-thumb-off-width-raw: 12; + --switch-thumb-off-height: 12px; + --switch-thumb-off-height-raw: 12; + --switch-thumb-off-background: #aaaaaa; + --switch-thumb-off-border-width: 1px; + --switch-thumb-off-border-color: transparent; + + // switch Small falsefalse + --switch-small-off-padding-start: 10px; + --switch-small-off-width: 30px; + --switch-small-off-width-raw: 30; + --switch-small-off-height: 16px; + --switch-small-off-height-raw: 16; + --switch-small-off-background: transparent; + --switch-small-off-border-width: 1px; + --switch-small-off-border-radius: 174px; + --switch-small-off-border-color: #000000; + --switch-small-off-opacity: 1; + --switch-small-off-box-shadow: none; + --switch-small-label-off-font-family: 'Inter'; + --switch-small-label-off-font-size: 12px; + --switch-small-label-off-font-weight: 400; + --switch-small-label-off-line-height: 1.6666667175292968; + --switch-small-label-off-letter-spacing: -0.24px; + --switch-small-label-off-text-align: left; + --switch-small-label-off-text-transform: none; + --switch-small-label-off-text-decoration: none; + --switch-small-label-off-color: #555555; + --switch-small-label-off-opacity: 1; + --switch-small-thumb-off-width: 10px; + --switch-small-thumb-off-width-raw: 10; + --switch-small-thumb-off-height: 10px; + --switch-small-thumb-off-height-raw: 10; + --switch-small-thumb-off-background: #000000; + --switch-small-thumb-off-border-width: 1px; + --switch-small-thumb-off-border-color: transparent; + + // switch Medium falsefalse + --switch-medium-off-padding-start: 12px; + --switch-medium-off-width: 36px; + --switch-medium-off-width-raw: 36; + --switch-medium-off-height: 20px; + --switch-medium-off-height-raw: 20; + --switch-medium-off-background: transparent; + --switch-medium-off-border-width: 1px; + --switch-medium-off-border-radius: 174px; + --switch-medium-off-border-color: #000000; + --switch-medium-off-opacity: 1; + --switch-medium-off-box-shadow: none; + --switch-medium-label-off-font-family: 'Inter'; + --switch-medium-label-off-font-size: 14px; + --switch-medium-label-off-font-weight: 400; + --switch-medium-label-off-line-height: 1.4285714721679688; + --switch-medium-label-off-letter-spacing: -0.28px; + --switch-medium-label-off-text-align: left; + --switch-medium-label-off-text-transform: none; + --switch-medium-label-off-text-decoration: none; + --switch-medium-label-off-color: #555555; + --switch-medium-label-off-opacity: 1; + --switch-medium-thumb-off-width: 12px; + --switch-medium-thumb-off-width-raw: 12; + --switch-medium-thumb-off-height: 12px; + --switch-medium-thumb-off-height-raw: 12; + --switch-medium-thumb-off-background: #000000; + --switch-medium-thumb-off-border-width: 1px; + --switch-medium-thumb-off-border-color: transparent; + + // switch Large falsefalse + --switch-large-off-padding-start: 14px; + --switch-large-off-width: 44px; + --switch-large-off-width-raw: 44; + --switch-large-off-height: 24px; + --switch-large-off-height-raw: 24; + --switch-large-off-background: transparent; + --switch-large-off-border-width: 1px; + --switch-large-off-border-radius: 174px; + --switch-large-off-border-color: #000000; + --switch-large-off-opacity: 1; + --switch-large-off-box-shadow: none; + --switch-large-label-off-font-family: 'Inter'; + --switch-large-label-off-font-size: 16px; + --switch-large-label-off-font-weight: 400; + --switch-large-label-off-line-height: 1.25; + --switch-large-label-off-letter-spacing: -0.32px; + --switch-large-label-off-text-align: left; + --switch-large-label-off-text-transform: none; + --switch-large-label-off-text-decoration: none; + --switch-large-label-off-color: #555555; + --switch-large-label-off-opacity: 1; + --switch-large-thumb-off-width: 14px; + --switch-large-thumb-off-width-raw: 14; + --switch-large-thumb-off-height: 14px; + --switch-large-thumb-off-height-raw: 14; + --switch-large-thumb-off-background: #000000; + --switch-large-thumb-off-border-width: 1px; + --switch-large-thumb-off-border-color: transparent; +} \ No newline at end of file diff --git a/sass/project/default_vars/switches_vars.scss b/sass/project/default_vars/switches_vars.scss new file mode 100644 index 00000000..f849ac9c --- /dev/null +++ b/sass/project/default_vars/switches_vars.scss @@ -0,0 +1,449 @@ +// switch, theme: Dark, state: Disabled +$switch-disabled-dark-on-padding-start: 12px; +$switch-disabled-dark-on-width: 36px; +$switch-disabled-dark-on-width-raw: 36; +$switch-disabled-dark-on-height: 20px; +$switch-disabled-dark-on-height-raw: 20; +$switch-disabled-dark-on-background: #258cf2; +$switch-disabled-dark-on-border-width: 1px; +$switch-disabled-dark-on-border-radius: 174px; +$switch-disabled-dark-on-border-color: transparent; +$switch-disabled-dark-on-opacity: 0.4000000059604645; +$switch-disabled-dark-on-box-shadow: none; +$switch-disabled-label-dark-on-font-family: 'Inter'; +$switch-disabled-label-dark-on-font-size: 14px; +$switch-disabled-label-dark-on-font-weight: 400; +$switch-disabled-label-dark-on-line-height: 1.4285714721679688; +$switch-disabled-label-dark-on-letter-spacing: -0.28px; +$switch-disabled-label-dark-on-text-align: left; +$switch-disabled-label-dark-on-text-transform: none; +$switch-disabled-label-dark-on-text-decoration: none; +$switch-disabled-label-dark-on-color: rgba(255, 255, 255, 0.44999998807907104); +$switch-disabled-label-dark-on-opacity: 1; +$switch-disabled-thumb-dark-on-width: 12px; +$switch-disabled-thumb-dark-on-width-raw: 12; +$switch-disabled-thumb-dark-on-height: 12px; +$switch-disabled-thumb-dark-on-height-raw: 12; +$switch-disabled-thumb-dark-on-background: #ffffff; +$switch-disabled-thumb-dark-on-border-width: 1px; +$switch-disabled-thumb-dark-on-border-color: transparent; + +// switch, theme: Dark, state: Hover +$switch-hover-dark-on-padding-start: 12px; +$switch-hover-dark-on-width: 36px; +$switch-hover-dark-on-width-raw: 36; +$switch-hover-dark-on-height: 20px; +$switch-hover-dark-on-height-raw: 20; +$switch-hover-dark-on-background: #0073e6; +$switch-hover-dark-on-border-width: 1px; +$switch-hover-dark-on-border-radius: 174px; +$switch-hover-dark-on-border-color: transparent; +$switch-hover-dark-on-opacity: 1; +$switch-hover-dark-on-box-shadow: none; +$switch-hover-label-dark-on-font-family: 'Inter'; +$switch-hover-label-dark-on-font-size: 14px; +$switch-hover-label-dark-on-font-weight: 400; +$switch-hover-label-dark-on-line-height: 1.4285714721679688; +$switch-hover-label-dark-on-letter-spacing: -0.28px; +$switch-hover-label-dark-on-text-align: left; +$switch-hover-label-dark-on-text-transform: none; +$switch-hover-label-dark-on-text-decoration: none; +$switch-hover-label-dark-on-color: rgba(255, 255, 255, 0.8500000238418579); +$switch-hover-label-dark-on-opacity: 1; +$switch-hover-thumb-dark-on-width: 12px; +$switch-hover-thumb-dark-on-width-raw: 12; +$switch-hover-thumb-dark-on-height: 12px; +$switch-hover-thumb-dark-on-height-raw: 12; +$switch-hover-thumb-dark-on-background: #ffffff; +$switch-hover-thumb-dark-on-border-width: 1px; +$switch-hover-thumb-dark-on-border-color: transparent; + +// switch, theme: Dark, state: Default +$switch-dark-on-padding-start: 12px; +$switch-dark-on-width: 36px; +$switch-dark-on-width-raw: 36; +$switch-dark-on-height: 20px; +$switch-dark-on-height-raw: 20; +$switch-dark-on-background: #258cf2; +$switch-dark-on-border-width: 1px; +$switch-dark-on-border-radius: 174px; +$switch-dark-on-border-color: transparent; +$switch-dark-on-opacity: 1; +$switch-dark-on-box-shadow: none; +$switch-label-dark-on-font-family: 'Inter'; +$switch-label-dark-on-font-size: 14px; +$switch-label-dark-on-font-weight: 400; +$switch-label-dark-on-line-height: 1.4285714721679688; +$switch-label-dark-on-letter-spacing: -0.28px; +$switch-label-dark-on-text-align: left; +$switch-label-dark-on-text-transform: none; +$switch-label-dark-on-text-decoration: none; +$switch-label-dark-on-color: rgba(255, 255, 255, 0.8500000238418579); +$switch-label-dark-on-opacity: 1; +$switch-thumb-dark-on-width: 12px; +$switch-thumb-dark-on-width-raw: 12; +$switch-thumb-dark-on-height: 12px; +$switch-thumb-dark-on-height-raw: 12; +$switch-thumb-dark-on-background: #ffffff; +$switch-thumb-dark-on-border-width: 1px; +$switch-thumb-dark-on-border-color: transparent; + +// switch, theme: Dark, state: Disabled +$switch-disabled-dark-off-padding-start: 12px; +$switch-disabled-dark-off-width: 36px; +$switch-disabled-dark-off-width-raw: 36; +$switch-disabled-dark-off-height: 20px; +$switch-disabled-dark-off-height-raw: 20; +$switch-disabled-dark-off-background: #6e6e6e; +$switch-disabled-dark-off-border-width: 1px; +$switch-disabled-dark-off-border-radius: 174px; +$switch-disabled-dark-off-border-color: transparent; +$switch-disabled-dark-off-opacity: 0.4000000059604645; +$switch-disabled-dark-off-box-shadow: none; +$switch-disabled-label-dark-off-font-family: 'Inter'; +$switch-disabled-label-dark-off-font-size: 14px; +$switch-disabled-label-dark-off-font-weight: 400; +$switch-disabled-label-dark-off-line-height: 1.4285714721679688; +$switch-disabled-label-dark-off-letter-spacing: -0.28px; +$switch-disabled-label-dark-off-text-align: left; +$switch-disabled-label-dark-off-text-transform: none; +$switch-disabled-label-dark-off-text-decoration: none; +$switch-disabled-label-dark-off-color: rgba(255, 255, 255, 0.44999998807907104); +$switch-disabled-label-dark-off-opacity: 1; +$switch-disabled-thumb-dark-off-width: 12px; +$switch-disabled-thumb-dark-off-width-raw: 12; +$switch-disabled-thumb-dark-off-height: 12px; +$switch-disabled-thumb-dark-off-height-raw: 12; +$switch-disabled-thumb-dark-off-background: #000000; +$switch-disabled-thumb-dark-off-border-width: 1px; +$switch-disabled-thumb-dark-off-border-color: transparent; + +// switch, theme: Dark, state: Hover +$switch-hover-dark-off-padding-start: 12px; +$switch-hover-dark-off-width: 36px; +$switch-hover-dark-off-width-raw: 36; +$switch-hover-dark-off-height: 20px; +$switch-hover-dark-off-height-raw: 20; +$switch-hover-dark-off-background: transparent; +$switch-hover-dark-off-border-width: 1px; +$switch-hover-dark-off-border-radius: 174px; +$switch-hover-dark-off-border-color: rgba(255, 255, 255, 0.75); +$switch-hover-dark-off-opacity: 1; +$switch-hover-dark-off-box-shadow: none; +$switch-hover-label-dark-off-font-family: 'Inter'; +$switch-hover-label-dark-off-font-size: 14px; +$switch-hover-label-dark-off-font-weight: 400; +$switch-hover-label-dark-off-line-height: 1.4285714721679688; +$switch-hover-label-dark-off-letter-spacing: -0.28px; +$switch-hover-label-dark-off-text-align: left; +$switch-hover-label-dark-off-text-transform: none; +$switch-hover-label-dark-off-text-decoration: none; +$switch-hover-label-dark-off-color: rgba(255, 255, 255, 0.8500000238418579); +$switch-hover-label-dark-off-opacity: 1; +$switch-hover-thumb-dark-off-width: 12px; +$switch-hover-thumb-dark-off-width-raw: 12; +$switch-hover-thumb-dark-off-height: 12px; +$switch-hover-thumb-dark-off-height-raw: 12; +$switch-hover-thumb-dark-off-background: #aaaaaa; +$switch-hover-thumb-dark-off-border-width: 1px; +$switch-hover-thumb-dark-off-border-color: transparent; + +// switch, theme: Dark, state: Default +$switch-dark-off-padding-start: 12px; +$switch-dark-off-width: 36px; +$switch-dark-off-width-raw: 36; +$switch-dark-off-height: 20px; +$switch-dark-off-height-raw: 20; +$switch-dark-off-background: transparent; +$switch-dark-off-border-width: 1px; +$switch-dark-off-border-radius: 174px; +$switch-dark-off-border-color: rgba(255, 255, 255, 0.4000000059604645); +$switch-dark-off-opacity: 1; +$switch-dark-off-box-shadow: none; +$switch-label-dark-off-font-family: 'Inter'; +$switch-label-dark-off-font-size: 14px; +$switch-label-dark-off-font-weight: 400; +$switch-label-dark-off-line-height: 1.4285714721679688; +$switch-label-dark-off-letter-spacing: -0.28px; +$switch-label-dark-off-text-align: left; +$switch-label-dark-off-text-transform: none; +$switch-label-dark-off-text-decoration: none; +$switch-label-dark-off-color: rgba(255, 255, 255, 0.6499999761581421); +$switch-label-dark-off-opacity: 1; +$switch-thumb-dark-off-width: 12px; +$switch-thumb-dark-off-width-raw: 12; +$switch-thumb-dark-off-height: 12px; +$switch-thumb-dark-off-height-raw: 12; +$switch-thumb-dark-off-background: #888888; +$switch-thumb-dark-off-border-width: 1px; +$switch-thumb-dark-off-border-color: transparent; + +// switch, theme: Light, state: Disabled +$switch-disabled-on-padding-start: 12px; +$switch-disabled-on-width: 36px; +$switch-disabled-on-width-raw: 36; +$switch-disabled-on-height: 20px; +$switch-disabled-on-height-raw: 20; +$switch-disabled-on-background: #258cf2; +$switch-disabled-on-border-width: 1px; +$switch-disabled-on-border-radius: 174px; +$switch-disabled-on-border-color: transparent; +$switch-disabled-on-opacity: 0.30000001192092896; +$switch-disabled-on-box-shadow: none; +$switch-disabled-label-on-font-family: 'Inter'; +$switch-disabled-label-on-font-size: 14px; +$switch-disabled-label-on-font-weight: 400; +$switch-disabled-label-on-line-height: 1.4285714721679688; +$switch-disabled-label-on-letter-spacing: -0.28px; +$switch-disabled-label-on-text-align: left; +$switch-disabled-label-on-text-transform: none; +$switch-disabled-label-on-text-decoration: none; +$switch-disabled-label-on-color: #777777; +$switch-disabled-label-on-opacity: 1; +$switch-disabled-thumb-on-width: 12px; +$switch-disabled-thumb-on-width-raw: 12; +$switch-disabled-thumb-on-height: 12px; +$switch-disabled-thumb-on-height-raw: 12; +$switch-disabled-thumb-on-background: #ffffff; +$switch-disabled-thumb-on-border-width: 1px; +$switch-disabled-thumb-on-border-color: transparent; + +// switch, theme: Light, state: Hover +$switch-hover-on-padding-start: 12px; +$switch-hover-on-width: 36px; +$switch-hover-on-width-raw: 36; +$switch-hover-on-height: 20px; +$switch-hover-on-height-raw: 20; +$switch-hover-on-background: #0f69c1; +$switch-hover-on-border-width: 2px; +$switch-hover-on-border-radius: 174px; +$switch-hover-on-border-color: transparent; +$switch-hover-on-opacity: 1; +$switch-hover-on-box-shadow: none; +$switch-hover-label-on-font-family: 'Inter'; +$switch-hover-label-on-font-size: 14px; +$switch-hover-label-on-font-weight: 400; +$switch-hover-label-on-line-height: 1.4285714721679688; +$switch-hover-label-on-letter-spacing: -0.28px; +$switch-hover-label-on-text-align: left; +$switch-hover-label-on-text-transform: none; +$switch-hover-label-on-text-decoration: none; +$switch-hover-label-on-color: rgba(0, 0, 0, 0.800000011920929); +$switch-hover-label-on-opacity: 1; +$switch-hover-thumb-on-width: 12px; +$switch-hover-thumb-on-width-raw: 12; +$switch-hover-thumb-on-height: 12px; +$switch-hover-thumb-on-height-raw: 12; +$switch-hover-thumb-on-background: #ffffff; +$switch-hover-thumb-on-border-width: 1px; +$switch-hover-thumb-on-border-color: transparent; + +// switch, theme: Light, state: Default +$switch-on-padding-start: 12px; +$switch-on-width: 36px; +$switch-on-width-raw: 36; +$switch-on-height: 20px; +$switch-on-height-raw: 20; +$switch-on-background: #0073e6; +$switch-on-border-width: 1px; +$switch-on-border-radius: 174px; +$switch-on-border-color: transparent; +$switch-on-opacity: 1; +$switch-on-box-shadow: none; +$switch-label-on-font-family: 'Inter'; +$switch-label-on-font-size: 14px; +$switch-label-on-font-weight: 400; +$switch-label-on-line-height: 1.4285714721679688; +$switch-label-on-letter-spacing: -0.28px; +$switch-label-on-text-align: left; +$switch-label-on-text-transform: none; +$switch-label-on-text-decoration: none; +$switch-label-on-color: rgba(0, 0, 0, 0.800000011920929); +$switch-label-on-opacity: 1; +$switch-thumb-on-width: 12px; +$switch-thumb-on-width-raw: 12; +$switch-thumb-on-height: 12px; +$switch-thumb-on-height-raw: 12; +$switch-thumb-on-background: #ffffff; +$switch-thumb-on-border-width: 1px; +$switch-thumb-on-border-color: transparent; + +// switch, theme: Light, state: Disabled +$switch-disabled-off-padding-start: 12px; +$switch-disabled-off-width: 36px; +$switch-disabled-off-width-raw: 36; +$switch-disabled-off-height: 20px; +$switch-disabled-off-height-raw: 20; +$switch-disabled-off-background: #cccccc; +$switch-disabled-off-border-width: 1px; +$switch-disabled-off-border-radius: 174px; +$switch-disabled-off-border-color: transparent; +$switch-disabled-off-opacity: 0.30000001192092896; +$switch-disabled-off-box-shadow: none; +$switch-disabled-label-off-font-family: 'Inter'; +$switch-disabled-label-off-font-size: 14px; +$switch-disabled-label-off-font-weight: 400; +$switch-disabled-label-off-line-height: 1.4285714721679688; +$switch-disabled-label-off-letter-spacing: -0.28px; +$switch-disabled-label-off-text-align: left; +$switch-disabled-label-off-text-transform: none; +$switch-disabled-label-off-text-decoration: none; +$switch-disabled-label-off-color: #777777; +$switch-disabled-label-off-opacity: 1; +$switch-disabled-thumb-off-width: 12px; +$switch-disabled-thumb-off-width-raw: 12; +$switch-disabled-thumb-off-height: 12px; +$switch-disabled-thumb-off-height-raw: 12; +$switch-disabled-thumb-off-background: #ffffff; +$switch-disabled-thumb-off-border-width: 1px; +$switch-disabled-thumb-off-border-color: transparent; + +// switch, theme: Light, state: Hover +$switch-hover-off-padding-start: 12px; +$switch-hover-off-width: 36px; +$switch-hover-off-width-raw: 36; +$switch-hover-off-height: 20px; +$switch-hover-off-height-raw: 20; +$switch-hover-off-background: transparent; +$switch-hover-off-border-width: 1px; +$switch-hover-off-border-radius: 174px; +$switch-hover-off-border-color: #929292; +$switch-hover-off-opacity: 1; +$switch-hover-off-box-shadow: none; +$switch-hover-label-off-font-family: 'Inter'; +$switch-hover-label-off-font-size: 14px; +$switch-hover-label-off-font-weight: 400; +$switch-hover-label-off-line-height: 1.4285714721679688; +$switch-hover-label-off-letter-spacing: -0.28px; +$switch-hover-label-off-text-align: left; +$switch-hover-label-off-text-transform: none; +$switch-hover-label-off-text-decoration: none; +$switch-hover-label-off-color: rgba(0, 0, 0, 0.800000011920929); +$switch-hover-label-off-opacity: 1; +$switch-hover-thumb-off-width: 12px; +$switch-hover-thumb-off-width-raw: 12; +$switch-hover-thumb-off-height: 12px; +$switch-hover-thumb-off-height-raw: 12; +$switch-hover-thumb-off-background: #888888; +$switch-hover-thumb-off-border-width: 1px; +$switch-hover-thumb-off-border-color: transparent; + +// switch, theme: Light, state: Default +$switch-off-padding-start: 12px; +$switch-off-width: 36px; +$switch-off-width-raw: 36; +$switch-off-height: 20px; +$switch-off-height-raw: 20; +$switch-off-background: transparent; +$switch-off-border-width: 1px; +$switch-off-border-radius: 174px; +$switch-off-border-color: #b3b3b3; +$switch-off-opacity: 1; +$switch-off-box-shadow: none; +$switch-label-off-font-family: 'Inter'; +$switch-label-off-font-size: 14px; +$switch-label-off-font-weight: 400; +$switch-label-off-line-height: 1.4285714721679688; +$switch-label-off-letter-spacing: -0.28px; +$switch-label-off-text-align: left; +$switch-label-off-text-transform: none; +$switch-label-off-text-decoration: none; +$switch-label-off-color: #555555; +$switch-label-off-opacity: 1; +$switch-thumb-off-width: 12px; +$switch-thumb-off-width-raw: 12; +$switch-thumb-off-height: 12px; +$switch-thumb-off-height-raw: 12; +$switch-thumb-off-background: #aaaaaa; +$switch-thumb-off-border-width: 1px; +$switch-thumb-off-border-color: transparent; + +// Small switch +$switch-small-off-padding-start: 10px; +$switch-small-off-width: 30px; +$switch-small-off-width-raw: 30; +$switch-small-off-height: 16px; +$switch-small-off-height-raw: 16; +$switch-small-off-background: transparent; +$switch-small-off-border-width: 1px; +$switch-small-off-border-radius: 174px; +$switch-small-off-border-color: #000000; +$switch-small-off-opacity: 1; +$switch-small-off-box-shadow: none; +$switch-small-label-off-font-family: 'Inter'; +$switch-small-label-off-font-size: 12px; +$switch-small-label-off-font-weight: 400; +$switch-small-label-off-line-height: 1.6666667175292968; +$switch-small-label-off-letter-spacing: -0.24px; +$switch-small-label-off-text-align: left; +$switch-small-label-off-text-transform: none; +$switch-small-label-off-text-decoration: none; +$switch-small-label-off-color: #555555; +$switch-small-label-off-opacity: 1; +$switch-small-thumb-off-width: 10px; +$switch-small-thumb-off-width-raw: 10; +$switch-small-thumb-off-height: 10px; +$switch-small-thumb-off-height-raw: 10; +$switch-small-thumb-off-background: #000000; +$switch-small-thumb-off-border-width: 1px; +$switch-small-thumb-off-border-color: transparent; + +// Medium switch +$switch-medium-off-padding-start: 12px; +$switch-medium-off-width: 36px; +$switch-medium-off-width-raw: 36; +$switch-medium-off-height: 20px; +$switch-medium-off-height-raw: 20; +$switch-medium-off-background: transparent; +$switch-medium-off-border-width: 1px; +$switch-medium-off-border-radius: 174px; +$switch-medium-off-border-color: #000000; +$switch-medium-off-opacity: 1; +$switch-medium-off-box-shadow: none; +$switch-medium-label-off-font-family: 'Inter'; +$switch-medium-label-off-font-size: 14px; +$switch-medium-label-off-font-weight: 400; +$switch-medium-label-off-line-height: 1.4285714721679688; +$switch-medium-label-off-letter-spacing: -0.28px; +$switch-medium-label-off-text-align: left; +$switch-medium-label-off-text-transform: none; +$switch-medium-label-off-text-decoration: none; +$switch-medium-label-off-color: #555555; +$switch-medium-label-off-opacity: 1; +$switch-medium-thumb-off-width: 12px; +$switch-medium-thumb-off-width-raw: 12; +$switch-medium-thumb-off-height: 12px; +$switch-medium-thumb-off-height-raw: 12; +$switch-medium-thumb-off-background: #000000; +$switch-medium-thumb-off-border-width: 1px; +$switch-medium-thumb-off-border-color: transparent; + +// Large switch +$switch-large-off-padding-start: 14px; +$switch-large-off-width: 44px; +$switch-large-off-width-raw: 44; +$switch-large-off-height: 24px; +$switch-large-off-height-raw: 24; +$switch-large-off-background: transparent; +$switch-large-off-border-width: 1px; +$switch-large-off-border-radius: 174px; +$switch-large-off-border-color: #000000; +$switch-large-off-opacity: 1; +$switch-large-off-box-shadow: none; +$switch-large-label-off-font-family: 'Inter'; +$switch-large-label-off-font-size: 16px; +$switch-large-label-off-font-weight: 400; +$switch-large-label-off-line-height: 1.25; +$switch-large-label-off-letter-spacing: -0.32px; +$switch-large-label-off-text-align: left; +$switch-large-label-off-text-transform: none; +$switch-large-label-off-text-decoration: none; +$switch-large-label-off-color: #555555; +$switch-large-label-off-opacity: 1; +$switch-large-thumb-off-width: 14px; +$switch-large-thumb-off-width-raw: 14; +$switch-large-thumb-off-height: 14px; +$switch-large-thumb-off-height-raw: 14; +$switch-large-thumb-off-background: #000000; +$switch-large-thumb-off-border-width: 1px; +$switch-large-thumb-off-border-color: transparent; \ No newline at end of file diff --git a/sass/project/default_vars/tooltips.scss b/sass/project/default_vars/tooltips.scss new file mode 100644 index 00000000..0178dcb5 --- /dev/null +++ b/sass/project/default_vars/tooltips.scss @@ -0,0 +1,134 @@ +.tooltip { + + // Tooltips Horizontal: right Vertical: top + --tooltip-background: #0073e6; + --tooltip-bg: #0073e6; + --tooltip-padding-y: 8px; + --tooltip-padding-x: 8px; + --tooltip-padding-top: 8px; + --tooltip-padding-right: 16px; + --tooltip-padding-bottom: 8px; + --tooltip-padding-left: 16px; + --tooltip-border-width: 1; + --tooltip-border-radius: 2px; + --tooltip-border-radius-sm: 2px; + --tooltip-border-radius-lg: 2px; + --tooltip-border-color: rgba(0, 0, 0, 0); + --tooltip-font-family: 'Inter'; + --tooltip-font-size: 14px; + --tooltip-font-weight: 400; + --tooltip-line-height: 1.6; + --tooltip-letter-spacing: -0.28px; + --tooltip-text-align: right; + --tooltip-text-decoration: none; + + // Tooltips Horizontal: center Vertical: top + --tooltip-background: #0073e6; + --tooltip-bg: #0073e6; + --tooltip-padding-y: 8px; + --tooltip-padding-x: 8px; + --tooltip-padding-top: 8px; + --tooltip-padding-right: 16px; + --tooltip-padding-bottom: 8px; + --tooltip-padding-left: 16px; + --tooltip-border-width: 1; + --tooltip-border-radius: 2px; + --tooltip-border-radius-sm: 2px; + --tooltip-border-radius-lg: 2px; + --tooltip-border-color: rgba(0, 0, 0, 0); + --tooltip-font-family: 'Inter'; + --tooltip-font-size: 14px; + --tooltip-font-weight: 400; + --tooltip-line-height: 1.6; + --tooltip-letter-spacing: -0.28px; + --tooltip-text-align: center; + --tooltip-text-decoration: none; + + // Tooltips Horizontal: left Vertical: top + --tooltip-background: #0073e6; + --tooltip-bg: #0073e6; + --tooltip-padding-y: 8px; + --tooltip-padding-x: 8px; + --tooltip-padding-top: 8px; + --tooltip-padding-right: 16px; + --tooltip-padding-bottom: 8px; + --tooltip-padding-left: 16px; + --tooltip-border-width: 1; + --tooltip-border-radius: 2px; + --tooltip-border-radius-sm: 2px; + --tooltip-border-radius-lg: 2px; + --tooltip-border-color: rgba(0, 0, 0, 0); + --tooltip-font-family: 'Inter'; + --tooltip-font-size: 14px; + --tooltip-font-weight: 400; + --tooltip-line-height: 1.6; + --tooltip-letter-spacing: -0.28px; + --tooltip-text-align: left; + --tooltip-text-decoration: none; + + // Tooltips Horizontal: right Vertical: bottom + --tooltip-background: #0073e6; + --tooltip-bg: #0073e6; + --tooltip-padding-y: 8px; + --tooltip-padding-x: 8px; + --tooltip-padding-top: 8px; + --tooltip-padding-right: 16px; + --tooltip-padding-bottom: 8px; + --tooltip-padding-left: 16px; + --tooltip-border-width: 1; + --tooltip-border-radius: 2px; + --tooltip-border-radius-sm: 2px; + --tooltip-border-radius-lg: 2px; + --tooltip-border-color: rgba(0, 0, 0, 0); + --tooltip-font-family: 'Inter'; + --tooltip-font-size: 14px; + --tooltip-font-weight: 400; + --tooltip-line-height: 1.6; + --tooltip-letter-spacing: -0.28px; + --tooltip-text-align: right; + --tooltip-text-decoration: none; + + // Tooltips Horizontal: center Vertical: bottom + --tooltip-background: #0073e6; + --tooltip-bg: #0073e6; + --tooltip-padding-y: 8px; + --tooltip-padding-x: 8px; + --tooltip-padding-top: 8px; + --tooltip-padding-right: 16px; + --tooltip-padding-bottom: 8px; + --tooltip-padding-left: 16px; + --tooltip-border-width: 1; + --tooltip-border-radius: 2px; + --tooltip-border-radius-sm: 2px; + --tooltip-border-radius-lg: 2px; + --tooltip-border-color: rgba(0, 0, 0, 0); + --tooltip-font-family: 'Inter'; + --tooltip-font-size: 14px; + --tooltip-font-weight: 400; + --tooltip-line-height: 1.6; + --tooltip-letter-spacing: -0.28px; + --tooltip-text-align: center; + --tooltip-text-decoration: none; + + // Tooltips Horizontal: left Vertical: bottom + --tooltip-background: #0073e6; + --tooltip-bg: #0073e6; + --tooltip-padding-y: 8px; + --tooltip-padding-x: 8px; + --tooltip-padding-top: 8px; + --tooltip-padding-right: 16px; + --tooltip-padding-bottom: 8px; + --tooltip-padding-left: 16px; + --tooltip-border-width: 1; + --tooltip-border-radius: 2px; + --tooltip-border-radius-sm: 2px; + --tooltip-border-radius-lg: 2px; + --tooltip-border-color: rgba(0, 0, 0, 0); + --tooltip-font-family: 'Inter'; + --tooltip-font-size: 14px; + --tooltip-font-weight: 400; + --tooltip-line-height: 1.6; + --tooltip-letter-spacing: -0.28px; + --tooltip-text-align: left; + --tooltip-text-decoration: none; +} \ No newline at end of file diff --git a/sass/project/default_vars/tooltips_vars.scss b/sass/project/default_vars/tooltips_vars.scss new file mode 100644 index 00000000..ee07c578 --- /dev/null +++ b/sass/project/default_vars/tooltips_vars.scss @@ -0,0 +1,131 @@ +// tooltips +$tooltip-background: #0073e6; +$tooltip-bg: #0073e6; +$tooltip-padding-y: 8px; +$tooltip-padding-x: 8px; +$tooltip-padding-top: 8px; +$tooltip-padding-right: 16px; +$tooltip-padding-bottom: 8px; +$tooltip-padding-left: 16px; +$tooltip-border-width: 1; +$tooltip-border-radius: 2px; +$tooltip-border-radius-sm: 2px; +$tooltip-border-radius-lg: 2px; +$tooltip-border-color: rgba(0, 0, 0, 0); +$tooltip-font-family: 'Inter'; +$tooltip-font-size: 14px; +$tooltip-font-weight: 400; +$tooltip-line-height: 1.6; +$tooltip-letter-spacing: -0.28px; +$tooltip-text-align: right; +$tooltip-text-decoration: none; + +// tooltips +$tooltip-background: #0073e6; +$tooltip-bg: #0073e6; +$tooltip-padding-y: 8px; +$tooltip-padding-x: 8px; +$tooltip-padding-top: 8px; +$tooltip-padding-right: 16px; +$tooltip-padding-bottom: 8px; +$tooltip-padding-left: 16px; +$tooltip-border-width: 1; +$tooltip-border-radius: 2px; +$tooltip-border-radius-sm: 2px; +$tooltip-border-radius-lg: 2px; +$tooltip-border-color: rgba(0, 0, 0, 0); +$tooltip-font-family: 'Inter'; +$tooltip-font-size: 14px; +$tooltip-font-weight: 400; +$tooltip-line-height: 1.6; +$tooltip-letter-spacing: -0.28px; +$tooltip-text-align: center; +$tooltip-text-decoration: none; + +// tooltips +$tooltip-background: #0073e6; +$tooltip-bg: #0073e6; +$tooltip-padding-y: 8px; +$tooltip-padding-x: 8px; +$tooltip-padding-top: 8px; +$tooltip-padding-right: 16px; +$tooltip-padding-bottom: 8px; +$tooltip-padding-left: 16px; +$tooltip-border-width: 1; +$tooltip-border-radius: 2px; +$tooltip-border-radius-sm: 2px; +$tooltip-border-radius-lg: 2px; +$tooltip-border-color: rgba(0, 0, 0, 0); +$tooltip-font-family: 'Inter'; +$tooltip-font-size: 14px; +$tooltip-font-weight: 400; +$tooltip-line-height: 1.6; +$tooltip-letter-spacing: -0.28px; +$tooltip-text-align: left; +$tooltip-text-decoration: none; + +// tooltips +$tooltip-background: #0073e6; +$tooltip-bg: #0073e6; +$tooltip-padding-y: 8px; +$tooltip-padding-x: 8px; +$tooltip-padding-top: 8px; +$tooltip-padding-right: 16px; +$tooltip-padding-bottom: 8px; +$tooltip-padding-left: 16px; +$tooltip-border-width: 1; +$tooltip-border-radius: 2px; +$tooltip-border-radius-sm: 2px; +$tooltip-border-radius-lg: 2px; +$tooltip-border-color: rgba(0, 0, 0, 0); +$tooltip-font-family: 'Inter'; +$tooltip-font-size: 14px; +$tooltip-font-weight: 400; +$tooltip-line-height: 1.6; +$tooltip-letter-spacing: -0.28px; +$tooltip-text-align: right; +$tooltip-text-decoration: none; + +// tooltips +$tooltip-background: #0073e6; +$tooltip-bg: #0073e6; +$tooltip-padding-y: 8px; +$tooltip-padding-x: 8px; +$tooltip-padding-top: 8px; +$tooltip-padding-right: 16px; +$tooltip-padding-bottom: 8px; +$tooltip-padding-left: 16px; +$tooltip-border-width: 1; +$tooltip-border-radius: 2px; +$tooltip-border-radius-sm: 2px; +$tooltip-border-radius-lg: 2px; +$tooltip-border-color: rgba(0, 0, 0, 0); +$tooltip-font-family: 'Inter'; +$tooltip-font-size: 14px; +$tooltip-font-weight: 400; +$tooltip-line-height: 1.6; +$tooltip-letter-spacing: -0.28px; +$tooltip-text-align: center; +$tooltip-text-decoration: none; + +// tooltips +$tooltip-background: #0073e6; +$tooltip-bg: #0073e6; +$tooltip-padding-y: 8px; +$tooltip-padding-x: 8px; +$tooltip-padding-top: 8px; +$tooltip-padding-right: 16px; +$tooltip-padding-bottom: 8px; +$tooltip-padding-left: 16px; +$tooltip-border-width: 1; +$tooltip-border-radius: 2px; +$tooltip-border-radius-sm: 2px; +$tooltip-border-radius-lg: 2px; +$tooltip-border-color: rgba(0, 0, 0, 0); +$tooltip-font-family: 'Inter'; +$tooltip-font-size: 14px; +$tooltip-font-weight: 400; +$tooltip-line-height: 1.6; +$tooltip-letter-spacing: -0.28px; +$tooltip-text-align: left; +$tooltip-text-decoration: none; \ No newline at end of file diff --git a/templates/main.scss b/templates/main.scss index 7bbb75ae..cab6b52b 100644 --- a/templates/main.scss +++ b/templates/main.scss @@ -13,7 +13,7 @@ $prefix: ''; $enable-shadows: true; - +@import '../sass/project/default_vars/defaults'; @import '../sass/project/buttons'; @import '../sass/project/checkbox'; @import '../sass/project/radio';