Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,141 @@
|
||||
// http://meyerweb.com/eric/tools/css/reset/
|
||||
// v2.0 | 20110126
|
||||
// License: none (public domain)
|
||||
|
||||
// stylelint-disable
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.text {
|
||||
font-family: $base__font-family;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: $title__font-family;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.is-title {
|
||||
font-size: 48px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.is-subheader {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.is-body {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.is-medium {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.is-caption {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.is-small {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.is-xsmall {
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.is-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.is-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.is-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.is-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.is-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.letter-spacing {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0 0.25em;
|
||||
padding: 0 0.125em;
|
||||
border: 1px solid $code__border-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "../variables";
|
||||
@import "../base/reset";
|
||||
@import "../base/typography";
|
||||
@import "../layout/grid";
|
||||
@import "../helpers/colors";
|
||||
@import "../helpers/utilities";
|
||||
|
||||
#footer {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@import "../variables";
|
||||
@import "../base/reset";
|
||||
@import "../base/typography";
|
||||
@import "../helpers/colors";
|
||||
@import "../helpers/utilities";
|
||||
|
||||
.navbar-placeholder {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid $white;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
.navbar-placeholder-logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding-top: 64px;
|
||||
|
||||
&.has-user-notification {
|
||||
padding-top: 124px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
background: $button__bg-color;
|
||||
color: $button__color;
|
||||
font: 600 12px/16px "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
letter-spacing: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $button__bg-color--hover;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button--ghost {
|
||||
background: transparent;
|
||||
color: $button-ghost__color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.button--outline {
|
||||
border: 1px solid $button-outline__border-color;
|
||||
background: $button-outline__bg-color;
|
||||
color: $button-outline__color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $button-outline__bg-color--hover;
|
||||
}
|
||||
}
|
||||
|
||||
.button--cta {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
background: $button-cta__bg-color;
|
||||
color: $button-cta__color;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $button-cta__bg-color--hover;
|
||||
}
|
||||
}
|
||||
|
||||
.button--small {
|
||||
padding: 8px 12px;
|
||||
font: 600 10px/14px "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.button--alert {
|
||||
background: $button-alert__bg-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $button-alert__bg-color--hover;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.button--last {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
.buttonLink {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
font: 600 12px/16px "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
svg {
|
||||
margin-right: 8px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform 300ms ease-in;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.buttonLink--center {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
.checkbox {
|
||||
position: relative;
|
||||
|
||||
.checkbox-decoration {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid $checkbox__border-color;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-check {
|
||||
transform-origin: 50% 50%;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 48;
|
||||
stroke-dashoffset: 48;
|
||||
stroke: $checkbox-stroke__color;
|
||||
}
|
||||
|
||||
.checkbox-decorationMedia {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 18px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
.checkbox-input {
|
||||
position: absolute;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
background: $checkbox__bg-color;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../assets/icons/common/check-hover.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: calc(100% + 6px);
|
||||
height: calc(100% + 6px);
|
||||
}
|
||||
|
||||
&:hover + .checkbox-decoration {
|
||||
border: 1px solid $checkbox__border-color--hover;
|
||||
}
|
||||
|
||||
&.is-selected,
|
||||
&:checked {
|
||||
+ .checkbox-decoration {
|
||||
border: 1px solid $checkbox__border-color--hover;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: calc(50% - 12px);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: radioIn 300ms;
|
||||
border-radius: 3px;
|
||||
opacity: 1;
|
||||
animation-fill-mode: forwards;
|
||||
background: $checkbox__bg-color--selected;
|
||||
}
|
||||
|
||||
.checkbox-check {
|
||||
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 300ms forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stroke {
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes radioIn {
|
||||
0% {
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// Variables for code block theme
|
||||
|
||||
.CodeMirror {
|
||||
height: auto;
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// Footer
|
||||
.footer {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
@media (max-width: $layout-mobile) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $layout-mobile) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.footer-link:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
display: block;
|
||||
width: 50%;
|
||||
margin-bottom: 48px;
|
||||
|
||||
@media (max-width: $layout-mobile) {
|
||||
width: unset;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.title-link {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.chevron .chevron-path {
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.chevron {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-link {
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
@media (max-width: $layout-mobile) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.carto-logo {
|
||||
width: 72px;
|
||||
|
||||
@media (max-width: $layout-mobile) {
|
||||
width: 64px;
|
||||
margin: 28px 0 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.welcome-first__link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
|
||||
//name: bg-color, font-color
|
||||
$button-colors: (
|
||||
is-cartoframes: ($cartoframes, $white)
|
||||
);
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
font: 600 16px/24px $title__font-family;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
&.is-outline {
|
||||
padding: 14px 22px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.1s linear;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: transform .3s ease;
|
||||
left: -1px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
&:before {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@each $name, $color in $button-colors {
|
||||
&.#{$name} {
|
||||
background-color: nth($color, 1);
|
||||
color: nth($color, 2);
|
||||
&.is-outline {
|
||||
background-color: transparent;
|
||||
color: nth($color, 1);
|
||||
border: 2px solid nth($color, 1);
|
||||
}
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--arrow {
|
||||
span {
|
||||
&:after{
|
||||
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAyMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBhdGggZD0iTS0yLTdoMjR2MjRILTJ6Ii8+CiAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTQuNzA3LjI5M2wtMS40MTQgMS40MTRMMTUuNTg2IDRIMHYyaDE1LjU4NmwtMi4yOTMgMi4yOTMgMS40MTQgMS40MTRMMTkuNDE0IDV6Ii8+CiAgPC9nPgo8L3N2Zz4=");
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.underlined-link {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: transform .3s ease;
|
||||
left: -1px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
&:before {
|
||||
left: unset;
|
||||
right: -1px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.f12 {
|
||||
&:before {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--small {
|
||||
font: 600 12px/16px $title__font-family;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
|
||||
&.is-outline {
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
&:before {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--large {
|
||||
font: 600 16px/24px $title__font-family;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
$colors: (
|
||||
'Cartoframes': $cartoframes,
|
||||
);
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.is-bg#{$name} {
|
||||
background: #{$color};
|
||||
}
|
||||
.is-txt#{$name} {
|
||||
color: #{$color};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
/* Hangar colors */
|
||||
$cartoframes: #3D33CC;
|
||||
@@ -0,0 +1,6 @@
|
||||
@import 'variables';
|
||||
@import 'colors';
|
||||
|
||||
.hangar {
|
||||
@import 'buttons';
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
$colors: (
|
||||
'Primary': $color-primary,
|
||||
'White': $white,
|
||||
'Grey': $text__color,
|
||||
'SoftGrey': $text__color--secondary,
|
||||
'Alert': $danger__color,
|
||||
'SoftBlue': $color-primary--soft,
|
||||
'DarkBlue': $blue--900
|
||||
);
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.is-txt#{$name} {
|
||||
color: #{$color};
|
||||
}
|
||||
}
|
||||
|
||||
$bgcolors: (
|
||||
'White': $white,
|
||||
'SoftBlue': $color-primary--soft,
|
||||
'Alert': $danger__color,
|
||||
);
|
||||
|
||||
@each $name, $color in $bgcolors {
|
||||
.is-bg#{$name} {
|
||||
background-color: #{$color};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
$direction: (
|
||||
'row': row,
|
||||
'column': column,
|
||||
);
|
||||
|
||||
$justify: (
|
||||
'start': flex-start,
|
||||
'end': flex-end,
|
||||
'between': space-between,
|
||||
'around': space-around,
|
||||
'center': center
|
||||
);
|
||||
|
||||
$align: (
|
||||
'start': flex-start,
|
||||
'end': flex-end,
|
||||
'center': center,
|
||||
'baseline': baseline,
|
||||
'stretch': stretch
|
||||
);
|
||||
|
||||
.u-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.u-inlineflex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@each $name, $property in $direction {
|
||||
.u-flex__direction--#{$name} {
|
||||
flex-direction: #{$property} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $property in $justify {
|
||||
.u-flex__justify--#{$name} {
|
||||
justify-content: #{$property} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $property in $align {
|
||||
.u-flex__align--#{$name} {
|
||||
align-items: #{$property} !important;
|
||||
}
|
||||
|
||||
.u-flex__self--#{$name} {
|
||||
align-items: #{$property} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-flex__grow--1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
$sizes: (0, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 60, 64, 72, 80, 96, 120);
|
||||
|
||||
// paddings
|
||||
.u-p--0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@each $size in $sizes {
|
||||
.u-pt--#{$size} {
|
||||
padding-top: #{$size}px;
|
||||
}
|
||||
|
||||
.u-pr--#{$size} {
|
||||
padding-right: #{$size}px;
|
||||
}
|
||||
|
||||
.u-pb--#{$size} {
|
||||
padding-bottom: #{$size}px;
|
||||
}
|
||||
|
||||
.u-pl--#{$size} {
|
||||
padding-left: #{$size}px;
|
||||
}
|
||||
}
|
||||
|
||||
// Margins
|
||||
.u-m--0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@each $size in $sizes {
|
||||
.u-mt--#{$size} {
|
||||
margin-top: #{$size}px;
|
||||
}
|
||||
|
||||
.u-mr--#{$size} {
|
||||
margin-right: #{$size}px;
|
||||
}
|
||||
|
||||
.u-mb--#{$size} {
|
||||
margin-bottom: #{$size}px;
|
||||
}
|
||||
|
||||
.u-ml--#{$size} {
|
||||
margin-left: #{$size}px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
@media (max-width: $layout-tablet) {
|
||||
.u-hideTablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $layout-mobile) {
|
||||
.u-hideMobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.u-showMobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $layout-mobile) {
|
||||
.u-showMobile {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.u-no-decoration {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.u-is-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.u-overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-width--100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
//List Styles
|
||||
.u-list__style--decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.u-list__position--inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.cell {
|
||||
position: relative;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding: 0 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell--main {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.cell--privacy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cell--xlarge {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.cell--large {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.cell--medium {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.cell--small {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.cell--xsmall {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.cell--first {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cell--last {
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@import 'assets/stylesheets/editor-3/_forms.scss';
|
||||
|
||||
// Map Metadata Edit Dialog
|
||||
@import 'assets/stylesheets/editor-3/_metadata-form.scss';
|
||||
@import 'assets/stylesheets/editor-3/_form-tags.scss';
|
||||
|
||||
// Create new map/dataset Dialog
|
||||
@import 'assets/stylesheets/editor-3/modals.scss';
|
||||
|
||||
// Share Dialog
|
||||
@import 'assets/stylesheets/editor-3/_share.scss';
|
||||
@@ -0,0 +1,212 @@
|
||||
.container {
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@mixin grid($value) {
|
||||
flex: 0 0 $value;
|
||||
max-width: $value;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.grid--no-wrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&.grid--align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.grid--justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.grid--space {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.grid--evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
&.grid--out {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&.grid--column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.grid__head--sticky {
|
||||
position: sticky;
|
||||
z-index: $z-index__sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
header.has-user-notification + section .grid__head--sticky {
|
||||
top: 124px;
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
|
||||
&.grid-cell--noMargin {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-cell--col1 {
|
||||
@include grid(8.3334%);
|
||||
}
|
||||
|
||||
.grid-cell--col2 {
|
||||
@include grid(16.6667%);
|
||||
}
|
||||
|
||||
.grid-cell--col3 {
|
||||
@include grid(25%);
|
||||
}
|
||||
|
||||
.grid-cell--col4 {
|
||||
@include grid(33.3334%);
|
||||
}
|
||||
|
||||
.grid-cell--col5 {
|
||||
@include grid(41.6665%);
|
||||
}
|
||||
|
||||
.grid-cell--col6 {
|
||||
@include grid(50%);
|
||||
}
|
||||
|
||||
.grid-cell--col7 {
|
||||
@include grid(58.3331%);
|
||||
}
|
||||
|
||||
.grid-cell--col8 {
|
||||
@include grid(66.6666%);
|
||||
}
|
||||
|
||||
.grid-cell--col9 {
|
||||
@include grid(75%);
|
||||
}
|
||||
|
||||
.grid-cell--col10 {
|
||||
@include grid(83.333%);
|
||||
}
|
||||
|
||||
.grid-cell--col11 {
|
||||
@include grid(91.6666%);
|
||||
}
|
||||
|
||||
.grid-cell--col12 {
|
||||
@include grid(100%);
|
||||
}
|
||||
|
||||
@media (max-width: $layout-tablet) {
|
||||
.grid-cell--col1--tablet {
|
||||
@include grid(8.3334%);
|
||||
}
|
||||
|
||||
.grid-cell--col2--tablet {
|
||||
@include grid(16.6667%);
|
||||
}
|
||||
|
||||
.grid-cell--col3--tablet {
|
||||
@include grid(25%);
|
||||
}
|
||||
|
||||
.grid-cell--col4--tablet {
|
||||
@include grid(33.3334%);
|
||||
}
|
||||
|
||||
.grid-cell--col5--tablet {
|
||||
@include grid(41.6665%);
|
||||
}
|
||||
|
||||
.grid-cell--col6--tablet {
|
||||
@include grid(50%);
|
||||
}
|
||||
|
||||
.grid-cell--col7--tablet {
|
||||
@include grid(58.3331%);
|
||||
}
|
||||
|
||||
.grid-cell--col8--tablet {
|
||||
@include grid(66.6666%);
|
||||
}
|
||||
|
||||
.grid-cell--col9--tablet {
|
||||
@include grid(75%);
|
||||
}
|
||||
|
||||
.grid-cell--col10--tablet {
|
||||
@include grid(83.333%);
|
||||
}
|
||||
|
||||
.grid-cell--col11--tablet {
|
||||
@include grid(91.6666%);
|
||||
}
|
||||
|
||||
.grid-cell--col12--tablet {
|
||||
@include grid(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $layout-mobile) {
|
||||
.grid-cell--col1--mobile {
|
||||
@include grid(8.3334%);
|
||||
}
|
||||
|
||||
.grid-cell--col2--mobile {
|
||||
@include grid(16.6667%);
|
||||
}
|
||||
|
||||
.grid-cell--col3--mobile {
|
||||
@include grid(25%);
|
||||
}
|
||||
|
||||
.grid-cell--col4--mobile {
|
||||
@include grid(33.3334%);
|
||||
}
|
||||
|
||||
.grid-cell--col5--mobile {
|
||||
@include grid(41.6665%);
|
||||
}
|
||||
|
||||
.grid-cell--col6--mobile {
|
||||
@include grid(50%);
|
||||
}
|
||||
|
||||
.grid-cell--col7--mobile {
|
||||
@include grid(58.3331%);
|
||||
}
|
||||
|
||||
.grid-cell--col8--mobile {
|
||||
@include grid(66.6666%);
|
||||
}
|
||||
|
||||
.grid-cell--col9--mobile {
|
||||
@include grid(75%);
|
||||
}
|
||||
|
||||
.grid-cell--col10--mobile {
|
||||
@include grid(83.333%);
|
||||
}
|
||||
|
||||
.grid-cell--col11--mobile {
|
||||
@include grid(91.6666%);
|
||||
}
|
||||
|
||||
.grid-cell--col12--mobile {
|
||||
@include grid(100%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.page {
|
||||
min-height: calc(100vh - 392px);
|
||||
padding: 128px 0 120px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.section {
|
||||
padding: 64px 0 128px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&.section--borderTop {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&.section--noBorder {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
@import 'variables';
|
||||
|
||||
// base
|
||||
@import 'base/reset';
|
||||
@import 'base/typography';
|
||||
|
||||
// layout
|
||||
@import 'layout/cells';
|
||||
@import 'layout/dialogs';
|
||||
@import 'layout/grid';
|
||||
@import 'layout/page';
|
||||
@import 'layout/section';
|
||||
|
||||
// components
|
||||
@import 'components/buttons';
|
||||
@import 'components/checkbox';
|
||||
@import 'components/code';
|
||||
@import 'components/welcome';
|
||||
|
||||
// pages
|
||||
@import 'pages/catalog';
|
||||
@import 'pages/solutionsIcons';
|
||||
@import 'pages/visualizations';
|
||||
|
||||
// helpers
|
||||
@import 'helpers/colors';
|
||||
@import 'helpers/flexbox';
|
||||
@import 'helpers/spacing';
|
||||
@import 'helpers/utilities';
|
||||
|
||||
//hangar
|
||||
@import 'hangar/main';
|
||||
@@ -0,0 +1,67 @@
|
||||
.catalog__icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../assets/icons/catalog/default-flag.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&--financial {
|
||||
background-image: url("../assets/icons/catalog/financial.svg");
|
||||
}
|
||||
|
||||
&--human-mobility {
|
||||
background-image: url("../assets/icons/catalog/human-mobility.svg");
|
||||
}
|
||||
|
||||
&--demographics {
|
||||
background-image: url("../assets/icons/catalog/demographics.svg");
|
||||
}
|
||||
|
||||
&--housing {
|
||||
background-image: url("../assets/icons/catalog/housing.svg");
|
||||
}
|
||||
|
||||
&--road-traffic {
|
||||
background-image: url("../assets/icons/catalog/road-traffic.svg");
|
||||
}
|
||||
|
||||
&--points-of-interest {
|
||||
background-image: url("../assets/icons/catalog/points-of-interest.svg");
|
||||
}
|
||||
|
||||
&--environmental {
|
||||
background-image: url("../assets/icons/catalog/environmental.svg");
|
||||
}
|
||||
|
||||
&--global-boundaries {
|
||||
background-image: url("../assets/icons/catalog/global-boundaries.svg");
|
||||
}
|
||||
|
||||
&--united-states {
|
||||
background-image: url("../assets/icons/catalog/united-states.svg");
|
||||
}
|
||||
|
||||
&--united-states-of-america {
|
||||
background-image: url("../assets/icons/catalog/united-states.svg");
|
||||
}
|
||||
|
||||
&--canada {
|
||||
background-image: url("../assets/icons/catalog/canada.svg");
|
||||
}
|
||||
|
||||
&--spain {
|
||||
background-image: url("../assets/icons/catalog/spain.svg");
|
||||
}
|
||||
|
||||
&--united-kingdom {
|
||||
background-image: url("../assets/icons/catalog/united-kingdom.svg");
|
||||
}
|
||||
|
||||
&--australia {
|
||||
background-image: url("../assets/icons/catalog/australia.svg");
|
||||
}
|
||||
|
||||
&--france {
|
||||
background-image: url("../assets/icons/catalog/france.svg");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
.solutions-card {
|
||||
#marker,
|
||||
.marker {
|
||||
animation: 2s slidein infinite linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
#cloud02,
|
||||
.cloud--02 {
|
||||
animation: 20s move infinite alternate linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
#cloud01,
|
||||
.cloud--01 {
|
||||
animation: 40s move infinite alternate linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.sun {
|
||||
transform-box: fill-box;
|
||||
transform-origin: 50% 50%;
|
||||
animation: 60s rotate infinite linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.plane {
|
||||
animation: 0.5s flying infinite alternate linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.user {
|
||||
animation: 2s user infinite alternate linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.solutions-card {
|
||||
&:hover {
|
||||
#marker,
|
||||
.marker {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.marker--01 {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.marker--02 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
#cloud02,
|
||||
.cloud--02 {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
#cloud01,
|
||||
.cloud--01 {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.sun {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.plane {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.user {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.user--01 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.user--02 {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.user--03 {
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flying {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(0, 1px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes user {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(0, 12px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.viz-column--main-info,
|
||||
.viz-column--extra-info,
|
||||
.viz-column--status,
|
||||
.viz-column--share {
|
||||
@extend .grid;
|
||||
@extend .grid--no-wrap;
|
||||
}
|
||||
|
||||
.viz-column--main-info,
|
||||
.viz-column--share {
|
||||
@extend .grid-cell--col5;
|
||||
@extend .grid--align-center;
|
||||
}
|
||||
|
||||
.viz-column--extra-info,
|
||||
.viz-column--status {
|
||||
@extend .grid-cell--col7;
|
||||
}
|
||||
|
||||
.viz-column--status {
|
||||
@extend .grid--align-center;
|
||||
}
|
||||
|
||||
.viz-column--share {
|
||||
@extend .grid--justify-end;
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
/* === COLORS === */
|
||||
|
||||
/* Primary */
|
||||
$blue--100: #F2F6F9;
|
||||
$blue--300: #CBE4FF;
|
||||
$blue--500: #047AE6;
|
||||
$blue--700: #1074B5;
|
||||
$blue--900: #003267;
|
||||
|
||||
/* Neutral */
|
||||
$white: #FFF;
|
||||
$neutral--100: #F9F9F9;
|
||||
$neutral--200: #EBEEF5;
|
||||
$neutral--300: #E6E8EB;
|
||||
$neutral--400: #C2CDD6;
|
||||
$neutral--500: #BABEC0;
|
||||
$neutral--600: #6F757B;
|
||||
$neutral--700: #34444C;
|
||||
$neutral--800: #2E3C43;
|
||||
$black: #000;
|
||||
|
||||
/* Accents */
|
||||
$yellow--100: #F2E24B;
|
||||
$yellow--300: #FEE600;
|
||||
$yellow--500: #FFC300;
|
||||
$yellow--700: #F90;
|
||||
|
||||
$red--400: #F15743;
|
||||
$red--500: #FA1414;
|
||||
$red--600: #EB1510;
|
||||
$red--700: #E20703;
|
||||
|
||||
$green--500: #74FFA8;
|
||||
$green--700: #72EEA8;
|
||||
|
||||
/* Theme */
|
||||
$color-primary--soft: $blue--100;
|
||||
$color-primary: $blue--500;
|
||||
$color-primary--dark: $blue--700;
|
||||
|
||||
$color-premium: $yellow--700;
|
||||
|
||||
/* === TYPE === */
|
||||
$base__font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
|
||||
$title__font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
|
||||
|
||||
$text__color: $neutral--800;
|
||||
$text__color--secondary: $neutral--600;
|
||||
|
||||
$link__color: $color-primary;
|
||||
|
||||
$code__border-color: $neutral--400;
|
||||
|
||||
/* === LAYOUT === */
|
||||
$layout-tablet: 800px;
|
||||
$layout-mobile: 600px;
|
||||
|
||||
/* === COMPONENTS === */
|
||||
|
||||
/* defaults */
|
||||
$border-color: $neutral--200;
|
||||
$border-color--dark: $neutral--300;
|
||||
|
||||
$success__bg-color: $green--700;
|
||||
$warning__bg-color: $yellow--500;
|
||||
$warning__border-color: $yellow--500;
|
||||
$danger__bg-color: $red--500;
|
||||
$danger__color: $red--700;
|
||||
|
||||
/* buttons */
|
||||
$button__color: $white;
|
||||
$button__bg-color: $color-primary;
|
||||
$button__bg-color--hover: $color-primary--dark;
|
||||
|
||||
$button-outline__color: $color-primary;
|
||||
$button-outline__border-color: $color-primary;
|
||||
$button-outline__bg-color: $white;
|
||||
$button-outline__bg-color--hover: $color-primary--soft;
|
||||
|
||||
$button-ghost__color: $color-primary;
|
||||
|
||||
$button-cta__color: $neutral--800;
|
||||
$button-cta__bg-color: $yellow--300;
|
||||
$button-cta__bg-color--hover: $yellow--100;
|
||||
|
||||
$button-alert__bg-color: $red--400;
|
||||
$button-alert__bg-color--hover: $red--700;
|
||||
|
||||
/* header */
|
||||
$header__height: 64px;
|
||||
|
||||
/* subheader */
|
||||
$subheader__height: 64px;
|
||||
|
||||
/* navbar */
|
||||
$navbar-avatar__bg-color: $neutral--500;
|
||||
$notification__bg-color: $green--500;
|
||||
|
||||
/* form */
|
||||
$checkbox__border-color: $border-color--dark;
|
||||
$checkbox__bg-color: $white;
|
||||
$checkbox__border-color--hover: $color-primary;
|
||||
$checkbox__bg-color--selected: $color-primary;
|
||||
$checkbox-stroke__color: $white;
|
||||
|
||||
/* dropdowns */
|
||||
$dropdown__shadow-color: rgba($black, 0.16);
|
||||
$dropdown__shadow: 0 2px 8px 0 $dropdown__shadow-color;
|
||||
|
||||
/* progressbar */
|
||||
$progressbar__bg-color: $neutral--200;
|
||||
|
||||
/* cards */
|
||||
$card__shadow-color: rgba($neutral--400, 0.8);
|
||||
$card__shadow: 0 8px 20px 0 $card__shadow-color;
|
||||
$thumbnail__bg-color: $neutral--200;
|
||||
|
||||
/* notification warning */
|
||||
|
||||
$notification-warning__height: 60px;
|
||||
|
||||
/* === PAGES === */
|
||||
|
||||
/* onboarding */
|
||||
$onboarding__bg-color: $neutral--100;
|
||||
$onboarding-tags__border-color: $neutral--700;
|
||||
$onboarding-congrats__height: 445px;
|
||||
$onboarding-congrats__bg-color: rgba($blue--300, 0.3);
|
||||
$onboarding-notification: $yellow--300;
|
||||
|
||||
/* Jupyter code blocks
|
||||
Not our palette color, just copying jupyter look and feel */
|
||||
$jupyter__fill-color: #F7F7F7;
|
||||
$jupyter__border-color: #CFCFCF;
|
||||
$jupyter__text--in: #DA4D24;
|
||||
$jupyter__text--out: #2F3F9F;
|
||||
|
||||
/* lockout */
|
||||
$button-lockout__bg-color: $blue--900;
|
||||
|
||||
/* === Z_INDEX === */
|
||||
$z-index__dialog: 1000;
|
||||
$z-index__notification-warning: 12;
|
||||
$z-index__navbar: 5;
|
||||
$z-index__subheader: 4;
|
||||
$z-index__dropdown: 3;
|
||||
$z-index__sticky: 2;
|
||||
$z-index__local-dropdown: 1;
|
||||
|
||||
// Variables to create different stacking context
|
||||
// Used in pages where you have Maps and Dataset Lists
|
||||
$z-index__stack-context--first: 2;
|
||||
$z-index__stack-context--second: 1;
|
||||
$z-index__stack-context--third: 0;
|
||||
|
||||
/* === DEPRECATED === */
|
||||
$primary-color: $color-primary;
|
||||
$softblue: $color-primary--soft;
|
||||
Reference in New Issue
Block a user