breadboard.scss in sass-zero-1.0.11

- old
+ new

@@ -1,12 +1,12 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
 $font-family: $font-sans;
 
-$radius-input:   $rounded;
-$radius-default: $rounded;
+$radius-primary:   $rounded;
+$radius-secondary: $rounded;
 
 :root {
   --color-bg--main:      #{$white};
   --color-bg--surface:   #{$gray-100};
   --color-bg--highlight: #{$gray-200};
@@ -30,11 +30,11 @@
   color: var(--color-text);
   font-family: $font-family;
 }
 
 .btn {
-  border-radius: $radius-default;
+  border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
   font-weight: $font-bold;
   padding: $size-2 $size-3;
   cursor: pointer;
@@ -57,11 +57,11 @@
 
   &--small {
     font-size: $text-sm;
   }
 
-  & > i {
+  &__icon {
     vertical-align: sub;
     font-size: 1.25em;
   }
 
   &:disabled {
@@ -72,11 +72,11 @@
 
 .input {
   @include appearance-none;
   resize: none;
   background-color: var(--color-bg--main);
-  border-radius: $radius-input;
+  border-radius: $radius-secondary;
   border-width: $border;
   padding: $size-2 $size-3;
   width: $w-full;
 
   &--select {
@@ -92,10 +92,18 @@
     pointer-events: none;
     opacity: $opacity-50;
   }
 }
 
+.popup-menu {
+  background-color: var(--color-bg--surface);
+  border-radius: $radius-secondary;
+  padding: $size-2 $size-3;
+  box-shadow: $shadow-md;
+  position: absolute;
+}
+
 input[type="checkbox"], input[type="radio"] {
   transform: scale(1.2, 1.2);
   margin: $size-1;
 }
 
@@ -174,19 +182,19 @@
 
 fieldset, .input {
   margin-bottom: $size-6;
 }
 
-table, progress, details, blockquote, figure, pre, menu, ul, ol, dl, p {
+table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
   margin-bottom: $size-6;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
-  border-radius: $radius-default;
+  border-radius: $radius-primary;
   padding: $size-3 $size-4;
-  box-shadow: $shadow-md;
+  box-shadow: $shadow-lg;
   color: inherit;
 }
 
 dialog::backdrop {
   background-color: rgba($gray-500, $opacity-75);
@@ -199,18 +207,19 @@
 @include progress-bar {
   background-color: var(--color-primary);
 }
 
 details {
-  background-color: var(--color-bg--surface);
-  border-left-width: $border-4;
-  padding: $size-2 $size-3;
+  position: relative;
+  display: inline-block;
 }
 
 summary {
-  padding: $size-1 $size-0;
-  font-weight: $font-bold;
-  cursor: pointer;
+  list-style: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
 }
 
 table, progress {
   width: $w-full;
 }