library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add panel, Rename menu

Browse Source
This commit is contained in:
Jeremy Thomas 2016-03-25 13:38:40 +00:00
parent d8583d7f26
commit 39073e8cf0
9 changed files with 167 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md Normal file
View File

@ -0,0 +1,3 @@
## 0.0.17
* `.control.is-inline` for horizontal forms

23
bulma/components/card.sass
View File

@ -1,3 +1,21 @@
.card-header
align-items: stretch
box-shadow: 0 1px 2px rgba(black, 0.1)
display: flex
min-height: 36px
.card-header-title
align-items: center
color: $text-strong
display: flex
flex: 1
font-weight: bold
padding: 0 10px
.card-header-icon
+fa(14px, 36px)
cursor: pointer
.card-image
display: block
position: relative
@ -9,7 +27,10 @@
.card-footer
background: $background
display: block
align-items: center
display: flex
font-size: $size-small
justify-content: center
padding: 10px
.card

8
bulma/components/components.sass
View File

@ -7,4 +7,12 @@
@import "tabs"
@import "media"
@import "menu"
@import "panel"
@import "modal"
.box
@extend .block
background: white
border-radius: 5px
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
padding: 20px

91
bulma/components/menu.sass
View File

@ -1,76 +1,31 @@
.menu-icon
+fa(14px, 16px)
color: $text-light
float: left
margin: 0 4px 0 -2px
.fa
font-size: inherit
line-height: inherit
.menu-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-nav
a
display: block
padding: 5px 10px
.menu-list
a
border-radius: 2px
color: $text
&: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
display: block
padding: 8px
padding-left: 32px
input
left: 9px
top: 9px
padding: 4px 8px
&:hover
border-color: $link
a.menu-block:hover
background: $background
color: $link
&.is-active
background: $link
color: $link-invert
li ul
border-left: 1px solid $border
margin: 8px
padding-left: 8px
.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
.menu-label
color: $text-light
font-size: $size-small
letter-spacing: 1px
margin-bottom: 5px
padding-left: 8px
text-transform: uppercase
&:not(:first-child)
margin-top: 20px

76
bulma/components/panel.sass Normal file
View File

@ -0,0 +1,76 @@
.panel-icon
+fa(14px, 16px)
color: $text-light
float: left
margin: 0 4px 0 -2px
.fa
font-size: inherit
line-height: inherit
.panel-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
.panel-list
a
color: $text
&:hover
color: $link
.panel-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
.panel-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
display: block
padding: 8px
padding-left: 32px
input
left: 9px
top: 9px
&:hover
border-color: $link
a.panel-block:hover
background: $background
.panel-checkbox
@extend .checkbox
display: block
padding: 9px 10px 9px 30px
&:not(:last-child)
border-bottom: 1px solid $border
input
left: 8px
top: 10px
.panel
border: 1px solid $border
border-radius: 5px
&:not(:last-child)
margin-bottom: 20px

32
bulma/elements/controls.sass
View File

@ -187,6 +187,18 @@
&:not(:last-child)
margin-bottom: 5px
.control-label
flex: 1
margin-right: 20px
padding-top: 7px
text-align: right
.control-element
display: flex
flex: 5
.input:not(:last-child)
margin-right: 10px
.control
position: relative
text-align: left
@ -211,15 +223,6 @@
padding-left: 32px
&:focus + .fa
color: $control-active
&.is-horizontal
display: flex
& > .button,
& > .input,
& > .select
&:not(:last-child)
margin-right: 10px
& > .input
flex: 1
&.is-grouped
display: flex
.input,
@ -240,3 +243,14 @@
border-radius: 0 $radius $radius 0
&.is-centered
justify-content: center
&.is-horizontal
display: flex
& > .button,
& > .input,
& > .select
&:not(:last-child)
margin-right: 10px
& > .input
flex: 1
&.is-inline
display: flex

7
bulma/elements/elements.sass
View File

@ -7,13 +7,6 @@
@import "messages"
@import "notifications"
.box
@extend .block
background: white
border-radius: 5px
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
padding: 20px
.delete
+unselectable
-moz-appearance: none

13
bulma/layout/header.sass
View File

@ -35,12 +35,7 @@
img
max-height: 24px
a
color: $text
flex: 1
&:hover
color: $link-hover
&.is-active
color: $link-active
.fa
font-size: 21px
line-height: 24px
@ -49,6 +44,14 @@
+mobile
text-align: left
.header-item a,
a.header-item
color: $text
&:hover
color: $link-hover
&.is-active
color: $link-active
.header-icon
+fa(14px, 24px)
color: $text

6
bulma/layout/hero.sass
View File

@ -64,12 +64,12 @@
.header .container
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
.header-icon,
a.header-item,
.header-item > a:not(.button)
color: $color-invert
opacity: 0.5
color: rgba($color-invert, 0.5)
&:hover,
&.is-active
opacity: 1
color: $color-invert
.tabs
a
color: $color-invert