app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.43 vs app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.44
- old
+ new
@@ -1,32 +1,31 @@
@import "sass-zero/variables";
@import "sass-zero/mixins";
-:root {
- --color-bg--main: #{$white};
- --color-bg--surface: #{$gray-100};
- --color-primary: #{$gray-900};
- --color-txt: #{$gray-900};
- --color-focus-ring: #{rgba($gray-900, 0.5)};
- --image-bg-select: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
- --image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
- --image-checked-radio: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
-}
+$color-bg--main: $white;
+$color-bg--surface: $gray-100;
+$color-primary: $gray-900;
+$color-txt: $gray-900;
+$color-focus-ring: rgba($gray-900, $opacity-50);
+$image-bg-select-black: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
+$image-checked-checkbox-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
+$image-checked-radio-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
+
html {
- background: var(--color-bg--main);
- color: var(--color-txt);
+ background: $color-bg--main;
+ color: $color-txt;
font-size: 14px;
}
main {
padding-right: $size-2;
padding-left: $size-2;
}
blockquote {
- border-color: var(--color-primary);
+ border-color: $color-primary;
border-left-width: $border-4;
padding: $size-3 $size-4;
}
.btn {
@@ -36,48 +35,48 @@
font-weight: $font-bold;
padding: $size-2 $size-4;
cursor: pointer;
&:focus {
- outline: 2px dotted var(--color-primary);
+ outline: 2px dotted $color-primary;
outline-offset: 2px;
}
&:disabled {
pointer-events: none;
opacity: $opacity-50;
}
&--primary {
- background-color: var(--color-primary);
- border-color: var(--color-primary);
- color: var(--color-bg--main);
+ background-color: $color-primary;
+ border-color: $color-primary;
+ color: $color-bg--main;
}
&--secondary {
- background-color: var(--color-bg--main);
- border-color: var(--color-primary);
+ background-color: $color-bg--main;
+ border-color: $color-primary;
}
&--tertiary {
background-color: $transparent;
border-color: $transparent;
}
}
code {
- background-color: var(--color-bg--surface);
+ background-color: $color-bg--surface;
border-radius: $rounded;
font-size: $text-sm;
margin: $size-0 $size-1;
padding: $size-1 $size-2;
white-space: nowrap;
}
pre {
- background-color: var(--color-bg--surface);
- border-color: var(--color-primary);
+ background-color: $color-bg--surface;
+ border-color: $color-primary;
border-left-width: $border-4;
overflow-y: hidden;
& > code {
border-radius: $rounded-none;
@@ -98,49 +97,49 @@
border-width: $border;
padding: $size-2 $size-3;
width: $size-full;
&--select {
- background-image: var(--image-bg-select);
+ background-image: $image-bg-select-black;
background-position: right $size-2 center;
background-repeat: no-repeat;
background-size: auto $size-5;
padding-right: $size-8;
}
&:focus {
- box-shadow: ring($color: var(--color-focus-ring));
+ box-shadow: ring($color: $color-focus-ring);
@include outline-none;
}
}
.checkbox {
border-radius: $rounded;
- @include input-selection(var(--color-primary));
+ @include input-selection($color-primary);
&:checked {
- background-image: var(--image-checked-checkbox);
+ background-image: $image-checked-checkbox-white;
@include checked;
}
&:focus {
- box-shadow: ring($color: var(--color-focus-ring));
+ box-shadow: ring($color: $color-focus-ring);
@include outline-none;
}
}
.radio {
border-radius: $rounded-full;
- @include input-selection(var(--color-primary));
+ @include input-selection($color-primary);
&:checked {
- background-image: var(--image-checked-radio);
+ background-image: $image-checked-radio-white;
@include checked;
}
&:focus {
- box-shadow: ring($color: var(--color-focus-ring));
+ box-shadow: ring($color: $color-focus-ring);
@include outline-none;
}
}
label, legend, dt {
@@ -207,22 +206,9 @@
font-size: $text-lg;
}
h6, .hdg--base {
font-size: $text-base;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-bg--main: #{$gray-900};
- --color-bg--surface: #{$gray-800};
- --color-primary: #{$white};
- --color-txt: #{$white};
- --color-focus-ring: #{rgba($gray-100, 0.5)};
- --image-bg-select: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
- --image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
- --image-checked-radio: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
- }
}
@media (min-width: $breakpoint-md) {
html { font-size: 16px; }
main { @include make-container($size-10, $breakpoint-xl); }