60 lines
2.9 KiB
SCSS
60 lines
2.9 KiB
SCSS
@use '@lucas-labs/lui-micro/color' as color;
|
|
@use '@lucas-labs/lui-micro/var' as var;
|
|
|
|
@mixin base {
|
|
:root {
|
|
// ┌───────┐
|
|
// │ fonts │
|
|
// └───────┘
|
|
--fonts-proportional: #{var.get('font-family')};
|
|
--fonts-monospace: #{var.get('code-font-family')};
|
|
--fonts-emoji: #{var.get('emoji-font-family')};
|
|
|
|
// ┌───────┬───────────────────┐
|
|
// │ fonts │ weights & heights │
|
|
// └───────┴───────────────────┘
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--line-height-default: normal;
|
|
|
|
// ┌────────┐
|
|
// │ images │
|
|
// └────────┘
|
|
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
|
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
|
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
|
|
|
|
// ┌────────┐
|
|
// │ radius │
|
|
// └────────┘
|
|
--border-radius: #{var.get('measure/.5x')};
|
|
--border-radius-medium: #{var.get('measure/1x')};
|
|
--border-radius-full: calc(infinity * 1px);
|
|
|
|
// ┌────────┐
|
|
// │ others │
|
|
// └────────┘
|
|
--opacity-disabled: 0.55;
|
|
--height-loading: 16rem;
|
|
--min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported
|
|
--checkbox-size: 15px; // height and width of checkbox and radio inputs
|
|
--page-spacing: 24px; // space between page elements
|
|
--page-margin-x: 32px; // minimum space on left and right side of page
|
|
--tab-size: 4;
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1200px) {
|
|
:root {
|
|
--page-margin-x: 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
:root {
|
|
--page-margin-x: 16px;
|
|
}
|
|
}
|
|
} |