Created
December 9, 2022 19:00
-
-
Save cristobal-io/7e39c627ae1bc4ff812199937c21924f to your computer and use it in GitHub Desktop.
variables file from ui-lux
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Colors | |
| $white: #fff; | |
| $black: #000; | |
| $black-1f: #1f1f24; | |
| $black-22: #222222; | |
| $black-33: #333333; | |
| $black-55: #555555; | |
| $grey-1d: #1d1d1d; | |
| $grey-f2: #f2f2f2; | |
| $grey-f6: #f6f6f6; | |
| $grey-d4: #d4d4d4; | |
| $grey-d9: #d9d9d9; | |
| $grey-e2: #e2e2e5; | |
| $grey-e3: #e3e3e6; | |
| $grey-e9: #e9e9e9; | |
| $grey-b5: #b5b5b5; | |
| $grey-35: #353535; | |
| $grey-54: #545454; | |
| $grey-66: #666666; | |
| $grey-e5: #e5e5e5; | |
| $grey-76: #767676; | |
| $grey-90: #909090; | |
| $grey-97: #979797; | |
| $red: #e80c00; | |
| $ligth-red: #c83430; | |
| $red-secondary: #990000; | |
| $green: #1c8846; | |
| $ligth-green: #007d17; | |
| $purple: #bd10e0; | |
| $blue: #1ea7fd; | |
| $blue-light: #d9edf7; | |
| $pink: #ffb3c7; | |
| $teal: #b2fce4; | |
| $black-alpha: rgba(7, 7, 7, 0.05); | |
| $grey-alpha: rgba(0, 0, 0, 0.08); | |
| $black-transparency: rgba(0, 0, 0, 0.5); | |
| $black-not-visible: rgba(0, 0, 0, 0); | |
| // $imagesPathUrl: '../' !default; | |
| $imagesPathUrl: '/assets/' !default; // This works with imp start | |
| // Brand Colors | |
| $brand-primary-color: $black-1f; | |
| $brand-secondary-color: $grey-e2; | |
| $border-color: $grey-d9; | |
| // Fonts | |
| $font-default: 'Arial', sans-serif; | |
| $font-lato: 'Lato-Regular', $font-default; | |
| $font-lato-bold: 'Lato-Bold', $font-default; | |
| $font-lato-italic: 'Lato-Italic', $font-default; | |
| $font-condensed-bold: 'Oswald-Medium', $font-default; | |
| $font-great-vibes: 'Great Vibes', $font-default; | |
| $font-yellowtail: 'Yellowtail', $font-default; | |
| $font-rouge-script: 'Rouge Script', $font-default; | |
| $font-nunito: 'Nunito Sans', 'HelveticaNeue-Medium', $font-default; | |
| $font-helvetica: 'HelveticaNeue', $font-default; | |
| $font-helvetica-medium: 'HelveticaNeue-Medium', $font-default; | |
| $font-msmincho: 'MS Mincho'; | |
| $font-msgothic: 'MS Gothic'; | |
| $font-meiryo: 'Meiryo'; | |
| // Responsive variables | |
| $break-xxsmall: 320px; | |
| $break-xsmall2: 360px; | |
| $break-xsmall: 375px; | |
| $break-small: 640px; | |
| $break-regular: 768px; | |
| $break-medium: 1024px; | |
| $break-small-desktop: 1280px; | |
| $break-large-tablet: 1366px; | |
| $break-large: 1440px; | |
| // SVG Icons | |
| // These SVG images do not require the path variable because they are used in mixims | |
| // where it tooks the relative path for ui-lux package | |
| $arrow-small: url($imagesPathUrl + "img/svg/arrow-small.svg"); | |
| $rotate: url($imagesPathUrl + "img/svg/rotate.svg"); | |
| $delivery: url($imagesPathUrl + "img/svg/delivery.svg"); | |
| // These SVG images require the path | |
| $arrow-up: url($imagesPathUrl + "img/svg/arrow-up.svg"); | |
| $arrow-down: url($imagesPathUrl + "img/svg/arrow-down.svg"); | |
| $arrow-left-alt: url($imagesPathUrl + "img/svg/arrow-left-alt.svg"); | |
| $close-thin: url($imagesPathUrl + "img/svg/close-thin.svg"); | |
| $close-white: url($imagesPathUrl + "img/svg/close-white.svg"); | |
| $close-straight: url($imagesPathUrl + "img/svg/close-straight.svg"); | |
| $arrow: url($imagesPathUrl + "img/svg/arrow.svg"); | |
| $arrow-left: url($imagesPathUrl + "img/svg/arrow-left.svg"); | |
| $arrow-right: url($imagesPathUrl + "img/svg/arrow-right.svg"); | |
| $arrow-right-alt: url($imagesPathUrl + "img/svg/arrow-right-alt.svg"); | |
| $check: url($imagesPathUrl + "img/svg/check.svg"); | |
| $check-green: url($imagesPathUrl + "img/svg/check-green.svg"); | |
| $check-thin: url($imagesPathUrl + "img/svg/check-thin.svg"); | |
| $check-white: url($imagesPathUrl + "img/svg/check-white.svg"); | |
| $polarize-filled: url($imagesPathUrl + "img/svg/polarize-filled.svg"); | |
| $polarize-outlined: url($imagesPathUrl + "img/svg/polarize-outlined.svg"); | |
| $info: url($imagesPathUrl + "img/svg/info.svg"); | |
| $heart: url($imagesPathUrl + "img/svg/heart.svg"); | |
| $info: url($imagesPathUrl + "img/svg/info-icon.svg"); | |
| $feel-lucky: url($imagesPathUrl + "img/svg/feel-lucky.svg"); | |
| $fit-me: url($imagesPathUrl + "img/svg/fit-me.svg"); | |
| $engraving: url($imagesPathUrl + "img/svg/engraving.svg"); | |
| $case: url($imagesPathUrl + "img/svg/case.svg"); | |
| $cloth: url($imagesPathUrl + "img/svg/cloth.svg"); | |
| $shake: url($imagesPathUrl + "img/svg/shake.svg"); | |
| $menu: url($imagesPathUrl + "img/svg/menu.svg"); | |
| $apple-pay: url($imagesPathUrl + "img/svg/apple-pay.svg"); | |
| $afterpay: url($imagesPathUrl + "img/svg/afterpay-custom.svg"); | |
| $smile: url($imagesPathUrl + "img/svg/smile.svg"); | |
| $arrow-thin: url($imagesPathUrl + "img/svg/arrow-thin.svg"); | |
| $driving: url($imagesPathUrl + "img/svg/driving.svg"); | |
| $lens-size: url($imagesPathUrl + "img/svg/lens-size.svg"); | |
| $bridge-size: url($imagesPathUrl + "img/svg/bridge-size.svg"); | |
| $temple-size: url($imagesPathUrl + "img/svg/temple-size.svg"); | |
| $try-on: url($imagesPathUrl + "img/svg/try-on.svg"); | |
| $abc: url($imagesPathUrl + "img/svg/abc.svg"); | |
| $imprint-icon: url($imagesPathUrl + "img/svg/imprint.svg"); | |
| $pseudo-radio: url($imagesPathUrl + "img/svg/pseudo-radio.svg"); | |
| $pseudo-radio-checked: url($imagesPathUrl + "img/svg/pseudo-radio-checked.svg"); | |
| $promo-red: url($imagesPathUrl + "img/promo-red.png"); | |
| $promo-white: url($imagesPathUrl + "img/promo-white.png"); | |
| $share: url($imagesPathUrl + "img/svg/share.svg"); | |
| $share-facebook: url($imagesPathUrl + "img/svg/share-facebook.svg"); | |
| $share-twitter: url($imagesPathUrl + "img/svg/share-twitter.svg"); | |
| $share-pinterest: url($imagesPathUrl + "img/svg/share-pinterest.svg"); | |
| $share-link: url($imagesPathUrl + "img/svg/share-link.svg"); | |
| $plus: url($imagesPathUrl + "img/svg/plus.svg"); | |
| $afterpay: url($imagesPathUrl + "img/svg/afterpay.svg"); | |
| $klarna: url($imagesPathUrl + "img/svg/klarna.svg"); | |
| // SVG images as data:image | |
| $close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%231F1F24' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M11.803 1.197L1.197 11.803M1.197 1.197l10.606 10.606'/%3E%3C/g%3E%3C/svg%3E"); | |
| $arrow-up-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4gICAgPHBhdGggZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMxRDFEMUQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEyIDEwTDggNmwtNCA0Ii8+PC9zdmc+); | |
| $arrow-down-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE2IDE3Ij4gICAgPHBhdGggZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMxRDFEMUQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEyIDdsLTQgNC00LTQiLz48L3N2Zz4=); | |
| $info-message: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbD0iI0VCRUJFQiIgZmlsbC1vcGFjaXR5PSIwIiBkPSJNLTUtNWgyNHYyNEgtNXoiLz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGNpcmNsZSBjeD0iNyIgY3k9IjciIHI9IjciIGZpbGw9IiMzMzYwODEiLz4KICAgICAgICAgICAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTcuNSAxMC41aC0xdi01aDF2NXptMC02aC0xdi0xaDF2MXoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=); | |
| $zoom-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0H24V24H0z'/%3E%3Cpath fill='%231F1F24' d='M5 14.5c.6 0 1 .4 1 1V18h2.5c.6 0 1 .4 1 1s-.4 1-1 1H5c-.6 0-1-.4-1-1v-3.5c0-.6.4-1 1-1zm14 0c.6 0 1 .5 1 1V19c0 .6-.4 1-1 1h-3.5c-.6 0-1-.4-1-1s.4-1 1-1H18v-2.5c0-.6.4-1 1-1zM12 9c.6 0 1 .4 1 1v1h1c.6 0 1 .4 1 1s-.4 1-1 1h-1v1c0 .6-.4 1-1 1s-1-.4-1-1v-1h-1c-.6 0-1-.4-1-1s.4-1 1-1h1v-1c0-.6.4-1 1-1zM8.5 4c.6 0 1 .4 1 1s-.4 1-1 1H6v2.5c0 .6-.4 1-1 1s-1-.4-1-1V5c0-.5.4-1 1-1zM19 4c.6 0 1 .5 1 1v3.5c0 .6-.4 1-1 1s-1-.4-1-1V6h-2.5c-.6 0-1-.4-1-1s.4-1 1-1z'/%3E%3C/g%3E%3C/svg%3E%0A"); | |
| $zoom-out: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0H24V24H0z'/%3E%3Cpath fill='%231F1F24' d='M5 14.5c.6 0 1 .4 1 1V18h2.5c.6 0 1 .4 1 1s-.4 1-1 1H5c-.6 0-1-.4-1-1v-3.5c0-.6.4-1 1-1zm14 0c.6 0 1 .5 1 1V19c0 .6-.4 1-1 1h-3.5c-.6 0-1-.4-1-1s.4-1 1-1H18v-2.5c0-.6.4-1 1-1zM14 11c.6 0 1 .4 1 1s-.4 1-1 1h-4c-.6 0-1-.4-1-1s.4-1 1-1zM8.5 4c.6 0 1 .4 1 1s-.4 1-1 1H6v2.5c0 .6-.4 1-1 1s-1-.4-1-1V5c0-.5.4-1 1-1zM19 4c.6 0 1 .5 1 1v3.5c0 .6-.4 1-1 1s-1-.4-1-1V6h-2.5c-.6 0-1-.4-1-1s.4-1 1-1z'/%3E%3C/g%3E%3C/svg%3E"); | |
| $close-thin-white: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.902.569-.471-.471L8 7.528.569.099.098.569 7.528 8l-7.43 7.431.471.471L8 8.472l7.431 7.43.471-.471L8.472 8l7.43-7.431z' fill='%23fff'/%3E%3C/svg%3E"); | |
| // height for button toggling flyout | |
| $flyoutHeight: 144px; | |
| $flyoutHeightTablet: 200px; | |
| $flyoutHeightXS: 110px; | |
| // Global animation duration value | |
| $animation-time: 0.5s; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment