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

Add placeholders

Browse Source
This commit is contained in:
Jeremy Thomas 2016-09-22 22:03:22 +01:00
parent 14e01a1358
commit 7634faba6a
21 changed files with 1508 additions and 2925 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bulma.sass vendored
View File

@ -1,6 +1,5 @@
@charset "utf-8"
@import "sass/utilities/utilities"
@import "sass/base/base"
@import "sass/elements/elements"
@import "sass/components/components"

2
docs/bulma-docs.sass
View File

@ -235,7 +235,7 @@ $structure-invert: $danger-invert
position: relative
.copy,
.expand
@extend .unselectable
@extend %unselectable
background: $white
border: solid $border
border-width: 0 0 1px 1px

4110
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

1
sass/base/base.sass
View File

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

22
sass/base/classes.sass
View File

@ -1,22 +0,0 @@
@import "../utilities/mixins.sass"
.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
+widescreen
max-width: 1200px
.fa
font-size: 21px
text-align: center
vertical-align: top

4
sass/base/helpers.sass
View File

@ -1,4 +1,4 @@
@import "../elements/other.sass"
@import "./placeholders.sass"
@import "../utilities/mixins.sass"
// Display
@ -107,4 +107,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
padding: 0 !important
.is-unselectable
@extend .unselectable
@extend %unselectable

107
sass/base/placeholders.sass Normal file
View File

@ -0,0 +1,107 @@
@import "../utilities/animations.sass"
@import "../utilities/variables.sass"
%block
&:not(:last-child)
margin-bottom: 20px
%delete
@extend %unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: 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-color: $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-color: rgba($black, 0.5)
// Sizes
&.is-small
height: 16px
width: 16px
&.is-medium
height: 32px
width: 32px
&.is-large
height: 40px
width: 40px
%hamburger
cursor: pointer
display: block
height: $nav-height
position: relative
width: $nav-height
span
background-color: $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-color: $background
// Modifers
&.is-active
span
background-color: $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
%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
%unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none

4
sass/components/level.sass
View File

@ -1,4 +1,4 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
@ -37,7 +37,7 @@
justify-content: flex-end
.level
@extend .block
@extend %block
align-items: center
justify-content: space-between
code

4
sass/components/message.sass
View File

@ -1,4 +1,4 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/functions.sass"
@import "../utilities/variables.sass"
@ -21,7 +21,7 @@
border-top: none
.message
@extend .block
@extend %block
background-color: $background
border-radius: $radius
// Colors

8
sass/components/modal.sass
View File

@ -1,4 +1,4 @@
@import "../elements/other.sass"
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
@ -6,7 +6,8 @@
+overlay
background-color: rgba($black, 0.86)
.modal-content
.modal-content,
.modal-card
margin: 0 20px
max-height: calc(100vh - 160px)
overflow: auto
@ -19,7 +20,7 @@
width: 640px
.modal-close
@extend .delete
@extend %delete
background: none
height: 40px
position: fixed
@ -28,7 +29,6 @@
width: 40px
.modal-card
@extend .modal-content
display: flex
flex-direction: column
max-height: calc(100vh - 40px)

4
sass/components/nav.sass
View File

@ -1,11 +1,11 @@
@import "../elements/other.sass"
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
// Components
.nav-toggle
@extend .hamburger
@extend %hamburger
// Responsiveness
+tablet
display: none

7
sass/components/tabs.sass
View File

@ -1,10 +1,9 @@
@import "../base/classes.sass"
@import "../elements/other.sass"
@import "../base/placeholders.sass"
@import "../utilities/variables.sass"
.tabs
@extend .block
@extend .unselectable
@extend %block
@extend %unselectable
align-items: stretch
display: flex
justify-content: space-between

4
sass/elements/box.sass
View File

@ -1,8 +1,8 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/variables.sass"
.box
@extend .block
@extend %block
background-color: $white
border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)

6
sass/elements/button.sass
View File

@ -1,4 +1,4 @@
@import "../elements/other.sass"
@import "../base/placeholders.sass"
@import "../utilities/controls.sass"
@import "../utilities/variables.sass"
@ -22,7 +22,7 @@
.button
+control
@extend .unselectable
@extend %unselectable
justify-content: center
padding-left: 10px
padding-right: 10px
@ -109,6 +109,6 @@
color: transparent !important
pointer-events: none
&:after
@extend .loader
@extend %loader
+center(16px)
position: absolute !important

4
sass/elements/content.sass
View File

@ -1,8 +1,8 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/variables.sass"
.content
@extend .block
@extend %block
color: $text
// Inline
a:not(.button)

8
sass/elements/form.sass
View File

@ -1,4 +1,4 @@
@import "../elements/other.sass"
@import "../base/placeholders.sass"
@import "../utilities/controls.sass"
@import "../utilities/mixins.sass"
@ -9,7 +9,8 @@
&.is-#{$name}
border-color: $color
.input
.input,
.textarea
+form-control
box-shadow: inset 0 1px 2px rgba($black, 0.1)
max-width: 100%
@ -32,7 +33,6 @@
width: auto
.textarea
@extend .input
display: block
line-height: 1.2
max-height: 600px
@ -257,7 +257,7 @@
flex-shrink: 1
&.is-loading
&:after
@extend .loader
@extend %loader
position: absolute !important
right: 8px
top: 8px

4
sass/elements/notification.sass
View File

@ -1,9 +1,9 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.notification
@extend .block
@extend %block
+clearfix
background-color: $background
border-radius: $radius

117
sass/elements/other.sass
View File

@ -1,48 +1,23 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.delete
@extend .unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: rgba($black, 0.2)
border: none
border-radius: 290486px
cursor: pointer
display: inline-block
height: 24px
.container
position: relative
+desktop
margin: 0 auto
max-width: 960px
// Modifiers
&.is-fluid
margin: 0 20px
max-width: none
+widescreen
max-width: 1200px
.fa
font-size: 21px
text-align: center
vertical-align: top
width: 24px
&:before,
&:after
background-color: $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-color: 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)
@ -57,46 +32,6 @@
&.is-large
+fa(42px, 48px)
.hamburger
cursor: pointer
display: block
height: $nav-height
position: relative
width: $nav-height
span
background-color: $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-color: $background
// Modifers
&.is-active
span
background-color: $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
.heading
display: block
font-size: 11px
@ -105,7 +40,7 @@
text-transform: uppercase
.highlight
@extend .block
@extend %block
font-size: 12px
font-weight: normal
max-width: 100%
@ -115,18 +50,6 @@
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-color: $background
border-radius: 290486px
@ -178,11 +101,3 @@
.delete
margin-left: 4px
margin-right: -8px
.unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none

4
sass/elements/progress.sass
View File

@ -1,8 +1,8 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/variables.sass"
.progress
@extend .block
@extend %block
-moz-appearance: none
-webkit-appearance: none
border: none

4
sass/elements/title.sass
View File

@ -1,10 +1,10 @@
@import "../base/classes.sass"
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.title,
.subtitle
@extend .block
@extend %block
font-weight: $weight-title-normal
word-break: break-word
em,

8
sass/utilities/utilities.sass
View File

@ -1,8 +0,0 @@
@charset "utf-8"
@import "reset"
@import "functions"
@import "mixins"
@import "animations"
@import "controls"
@import "variables"