mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add menu
This commit is contained in:
Jeremy Thomas
parent
4509738054
commit
c01255b873
@ -6,6 +6,7 @@
|
||||
@import table
|
||||
@import tabs
|
||||
@import media
|
||||
@import menu
|
||||
|
||||
.block:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
|
||||
@ -1,9 +1,20 @@
|
||||
.menu
|
||||
border: 1px solid $border
|
||||
.menu-icon
|
||||
+fa(14px, 16px)
|
||||
color: $text-light
|
||||
float: left
|
||||
margin: 0 4px 0 -2px
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
|
||||
.menu-heading
|
||||
@extend .heading
|
||||
background: $background
|
||||
border-bottom: 1px solid $border
|
||||
border-radius: 4px 4px 0 0
|
||||
color: $text-strong
|
||||
font-size: $size-medium
|
||||
font-weight: 300
|
||||
padding: 10px
|
||||
|
||||
.menu-list
|
||||
a
|
||||
@ -11,7 +22,28 @@
|
||||
&:hover
|
||||
color: $link
|
||||
|
||||
.menu-tabs
|
||||
display: flex
|
||||
font-size: $size-small
|
||||
padding: 5px 10px 0
|
||||
justify-content: center
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
a
|
||||
border-bottom: 1px solid $border
|
||||
margin-bottom: -1px
|
||||
padding: 5px
|
||||
&.is-active
|
||||
border-bottom-color: $link-active-border
|
||||
color: $link-active
|
||||
|
||||
.menu-block
|
||||
color: $text-strong
|
||||
display: block
|
||||
line-height: 16px
|
||||
padding: 10px
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
.checkbox
|
||||
border: 1px solid transparent
|
||||
border-radius: $radius
|
||||
@ -23,3 +55,22 @@
|
||||
top: 9px
|
||||
&:hover
|
||||
border-color: $link
|
||||
|
||||
a.menu-block:hover
|
||||
background: $background
|
||||
|
||||
.menu-checkbox
|
||||
@extend .checkbox
|
||||
display: block
|
||||
padding: 9px 10px 9px 30px
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
input
|
||||
left: 8px
|
||||
top: 10px
|
||||
|
||||
.menu
|
||||
border: 1px solid $border
|
||||
border-radius: 5px
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
|
||||
218
css/bulma.css
vendored
218
css/bulma.css
vendored
@ -758,7 +758,7 @@ table th {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.checkbox, .radio {
|
||||
.checkbox, .menu-checkbox, .radio {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 16px;
|
||||
@ -767,7 +767,7 @@ table th {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox input, .radio input {
|
||||
.checkbox input, .menu-checkbox input, .radio input {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: white;
|
||||
@ -794,37 +794,37 @@ table th {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.checkbox input:hover, .radio input:hover {
|
||||
.checkbox input:hover, .menu-checkbox input:hover, .radio input:hover {
|
||||
border-color: #aeb1b5;
|
||||
}
|
||||
|
||||
.checkbox input:active, .radio input:active, .checkbox input:focus, .radio input:focus {
|
||||
.checkbox input:active, .menu-checkbox input:active, .radio input:active, .checkbox input:focus, .menu-checkbox input:focus, .radio input:focus {
|
||||
border-color: #1fc8db;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.checkbox input[disabled], .radio input[disabled], .checkbox input[disabled]:hover, .radio input[disabled]:hover {
|
||||
.checkbox input[disabled], .menu-checkbox input[disabled], .radio input[disabled], .checkbox input[disabled]:hover, .menu-checkbox input[disabled]:hover, .radio input[disabled]:hover {
|
||||
background: #f5f7fa;
|
||||
border-color: #d3d6db;
|
||||
}
|
||||
|
||||
.checkbox input[disabled]::-moz-placeholder, .radio input[disabled]::-moz-placeholder, .checkbox input[disabled]:hover::-moz-placeholder, .radio input[disabled]:hover::-moz-placeholder {
|
||||
.checkbox input[disabled]::-moz-placeholder, .menu-checkbox input[disabled]::-moz-placeholder, .radio input[disabled]::-moz-placeholder, .checkbox input[disabled]:hover::-moz-placeholder, .menu-checkbox input[disabled]:hover::-moz-placeholder, .radio input[disabled]:hover::-moz-placeholder {
|
||||
color: rgba(34, 35, 36, 0.3);
|
||||
}
|
||||
|
||||
.checkbox input[disabled]::-webkit-input-placeholder, .radio input[disabled]::-webkit-input-placeholder, .checkbox input[disabled]:hover::-webkit-input-placeholder, .radio input[disabled]:hover::-webkit-input-placeholder {
|
||||
.checkbox input[disabled]::-webkit-input-placeholder, .menu-checkbox input[disabled]::-webkit-input-placeholder, .radio input[disabled]::-webkit-input-placeholder, .checkbox input[disabled]:hover::-webkit-input-placeholder, .menu-checkbox input[disabled]:hover::-webkit-input-placeholder, .radio input[disabled]:hover::-webkit-input-placeholder {
|
||||
color: rgba(34, 35, 36, 0.3);
|
||||
}
|
||||
|
||||
.checkbox input[disabled]:-moz-placeholder, .radio input[disabled]:-moz-placeholder, .checkbox input[disabled]:hover:-moz-placeholder, .radio input[disabled]:hover:-moz-placeholder {
|
||||
.checkbox input[disabled]:-moz-placeholder, .menu-checkbox input[disabled]:-moz-placeholder, .radio input[disabled]:-moz-placeholder, .checkbox input[disabled]:hover:-moz-placeholder, .menu-checkbox input[disabled]:hover:-moz-placeholder, .radio input[disabled]:hover:-moz-placeholder {
|
||||
color: rgba(34, 35, 36, 0.3);
|
||||
}
|
||||
|
||||
.checkbox input[disabled]:-ms-input-placeholder, .radio input[disabled]:-ms-input-placeholder, .checkbox input[disabled]:hover:-ms-input-placeholder, .radio input[disabled]:hover:-ms-input-placeholder {
|
||||
.checkbox input[disabled]:-ms-input-placeholder, .menu-checkbox input[disabled]:-ms-input-placeholder, .radio input[disabled]:-ms-input-placeholder, .checkbox input[disabled]:hover:-ms-input-placeholder, .menu-checkbox input[disabled]:hover:-ms-input-placeholder, .radio input[disabled]:hover:-ms-input-placeholder {
|
||||
color: rgba(34, 35, 36, 0.3);
|
||||
}
|
||||
|
||||
.checkbox input:after, .radio input:after {
|
||||
.checkbox input:after, .menu-checkbox input:after, .radio input:after {
|
||||
border: 1px solid white;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
@ -843,29 +843,29 @@ table th {
|
||||
transform: rotate(-45deg) scale(1);
|
||||
}
|
||||
|
||||
.checkbox input:checked, .radio input:checked {
|
||||
.checkbox input:checked, .menu-checkbox input:checked, .radio input:checked {
|
||||
background: #1fc8db;
|
||||
border-color: #1fc8db;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checkbox input:checked:after, .radio input:checked:after {
|
||||
.checkbox input:checked:after, .menu-checkbox input:checked:after, .radio input:checked:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.checkbox:hover, .radio:hover {
|
||||
.checkbox:hover, .menu-checkbox:hover, .radio:hover {
|
||||
color: #222324;
|
||||
}
|
||||
|
||||
.checkbox:hover input, .radio:hover input {
|
||||
.checkbox:hover input, .menu-checkbox:hover input, .radio:hover input {
|
||||
border-color: #aeb1b5;
|
||||
}
|
||||
|
||||
.checkbox:hover input:checked, .radio:hover input:checked {
|
||||
.checkbox:hover input:checked, .menu-checkbox:hover input:checked, .radio:hover input:checked {
|
||||
border-color: #1fc8db;
|
||||
}
|
||||
|
||||
.is-disabled.checkbox, .is-disabled.radio, .is-disabled.checkbox:hover, .is-disabled.radio:hover {
|
||||
.is-disabled.checkbox, .is-disabled.menu-checkbox, .is-disabled.radio, .is-disabled.checkbox:hover, .is-disabled.menu-checkbox:hover, .is-disabled.radio:hover {
|
||||
color: #aeb1b5;
|
||||
}
|
||||
|
||||
@ -1855,23 +1855,6 @@ table th {
|
||||
margin: -16px -20px 0 20px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.highlight:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delete {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 290486px;
|
||||
@ -1966,7 +1949,6 @@ table th {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 50px;
|
||||
padding: 19px 17px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
@ -1975,23 +1957,25 @@ table th {
|
||||
background: #69707a;
|
||||
display: block;
|
||||
height: 1px;
|
||||
left: 17px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: none 86ms ease-out;
|
||||
transition-property: background, left, opacity, transform;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.hamburger span:nth-child(1), .header-toggle span:nth-child(1) {
|
||||
top: 19px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.hamburger span:nth-child(2), .header-toggle span:nth-child(2) {
|
||||
top: 24px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.hamburger span:nth-child(3), .header-toggle span:nth-child(3) {
|
||||
bottom: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.hamburger:hover, .header-toggle:hover {
|
||||
@ -2003,7 +1987,7 @@ table th {
|
||||
}
|
||||
|
||||
.hamburger.is-active span:nth-child(1), .is-active.header-toggle span:nth-child(1) {
|
||||
left: 20px;
|
||||
margin-left: -5px;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: left top;
|
||||
}
|
||||
@ -2013,7 +1997,7 @@ table th {
|
||||
}
|
||||
|
||||
.hamburger.is-active span:nth-child(3), .is-active.header-toggle span:nth-child(3) {
|
||||
left: 20px;
|
||||
margin-left: -5px;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
@ -2026,6 +2010,43 @@ table th {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.highlight:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.image img {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image.is-3x2 {
|
||||
padding-top: 66.6666%;
|
||||
}
|
||||
|
||||
.loader, .control.is-loading:after, .button.is-loading:after {
|
||||
animation: spin-around 500ms infinite linear;
|
||||
border: 2px solid #d3d6db;
|
||||
@ -2216,7 +2237,7 @@ table th {
|
||||
}
|
||||
|
||||
.columns.is-gapless > .column + .column {
|
||||
margin-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.columns.is-vcentered {
|
||||
@ -2763,6 +2784,119 @@ table th {
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 16px;
|
||||
color: #aeb1b5;
|
||||
float: left;
|
||||
margin: 0 4px 0 -2px;
|
||||
}
|
||||
|
||||
.menu-icon .fa {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.menu-heading {
|
||||
background: #f5f7fa;
|
||||
border-bottom: 1px solid #d3d6db;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: #222324;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.menu-list a {
|
||||
color: #69707a;
|
||||
}
|
||||
|
||||
.menu-list a:hover {
|
||||
color: #1fc8db;
|
||||
}
|
||||
|
||||
.menu-tabs {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
padding: 5px 10px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-tabs:not(:last-child) {
|
||||
border-bottom: 1px solid #d3d6db;
|
||||
}
|
||||
|
||||
.menu-tabs a {
|
||||
border-bottom: 1px solid #d3d6db;
|
||||
margin-bottom: -1px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.menu-tabs a.is-active {
|
||||
border-bottom-color: #222324;
|
||||
color: #222324;
|
||||
}
|
||||
|
||||
.menu-block {
|
||||
color: #222324;
|
||||
display: block;
|
||||
line-height: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.menu-block:not(:last-child) {
|
||||
border-bottom: 1px solid #d3d6db;
|
||||
}
|
||||
|
||||
.menu-block .checkbox, .menu-block .menu-checkbox {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.menu-block .checkbox input, .menu-block .menu-checkbox input {
|
||||
left: 9px;
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.menu-block .checkbox:hover, .menu-block .menu-checkbox:hover {
|
||||
border-color: #1fc8db;
|
||||
}
|
||||
|
||||
a.menu-block:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.menu-checkbox {
|
||||
display: block;
|
||||
padding: 9px 10px 9px 30px;
|
||||
}
|
||||
|
||||
.menu-checkbox:not(:last-child) {
|
||||
border-bottom: 1px solid #d3d6db;
|
||||
}
|
||||
|
||||
.menu-checkbox input {
|
||||
left: 8px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
border: 1px solid #d3d6db;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.menu:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.block:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -3609,8 +3743,8 @@ table th {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: space-between;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero.is-fullheight .tabs a {
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
css/bulma.min.css
vendored
2
css/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user