Code for the littler Buttons the Computer used in the Turing Machine portion of the book.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
buttons-computer/sass/_menus.scss

66 lines
1.2 KiB

// Menus
.menu {
@include shadow-variant(.05rem);
background: $bg-color-light;
border-radius: $border-radius;
list-style: none;
margin: 0;
min-width: $control-width-xs;
padding: $unit-2;
transform: translateY($layout-spacing-sm);
z-index: $zindex-3;
&.menu-nav {
background: transparent;
box-shadow: none;
}
.menu-item {
margin-top: 0;
padding: 0 $unit-2;
position: relative;
& > a {
text-decoration: none;
border-radius: $border-radius;
color: inherit;
display: block;
margin: 0 (-$unit-2);
padding: $unit-o $unit-o;
&:focus,
&:hover {
background: $gray-color-light;
color: $primary-color;
}
&:active,
&.active {
background: $gray-color;
color: $primary-color;
}
}
.form-checkbox,
.form-radio,
.form-switch {
margin: $unit-h 0;
}
& + .menu-item {
margin-top: $unit-1;
font-size: .9rem;
}
}
.menu-badge {
align-items: center;
display: flex;
height: 100%;
position: absolute;
right: 0;
top: 0;
.label {
margin-right: $unit-2;
}
}
}