Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add modals, Add block, Add has modifier

Browse Source
This commit is contained in:
Jeremy Thomas
2016-02-14 22:10:05 +00:00
parent f1838e993a
commit 4413d760e9
14 changed files with 92 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bulma/base/content.sass
View File

@@ -1,4 +1,5 @@
.content
@extend .block
&.is-medium
font-size: $size-5
code
@@ -7,8 +8,6 @@
font-size: $size-4
code
font-size: $size-5
&:not(:last-child)
margin-bottom: 20px
h1,
h2,
h3,

7
bulma/base/generic.sass
View File

@@ -7,6 +7,8 @@ html
overflow-x: hidden
overflow-y: scroll
text-rendering: optimizeLegibility
&.has-modal-open
overflow: hidden
body,
button,
@@ -47,7 +49,6 @@ hr
margin: 20px 0
img
max-height: 100%
max-width: 100%
input[type="checkbox"],
@@ -90,8 +91,10 @@ table
th
color: $text-strong
.block:not(:last-child)
margin-bottom: 20px
.container
margin: 0 20px
position: relative
+desktop
margin: 0 auto

29
bulma/base/helpers.sass
View File

@@ -1,14 +1,3 @@
// Alignment
.is-centered
text-align: center
.is-left
text-align: left
.is-right
text-align: right
// Display
.is-block
@@ -20,7 +9,7 @@
.is-flex
display: flex
// Pull
// Float
.is-clearfix
+clearfix
@@ -31,11 +20,27 @@
.is-pulled-right
float: right
// Overlay
.is-overlay
+overlay
// Size
.is-fullwidth
width: 100%
// Text
.is-text-centered
text-align: center
.is-text-left
text-align: left
.is-text-right
text-align: right
// Visibility
.is-hidden-mobile

4
bulma/components/components.sass
View File

@@ -7,6 +7,4 @@
@import "tabs"
@import "media"
@import "menu"
.block:not(:last-child)
margin-bottom: 20px
@import "modal"

29
bulma/components/media.sass
View File

@@ -1,14 +1,3 @@
.media-image
&.is-32
width: 32px
&.is-40
width: 40px
+mobile
margin-bottom: 10px
+tablet
margin-right: 10px
width: 60px
.media-number
background: $background
border-radius: 290486px
@@ -26,25 +15,18 @@
margin-right: 10px
.media-left
+mobile
margin-bottom: 20px
+tablet
margin-right: 20px
margin-right: 10px
.media-right
+mobile
margin-top: 20px
+tablet
margin-left: 20px
margin-left: 10px
.media-content
flex: 1
text-align: left
.textarea
min-height: 60px
.media
align-items: flex-start
display: flex
text-align: left
.content:not(:last-child)
margin-bottom: 10px
@@ -52,10 +34,6 @@
border-top: 1px solid rgba($border, 0.5)
display: flex
padding-top: 10px
.media-image
margin-bottom: 0
margin-right: 10px
width: 40px
.textarea
+control-small
.button
@@ -77,7 +55,6 @@
margin-top: 20px
padding-top: 20px
+tablet
display: flex
&.is-large
.media-number
margin-right: 20px

34
bulma/components/modal.sass Normal file
View File

@@ -0,0 +1,34 @@
.modal-background
+overlay
background: rgba(black, 0.86)
.modal-content
margin: 0 20px
max-height: calc(100vh - 160px)
overflow: auto
position: relative
width: 100%
+tablet
margin: 0 auto
max-height: calc(100vh - 40px)
width: 640px
.modal-close
@extend .delete
background: none
height: 40px
position: fixed
right: 20px
top: 20px
width: 40px
.modal
+overlay
align-items: center
display: none
justify-content: center
overflow: hidden
position: fixed
z-index: 1986
&.is-active
display: flex

3
bulma/components/navbar.sass
View File

@@ -7,8 +7,7 @@
margin-bottom: 10px
.navbar
&:not(:last-child)
margin-bottom: 20px
@extend .block
code
border-radius: $radius
img

3
bulma/components/tabs.sass
View File

@@ -1,10 +1,9 @@
.tabs
@extend .block
line-height: 24px
overflow: hidden
overflow-x: auto
white-space: nowrap
&:not(:last-child)
margin-bottom: 20px
.fa
font-size: 14px
line-height: 20px

2
bulma/elements/controls.sass
View File

@@ -182,7 +182,7 @@
top: 8px
&:not(:last-child)
margin-bottom: 10px
&.is-withicon
&.has-icon
& > .fa
+fa(14px, 20px)
color: $text-light

30
bulma/elements/elements.sass
View File

@@ -7,6 +7,12 @@
@import "messages"
@import "notifications"
.box
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
@@ -26,24 +32,27 @@
content: ""
display: block
height: 2px
left: 6px
left: 50%
margin-left: -25%
margin-top: -1px
position: absolute
top: 11px
width: 12px
top: 50%
width: 50%
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
&:hover
background: rgba(black, 0.5)
background: $red
&.is-small
height: 16px
width: 16px
&:before,
&:after
left: 4px
top: 7px
width: 8px
&.is-medium
height: 32px
width: 32px
&.is-large
height: 40px
width: 40px
.icon
+fa(21px, 24px)
@@ -107,13 +116,12 @@
text-transform: uppercase
.highlight
@extend .block
font-size: 12px
font-weight: normal
max-width: 100%
overflow: hidden
padding: 0
&:not(:last-child)
margin-bottom: 20px
pre
overflow: auto
max-width: 100%

3
bulma/elements/messages.sass
View File

@@ -19,10 +19,9 @@
border-top: none
.message
@extend .block
background: $background
border-radius: $radius
&:not(:last-child)
margin-bottom: 20px
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)

7
bulma/elements/notifications.sass
View File

@@ -1,11 +1,10 @@
.notification
@extend .block
+clearfix
background: $background
border-radius: $radius
padding: 16px 20px
position: relative
&:not(:last-child)
margin-bottom: 20px
.title
color: inherit
@each $name, $pair in $colors
@@ -15,6 +14,10 @@
background: $color
color: $color-invert
.delete
background: rgba(black, 0.2)
border-radius: 0 $radius
float: right
margin: -16px -20px 0 20px
&:hover
background: rgba(black, 0.5)

4
bulma/elements/titles.sass
View File

@@ -1,12 +1,10 @@
.title,
.subtitle
@extend .block
font-weight: 300
&:not(:last-child)
margin-bottom: 20px
a
&:hover
border-bottom: 1px solid
// text-decoration: underline
.title
color: $text-strong

3
bulma/layout/section.sass
View File

@@ -1,9 +1,10 @@
.section
background: white
padding: 40px 0
padding: 40px 20px
& + .section
border-top: 1px solid rgba($border, 0.5)
+desktop
padding: 40px 0
&.is-medium
padding: 120px 0
&.is-large