app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.46 vs app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.47
- old
+ new
@@ -8,21 +8,21 @@
:root {
--color-bg--main: #{$white};
--color-bg--surface: #{$gray-100};
--color-primary: #{$gray-900};
- --color-txt: #{$gray-900};
+ --color-text: #{$gray-900};
--color-focus-ring: #{rgba($gray-900, $opacity-50)};
--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>');
}
html {
background: var(--color-bg--main);
- color: var(--color-txt);
+ color: var(--color-text);
font-family: $font-family;
font-size: 16px;
}
.btn {
@@ -31,15 +31,10 @@
display: inline-block;
font-weight: $font-bold;
padding: $size-2 $size-4;
cursor: pointer;
- &:focus {
- outline: 2px dotted var(--color-primary);
- outline-offset: 2px;
- }
-
&:disabled {
pointer-events: none;
opacity: $opacity-50;
}
@@ -50,19 +45,21 @@
}
&--secondary {
background-color: var(--color-bg--main);
border-color: var(--color-primary);
+ color: var(--color-primary);
}
&--tertiary {
background-color: $transparent;
border-color: $transparent;
}
}
.input {
+ resize: none;
appearance: none;
background-color: $transparent;
border-radius: $radius-input;
border-width: $border;
padding: $size-2 $size-3;
@@ -126,12 +123,14 @@
white-space: nowrap;
}
pre {
background-color: var(--color-bg--surface);
+ border-left-width: $border-4;
overflow-y: hidden;
& > code {
+ border-radius: $rounded-none;
display: block;
padding: $size-2 $size-3;
white-space: pre;
}
}