commerce/src/styles/_base.scss
2021-08-27 15:08:32 +07:00

84 lines
2.1 KiB
SCSS

@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
:root {
--primary: #5b9a74;
--primary-light: #e0f6e8;
--primary-lightest: #effaf4;
--info-dark: #00317a;
--info: #297fff;
--info-border-line: #d6e7ff;
--info-light: #ebf3ff;
--positive-dark: #166437;
--positive: #2dc86e;
--positive-border-line: #cdf4dd;
--positive-light: #eefbf4;
--warning-dark: #694b11;
--warning: #f6b028;
--warning-border-line: #fdf1d8;
--warning-light: #fef8eb;
--negative-dark: #741a06;
--negative: #f34f2b;
--negative-border-line: #fddfd8;
--negative-light: #feefec;
--text-active: #141414;
--text-base: #3d3d3d;
--text-label: #8f8f8f;
--text-placeholder: #cccccc;
--disabled: #cccccc;
--border-line: #ebebeb;
--background: #fff;
--gray: #f8f8f8;
--white: #fbfbfb;
--background-arrow:rgba(20, 20, 20, 0.05);
--font-size: 1.6rem;
--line-height: 2.4rem;
--font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
}
*,
*:before,
*:after {
margin: 0px;
padding: 0px;
box-sizing: inherit;
}
html,
body {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-x: none;
background-color: var(--background);
font-size: var(--font-size);
line-height: var(--line-height);
color: var(--text-base);
font-family: var(--font-sans);
}
html {
/* default font-size: 16px -> 62.5% * 16px = 10px */
font-size: 50% !important; // => 1rem = 8px
@screen md {
font-size: 62.5% !important; // => 1rem = 10px*/
}
scroll-behavior: smooth;
touch-action: manipulation;
font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
}
a {
-webkit-tap-highlight-color: var(--text-active);
}