kopia lustrzana https://github.com/cloudflare/wildebeest
remove major part of existing css
Dario Piotrowicz
rodzic
f91c6ff756
commit
800fca928a
|
|
@ -1,4 +1,4 @@
|
|||
@use '../styles/theme.scss' as theme;
|
||||
@use '../theme.scss' as theme;
|
||||
|
||||
.status-content {
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../styles/theme.scss' as theme;
|
||||
@use '../../theme.scss' as theme;
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@ import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.
|
|||
import { RouterHead } from './components/router-head/router-head'
|
||||
|
||||
import 'modern-normalize/modern-normalize.css'
|
||||
import './styles/theme.scss'
|
||||
import './styles/utility.scss'
|
||||
import globalStyles from './styles/global.scss?inline'
|
||||
import globalStyles from './styles.scss?inline'
|
||||
|
||||
export default component$(() => {
|
||||
useStyles$(globalStyles)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../styles/theme.scss';
|
||||
@use '../../theme.scss';
|
||||
|
||||
.search {
|
||||
outline: 0;
|
||||
|
|
@ -12,6 +12,6 @@
|
|||
border-radius: theme.$radius-medium;
|
||||
margin: 0;
|
||||
display: block;
|
||||
padding: theme.$sp4;
|
||||
padding: 1rem;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../../styles/theme.scss' as theme;
|
||||
@use '../../../theme.scss' as theme;
|
||||
|
||||
.back-button {
|
||||
background: transparent;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../styles/theme.scss' as theme;
|
||||
@use '../../theme.scss' as theme;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../../styles/theme.scss' as theme;
|
||||
@use '../../../theme.scss' as theme;
|
||||
|
||||
.container {
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../styles/theme.scss' as theme;
|
||||
@use '../theme.scss' as theme;
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
@use './theme.scss' as theme;
|
||||
@use './interactive-utilities.scss' as utils;
|
||||
|
||||
.bg-slate-50 {
|
||||
background-color: theme.$slate50;
|
||||
}
|
||||
.bg-slate-100 {
|
||||
background-color: theme.$slate100;
|
||||
}
|
||||
.bg-slate-200 {
|
||||
background-color: theme.$slate200;
|
||||
}
|
||||
.bg-slate-300 {
|
||||
background-color: theme.$slate300;
|
||||
}
|
||||
.bg-slate-400 {
|
||||
background-color: theme.$slate400;
|
||||
}
|
||||
.bg-slate-500 {
|
||||
background-color: theme.$slate500;
|
||||
}
|
||||
.bg-slate-600 {
|
||||
background-color: theme.$slate600;
|
||||
}
|
||||
.bg-slate-700 {
|
||||
background-color: theme.$slate700;
|
||||
}
|
||||
.bg-slate-800 {
|
||||
background-color: theme.$slate800;
|
||||
}
|
||||
.bg-slate-900 {
|
||||
background-color: theme.$slate900;
|
||||
}
|
||||
.bg-black {
|
||||
background-color: theme.$black-bg;
|
||||
}
|
||||
.bg-indigo-600 {
|
||||
background-color: theme.$indigo600;
|
||||
}
|
||||
.bg-indigo-500 {
|
||||
background-color: theme.$indigo500;
|
||||
}
|
||||
|
||||
@include utils.hoverAndFocus('bg-indigo-500') {
|
||||
background-color: theme.$indigo500;
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
@use './theme.scss' as theme;
|
||||
@use './interactive-utilities.scss' as utils;
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.border-l {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.border-r {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.border-x {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.border-y {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-slate-50 {
|
||||
border-color: theme.$slate50;
|
||||
}
|
||||
.border-slate-100 {
|
||||
border-color: theme.$slate100;
|
||||
}
|
||||
.border-slate-200 {
|
||||
border-color: theme.$slate200;
|
||||
}
|
||||
.border-slate-300 {
|
||||
border-color: theme.$slate300;
|
||||
}
|
||||
.border-slate-400 {
|
||||
border-color: theme.$slate400;
|
||||
}
|
||||
.border-slate-500 {
|
||||
border-color: theme.$slate500;
|
||||
}
|
||||
.border-slate-600 {
|
||||
border-color: theme.$slate600;
|
||||
}
|
||||
.border-slate-700 {
|
||||
border-color: theme.$slate700;
|
||||
}
|
||||
.border-slate-800 {
|
||||
border-color: theme.$slate800;
|
||||
}
|
||||
.border-slate-900 {
|
||||
border-color: theme.$slate900;
|
||||
}
|
||||
.border-black {
|
||||
border-color: theme.$black-border;
|
||||
}
|
||||
.border-indigo-400 {
|
||||
border-color: theme.$indigo400;
|
||||
}
|
||||
.border-indigo-600 {
|
||||
border-color: theme.$indigo600;
|
||||
}
|
||||
|
||||
@include utils.hoverAndFocus('border-indigo-400') {
|
||||
border-color: theme.$indigo400;
|
||||
}
|
||||
|
||||
@include utils.hoverAndFocus('border-indigo-500') {
|
||||
border-color: theme.$indigo500;
|
||||
}
|
||||
|
||||
@include utils.invalid('border-red-400') {
|
||||
border-color: theme.$red400;
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content:flex-start
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content:flex-end
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.gap-0 {
|
||||
gap: 0px;
|
||||
}
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
.gap-5 {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
/* TODO: see if we can generate hover/focus, etc... variants in
|
||||
a more clever/complete way
|
||||
(
|
||||
note: tailwind does it via a postCSS plugin,
|
||||
we could just copy them, or at that point I think
|
||||
we might as well just use tailwind instead
|
||||
)
|
||||
*/
|
||||
|
||||
@mixin hover($className) {
|
||||
.hover\:#{$className}:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focus($className) {
|
||||
.focus\:#{$className}:focus {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hoverAndFocus($className) {
|
||||
@include hover($className) {
|
||||
@content;
|
||||
}
|
||||
@include focus($className) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin invalid($className) {
|
||||
.invalid\:#{$className}:invalid {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.outline-none {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@use '../styles/theme.scss' as theme;
|
||||
|
||||
.rounded {
|
||||
border-radius: theme.$radius-medium;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: theme.$radius-small;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: theme.$radius-large;
|
||||
}
|
||||
|
||||
.rounded-t {
|
||||
border-top-left-radius: theme.$radius-medium;
|
||||
border-top-right-radius: theme.$radius-medium;
|
||||
}
|
||||
|
||||
.rounded-t-sm {
|
||||
border-top-left-radius: theme.$radius-small;
|
||||
border-top-right-radius: theme.$radius-small;
|
||||
}
|
||||
|
||||
.rounded-t-lg {
|
||||
border-top-left-radius: theme.$radius-large;
|
||||
border-top-right-radius: theme.$radius-large;
|
||||
}
|
||||
|
||||
.rounded-b {
|
||||
border-bottom-left-radius: theme.$radius-medium;
|
||||
border-bottom-right-radius: theme.$radius-medium;
|
||||
}
|
||||
|
||||
.rounded-b-sm {
|
||||
border-bottom-left-radius: theme.$radius-small;
|
||||
border-bottom-right-radius: theme.$radius-small;
|
||||
}
|
||||
|
||||
.rounded-b-lg {
|
||||
border-bottom-left-radius: theme.$radius-large;
|
||||
border-bottom-right-radius: theme.$radius-large;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.max-w-xs {
|
||||
max-width: 20rem;
|
||||
}
|
||||
.max-w-sm {
|
||||
max-width: 24rem;
|
||||
}
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
.max-w-xl {
|
||||
max-width: 36rem;
|
||||
}
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
.max-w-5xl {
|
||||
max-width: 64rem;
|
||||
}
|
||||
.max-w-6xl {
|
||||
max-width: 72rem;
|
||||
}
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
}
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
.max-w-min {
|
||||
max-width: min-content;
|
||||
}
|
||||
.max-w-max {
|
||||
max-width: max-content;
|
||||
}
|
||||
.max-w-fit {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-dscreen {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
@use 'sass:list';
|
||||
@use './theme.scss';
|
||||
|
||||
// padding
|
||||
@for $i from 0 through 9 {
|
||||
.p-#{$i} {
|
||||
padding: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.px-#{$i} {
|
||||
padding-left: list.nth(theme.$space_scale, $i + 1);
|
||||
padding-right: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.py-#{$i} {
|
||||
padding-top: list.nth(theme.$space_scale, $i + 1);
|
||||
padding-bottom: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.pt-#{$i} {
|
||||
padding-top: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.pb-#{$i} {
|
||||
padding-bottom: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.pr-#{$i} {
|
||||
padding-right: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.pl-#{$i} {
|
||||
padding-left: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Margin
|
||||
@for $i from 0 through 9 {
|
||||
.m-#{$i} {
|
||||
margin: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.mx-#{$i} {
|
||||
margin-left: list.nth(theme.$space_scale, $i + 1);
|
||||
margin-right: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.my-#{$i} {
|
||||
margin-top: list.nth(theme.$space_scale, $i + 1);
|
||||
margin-bottom: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.mt-#{$i} {
|
||||
margin-top: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.mb-#{$i} {
|
||||
margin-bottom: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.ml-#{$i} {
|
||||
margin-left: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
.mr-#{$i} {
|
||||
margin-right: list.nth(theme.$space_scale, $i + 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
@use './theme.scss' as theme;
|
||||
@use './interactive-utilities.scss' as utils;
|
||||
|
||||
// Color
|
||||
.secondary {
|
||||
color: theme.$slate400;
|
||||
}
|
||||
|
||||
.text-slate-50 {
|
||||
color: theme.$slate50;
|
||||
}
|
||||
.text-slate-100 {
|
||||
color: theme.$slate100;
|
||||
}
|
||||
.text-slate-200 {
|
||||
color: theme.$slate200;
|
||||
}
|
||||
.text-slate-300 {
|
||||
color: theme.$slate300;
|
||||
}
|
||||
.text-slate-400 {
|
||||
color: theme.$slate400;
|
||||
}
|
||||
.text-slate-500 {
|
||||
color: theme.$slate500;
|
||||
}
|
||||
.text-slate-600 {
|
||||
color: theme.$slate600;
|
||||
}
|
||||
.text-slate-700 {
|
||||
color: theme.$slate700;
|
||||
}
|
||||
.text-slate-800 {
|
||||
color: theme.$slate800;
|
||||
}
|
||||
.text-slate-900 {
|
||||
color: theme.$slate900;
|
||||
}
|
||||
|
||||
.text-indigo-400 {
|
||||
color: theme.$indigo400;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: theme.$white;
|
||||
}
|
||||
|
||||
@include utils.hoverAndFocus('text-white') {
|
||||
color: theme.$white;
|
||||
}
|
||||
|
||||
// Size
|
||||
.text-xs {
|
||||
font-size: theme.$font-xsmall;
|
||||
}
|
||||
.text-sm {
|
||||
font-size: theme.$font-small;
|
||||
}
|
||||
.text-md {
|
||||
font-size: theme.$font-medium;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: theme.$font-large;
|
||||
}
|
||||
.text-xl {
|
||||
font-size: theme.$font-xlarge;
|
||||
}
|
||||
|
||||
// Weight
|
||||
|
||||
.text-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
.text-reg {
|
||||
font-weight: 400;
|
||||
}
|
||||
.text-semi {
|
||||
font-weight: 500;
|
||||
}
|
||||
.text-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Transform
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
// Decoration
|
||||
.no-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Line Height
|
||||
.leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
.leading-snug {
|
||||
line-height: 1.375;
|
||||
}
|
||||
.leading-normal {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include utils.hover('underline') {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
$sp0: 0px;
|
||||
$sp1: 0.125rem;
|
||||
$sp2: 0.25rem;
|
||||
$sp3: 0.5rem;
|
||||
$sp4: 1rem;
|
||||
$sp5: 1.5rem;
|
||||
$sp6: 2rem;
|
||||
$sp7: 2.5rem;
|
||||
$sp8: 3.5rem;
|
||||
$sp9: 4.5rem;
|
||||
$space_scale: $sp0, $sp1, $sp2, $sp3, $sp4, $sp5, $sp6, $sp7, $sp8, $sp9;
|
||||
|
||||
$font-xsmall: 0.75rem;
|
||||
$font-small: 0.875rem;
|
||||
$font-medium: 1rem;
|
||||
$font-large: 1.125rem;
|
||||
$font-xlarge: 1.5rem;
|
||||
|
||||
$radius-small: 0.125rem;
|
||||
$radius-medium: 0.25rem;
|
||||
$radius-large: 0.5rem;
|
||||
|
||||
$black: #000;
|
||||
$black-bg: #131419;
|
||||
$black-border: #0a0b0e;
|
||||
$white: #fff;
|
||||
|
||||
$slate50: #f8fafc;
|
||||
$slate100: #eff6ff;
|
||||
$slate200: #dbeafe;
|
||||
$slate300: #7a899f;
|
||||
$slate400: #9baec8;
|
||||
$slate500: #64748b;
|
||||
$slate600: #393f4f;
|
||||
$slate700: #313543;
|
||||
$slate800: #282c37;
|
||||
$slate900: #1f232b;
|
||||
|
||||
$indigo400: #8c8dff;
|
||||
$indigo500: #6364ff;
|
||||
$indigo600: #595aff;
|
||||
|
||||
$red400: #e87487;
|
||||
|
||||
// $backgroundBaseColor: $slate900;
|
||||
$backgroundBaseColor: #191b22;
|
||||
$fontBaseColor: $white;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@use './text.scss';
|
||||
@use './border.scss';
|
||||
@use './outline.scss';
|
||||
@use './background.scss';
|
||||
@use './sizing.scss';
|
||||
@use './spacing.scss';
|
||||
@use './rounding.scss';
|
||||
@use './display.scss';
|
||||
@use './layout.scss';
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
$radius-medium: 0.25rem;
|
||||
|
||||
$slate100: #eff6ff;
|
||||
$slate200: #dbeafe;
|
||||
$slate400: #9baec8;
|
||||
$slate700: #313543;
|
||||
$slate800: #282c37;
|
||||
$slate900: #1f232b;
|
||||
|
||||
$indigo400: #8c8dff;
|
||||
|
||||
// $backgroundBaseColor: $slate900;
|
||||
$backgroundBaseColor: #191b22;
|
||||
$fontBaseColor: #fff;
|
||||
Ładowanie…
Reference in New Issue