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

Restructure files, Add back inline-flex for controls and tags

Browse Source
This commit is contained in:
Jeremy Thomas 2016-04-22 20:52:49 +01:00
parent 974805b46a
commit c8e3cbf912
9 changed files with 219 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/base/base.sass
View File

@ -1,5 +1,5 @@
@charset "utf-8"
@import "generic"
@import "classes"
@import "helpers"
@import "highlight"

18
sass/base/classes.sass Normal file
View File

@ -0,0 +1,18 @@
.block
&:not(:last-child)
margin-bottom: 20px
.container
position: relative
+desktop
margin: 0 auto
max-width: 960px
// Modifiers
&.is-fluid
margin: 0 20px
max-width: none
.fa
font-size: 21px
text-align: center
vertical-align: top

21
sass/base/generic.sass
View File

@ -97,24 +97,3 @@ table
vertical-align: top
th
color: $text-strong
// Classes
.block
&:not(:last-child)
margin-bottom: 20px
.container
position: relative
+desktop
margin: 0 auto
max-width: 960px
// Modifiers
&.is-fluid
margin: 0 20px
max-width: none
.fa
font-size: 21px
text-align: center
vertical-align: top

17
sass/components/components.sass
View File

@ -2,6 +2,7 @@
@import "card"
@import "grid"
@import "highlight"
@import "media"
@import "menu"
@import "message"
@ -10,19 +11,3 @@
@import "pagination"
@import "panel"
@import "tabs"
.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)
display: block
padding: 20px
a.box
&:hover,
&:focus
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
&:active
box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link

0
sass/base/highlight.sass → sass/components/highlight.sass
View File

14
sass/elements/box.sass Normal file
View File

@ -0,0 +1,14 @@
.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)
display: block
padding: 20px
a.box
&:hover,
&:focus
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
&:active
box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link

3
sass/elements/controls.sass
View File

@ -1,11 +1,12 @@
=control
-moz-appearance: none
-webkit-appearance: none
align-items: center
background: $control-background
border: 1px solid $control-border
border-radius: $radius
color: $control
display: inline-block
display: inline-flex
font-size: $size-normal
height: 32px
line-height: 24px

182
sass/elements/elements.sass
View File

@ -2,6 +2,7 @@
@import "controls"
@import "box"
@import "button"
@import "content"
@import "image"
@ -10,183 +11,4 @@
@import "table"
@import "title"
.delete
+unselectable
-moz-appearance: none
-webkit-appearance: none
background: rgba(black, 0.2)
border: none
border-radius: 290486px
cursor: pointer
display: inline-block
height: 24px
position: relative
vertical-align: top
width: 24px
&:before,
&:after
background: white
content: ""
display: block
height: 2px
left: 50%
margin-left: -25%
margin-top: -1px
position: absolute
top: 50%
width: 50%
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
&:hover
background: rgba(black, 0.5)
// Sizes
&.is-small
height: 16px
width: 16px
&.is-medium
height: 32px
width: 32px
&.is-large
height: 40px
width: 40px
.icon
+fa(21px, 24px)
.fa
font-size: inherit
line-height: inherit
// Sizes
&.is-small
+fa(14px, 16px)
&.is-medium
+fa(28px, 32px)
&.is-large
+fa(42px, 48px)
.hamburger
cursor: pointer
display: block
height: 50px
position: relative
width: 50px
span
background: $text
display: block
height: 1px
left: 50%
margin-left: -7px
position: absolute
top: 50%
transition: none $speed $easing
transition-property: background, left, opacity, transform
width: 15px
&:nth-child(1)
margin-top: -6px
&:nth-child(2)
margin-top: -1px
&:nth-child(3)
margin-top: 4px
&:hover
background: $background
// Modifers
&.is-active
span
background: $link
&:nth-child(1)
margin-left: -5px
transform: rotate(45deg)
transform-origin: left top
&:nth-child(2)
opacity: 0
&:nth-child(3)
margin-left: -5px
transform: rotate(-45deg)
transform-origin: left bottom
+tablet
height: $header-height
width: $header-height
.heading
display: block
font-size: 11px
letter-spacing: 1px
margin-bottom: 5px
text-transform: uppercase
.highlight
@extend .block
font-size: 12px
font-weight: normal
max-width: 100%
overflow: hidden
padding: 0
pre
overflow: auto
max-width: 100%
.loader
animation: spin-around 500ms infinite linear
border: 2px solid $border
border-radius: 290486px
border-right-color: transparent
border-top-color: transparent
content: ""
display: block
height: 16px
position: relative
width: 16px
.number
background: $background
border-radius: 290486px
display: inline-block
font-size: $size-medium
vertical-align: top
.tag
background: $background
border-radius: 290486px
color: $text
display: inline-block
font-size: 12px
height: 24px
justify-content: center
line-height: 16px
padding: 4px 10px
vertical-align: top
white-space: nowrap
.delete
margin-left: 4px
margin-right: -6px
&:not(.is-large)
.delete
@extend .delete.is-small
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
color: $color-invert
&.is-dark
background: $text
color: $text-invert
// Sizes
&.is-small
font-size: $size-small
height: 20px
padding: 2px 8px
&.is-medium
font-size: $size-normal
height: 32px
padding: 8px 14px
&.is-large
font-size: $size-5
height: 40px
line-height: 24px
padding: 8px 18px
.delete
margin-left: 4px
margin-right: -8px
@import "other"

181
sass/elements/other.sass Normal file
View File

@ -0,0 +1,181 @@
.delete
+unselectable
-moz-appearance: none
-webkit-appearance: none
background: rgba(black, 0.2)
border: none
border-radius: 290486px
cursor: pointer
display: inline-block
height: 24px
position: relative
vertical-align: top
width: 24px
&:before,
&:after
background: white
content: ""
display: block
height: 2px
left: 50%
margin-left: -25%
margin-top: -1px
position: absolute
top: 50%
width: 50%
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
&:hover
background: rgba(black, 0.5)
// Sizes
&.is-small
height: 16px
width: 16px
&.is-medium
height: 32px
width: 32px
&.is-large
height: 40px
width: 40px
.icon
+fa(21px, 24px)
.fa
font-size: inherit
line-height: inherit
// Sizes
&.is-small
+fa(14px, 16px)
&.is-medium
+fa(28px, 32px)
&.is-large
+fa(42px, 48px)
.hamburger
cursor: pointer
display: block
height: 50px
position: relative
width: 50px
span
background: $text
display: block
height: 1px
left: 50%
margin-left: -7px
position: absolute
top: 50%
transition: none $speed $easing
transition-property: background, left, opacity, transform
width: 15px
&:nth-child(1)
margin-top: -6px
&:nth-child(2)
margin-top: -1px
&:nth-child(3)
margin-top: 4px
&:hover
background: $background
// Modifers
&.is-active
span
background: $link
&:nth-child(1)
margin-left: -5px
transform: rotate(45deg)
transform-origin: left top
&:nth-child(2)
opacity: 0
&:nth-child(3)
margin-left: -5px
transform: rotate(-45deg)
transform-origin: left bottom
+tablet
height: $header-height
width: $header-height
.heading
display: block
font-size: 11px
letter-spacing: 1px
margin-bottom: 5px
text-transform: uppercase
.highlight
@extend .block
font-size: 12px
font-weight: normal
max-width: 100%
overflow: hidden
padding: 0
pre
overflow: auto
max-width: 100%
.loader
animation: spin-around 500ms infinite linear
border: 2px solid $border
border-radius: 290486px
border-right-color: transparent
border-top-color: transparent
content: ""
display: block
height: 16px
position: relative
width: 16px
.number
background: $background
border-radius: 290486px
display: inline-block
font-size: $size-medium
vertical-align: top
.tag
align-items: center
background: $background
border-radius: 290486px
color: $text
display: inline-flex
font-size: 12px
height: 24px
justify-content: center
line-height: 16px
padding: 4px 10px
vertical-align: top
white-space: nowrap
.delete
margin-left: 4px
margin-right: -6px
&:not(.is-large)
.delete
@extend .delete.is-small
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
color: $color-invert
&.is-dark
background: $text
color: $text-invert
// Sizes
&.is-small
font-size: $size-small
height: 20px
padding: 2px 8px
&.is-medium
font-size: $size-normal
height: 32px
padding: 8px 14px
&.is-large
font-size: $size-5
height: 40px
line-height: 24px
padding: 8px 18px
.delete
margin-left: 4px
margin-right: -8px