library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use em for controls

Browse Source
This commit is contained in:
Jeremy Thomas 2016-10-29 18:53:30 +01:00
parent 6012880751
commit a2afb61ffe
16 changed files with 542 additions and 1476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/carbon.html
View File

@ -1,3 +1,4 @@
<div id="carbon" class="box"> <!-- <div id="carbon" class="box">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js"></script> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js"></script>
</div> </div>
-->

2
docs/_includes/head.html
View File

@ -6,7 +6,7 @@
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title> <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css"> <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}"> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

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

File diff suppressed because it is too large Load Diff

4
docs/documentation/overview/variables.html
View File

@ -458,10 +458,6 @@ doc-subtab: variables
<td><code>$size-large</code></td> <td><code>$size-large</code></td>
<td>$size-3</td> <td>$size-3</td>
</tr> </tr>
<tr>
<td><code>$size-huge</code></td>
<td>$size-1</td>
</tr>
<tr><th colspan="2">4. Lists and maps</th></tr> <tr><th colspan="2">4. Lists and maps</th></tr>
<tr> <tr>

13
sass/base/generic.sass
View File

@ -31,13 +31,12 @@ pre
-moz-osx-font-smoothing: auto -moz-osx-font-smoothing: auto
-webkit-font-smoothing: auto -webkit-font-smoothing: auto
font-family: $family-code font-family: $family-code
line-height: 1.25
body body
color: $text color: $text
font-size: 1rem font-size: 1rem
font-weight: $weight-normal font-weight: $weight-normal
line-height: 1.428571428571429 line-height: 1.5
// Inline // Inline
@ -52,16 +51,16 @@ a
code code
background-color: $code-background background-color: $code-background
color: $code color: $code
font-size: 12px font-size: 0.75em
font-weight: normal font-weight: normal
padding: 1px 2px 2px padding: 0.25em 0.5em 0.25em
hr hr
background-color: $border background-color: $border
border: none border: none
display: block display: block
height: 1px height: 1px
margin: 20px 0 margin: 1.5rem 0
img img
max-width: 100% max-width: 100%
@ -86,14 +85,16 @@ strong
pre pre
background-color: $pre-background background-color: $pre-background
color: $pre color: $pre
font-size: 0.8em
white-space: pre white-space: pre
word-wrap: normal word-wrap: normal
code code
background-color: $pre-background background-color: $pre-background
color: $pre color: $pre
display: block display: block
font-size: 1em
overflow-x: auto overflow-x: auto
padding: 16px 20px padding: 1.25rem 1.5rem
table table
width: 100% width: 100%

24
sass/components/media.sass
View File

@ -11,17 +11,17 @@
font-size: $size-medium font-size: $size-medium
height: 32px height: 32px
line-height: 24px line-height: 24px
margin-right: 10px margin-right: 1rem
min-width: 32px min-width: 32px
padding: 4px 8px padding: 4px 8px
text-align: center text-align: center
vertical-align: top vertical-align: top
.media-left .media-left
margin-right: 10px margin-right: 1rem
.media-right .media-right
margin-left: 10px margin-left: 1rem
.media-content .media-content
flex-grow: 1 flex-grow: 1
@ -33,29 +33,29 @@
display: flex display: flex
text-align: left text-align: left
.content:not(:last-child) .content:not(:last-child)
margin-bottom: 10px margin-bottom: 1rem
.media .media
border-top: 1px solid rgba($border, 0.5) border-top: 1px solid rgba($border, 0.5)
display: flex display: flex
padding-top: 10px padding-top: 10px
.content:not(:last-child), .content:not(:last-child),
.control:not(:last-child) .control:not(:last-child)
margin-bottom: 5px margin-bottom: 0.5rem
.media .media
padding-top: 5px padding-top: 0.5rem
& + .media & + .media
margin-top: 5px margin-top: 0.5rem
& + .media & + .media
border-top: 1px solid rgba($border, 0.5) border-top: 1px solid rgba($border, 0.5)
margin-top: 10px margin-top: 1rem
padding-top: 10px padding-top: 1rem
// Sizes // Sizes
&.is-large &.is-large
& + .media & + .media
margin-top: 20px margin-top: 1.4rem
padding-top: 20px padding-top: 1.4rem
// Responsiveness // Responsiveness
+tablet +tablet
&.is-large &.is-large
.media-number .media-number
margin-right: 20px margin-right: 1.4rem

4
sass/components/message.sass
View File

@ -1,7 +1,7 @@
.message-body .message-body
border: 1px solid $border border: 1px solid $border
border-radius: $radius border-radius: $radius
padding: 12px 15px padding: 0.8rem 1rem
strong strong
color: inherit color: inherit
@ -9,7 +9,7 @@
background-color: $text background-color: $text
border-radius: $radius $radius 0 0 border-radius: $radius $radius 0 0
color: $text-invert color: $text-invert
padding: 7px 10px padding: 0.4rem 0.8rem
strong strong
color: inherit color: inherit
& + .message-body & + .message-body

2
sass/elements/box.sass
View File

@ -4,7 +4,7 @@
border-radius: $radius-large border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
display: block display: block
padding: 20px padding: 1.25rem
a.box a.box
&:hover, &:hover,

25
sass/elements/button.sass
View File

@ -1,37 +1,22 @@
=button-small =button-small
border-radius: $radius-small border-radius: $radius-small
font-size: 11px font-size: $size-small
height: 24px
line-height: 16px
padding-left: 6px
padding-right: 6px
=button-medium =button-medium
font-size: 18px font-size: $size-medium
height: 40px
padding-left: 14px
padding-right: 14px
=button-large =button-large
font-size: 22px font-size: $size-large
height: 48px
padding-left: 20px
padding-right: 20px
.button .button
+control +control
+unselectable +unselectable
cursor: pointer cursor: pointer
justify-content: center justify-content: center
padding-left: 10px padding-left: 1em
padding-right: 10px padding-right: 1em
text-align: center text-align: center
white-space: nowrap white-space: nowrap
strong strong
color: inherit color: inherit
small
display: block
font-size: $size-small
line-height: 1
margin-top: 5px
.icon, .icon,
.tag .tag
&:first-child &:first-child

54
sass/elements/content.sass
View File

@ -24,30 +24,36 @@
h5, h5,
h6 h6
color: $text-strong color: $text-strong
font-weight: 300 font-weight: $weight-title-normal
line-height: 1.125 line-height: 1.125
margin-bottom: 20px h1
h1, font-size: 2em
h2, margin-bottom: 0.5em
h3
&:not(:first-child) &:not(:first-child)
margin-top: 40px margin-top: 1em
h2
font-size: 1.75em
margin-bottom: 0.5714em
&:not(:first-child)
margin-top: 1.1428em
h3
font-size: 1.5em
margin-bottom: 0.6666em
&:not(:first-child)
margin-top: 1.3333em
h4
font-size: 1.25em
margin-bottom: 0.8em
h5
font-size: 1.125em
margin-bottom: 0.8888em
h6
font-size: 1em
margin-bottom: 1em
blockquote blockquote
background-color: $background background-color: $background
border-left: 5px solid $border border-left: 5px solid $border
padding: 1.5em padding: 1.25em 1.5em
h1
font-size: 2em
h2
font-size: 1.75em
h3
font-size: 1.5em
h4
font-size: 1.25em
h5
font-size: 1.125em
h6
font-size: 1em
ol ol
list-style: decimal outside list-style: decimal outside
margin-left: 2em margin-left: 2em
@ -64,11 +70,9 @@
ul ul
list-style-type: square list-style-type: square
// Sizes // Sizes
&.is-small
font-size: $size-small
&.is-medium &.is-medium
font-size: $size-5 font-size: $size-medium
code
font-size: $size-6
&.is-large &.is-large
font-size: $size-4 font-size: $size-large
code
font-size: $size-5

33
sass/elements/form.sass
View File

@ -42,7 +42,7 @@
.radio .radio
cursor: pointer cursor: pointer
display: inline-block display: inline-block
line-height: 16px line-height: 1em
position: relative position: relative
vertical-align: top vertical-align: top
input input
@ -57,11 +57,11 @@
.radio .radio
& + .radio & + .radio
margin-left: 10px margin-left: 0.5em
.select .select
display: inline-block display: inline-block
height: 32px height: 2.5em
position: relative position: relative
vertical-align: top vertical-align: top
select select
@ -69,7 +69,7 @@
cursor: pointer cursor: pointer
display: block display: block
outline: none outline: none
padding-right: 36px padding-right: 2.5em
&:hover &:hover
border-color: $control-hover-border border-color: $control-hover-border
&::ms-expand &::ms-expand
@ -80,34 +80,19 @@
width: 100% width: 100%
&:after &:after
+arrow($control-active) +arrow($control-active)
margin-top: -6px margin-top: -4px
right: 16px right: 16px
top: 50% top: 50%
&:hover &:hover
&:after &:after
border-color: $control-hover border-color: $control-hover
&.is-small
height: 24px
select
+control-small
padding-right: 28px
&.is-medium
height: 40px
select
+control-medium
padding-right: 44px
&.is-large
height: 48px
select
+control-large
padding-right: 52px
.label .label
color: $control color: $control
display: block display: block
font-weight: bold font-weight: bold
&:not(:last-child) &:not(:last-child)
margin-bottom: 5px margin-bottom: 0.5em
.help .help
display: block display: block
@ -122,13 +107,13 @@
.control-label .control-label
+mobile +mobile
margin-bottom: 5px margin-bottom: 0.5em
+tablet +tablet
flex-basis: 0 flex-basis: 0
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0
margin-right: 20px margin-right: 1.5em
padding-top: 7px padding-top: 0.5em
text-align: right text-align: right
.control .control

3
sass/elements/other.sass
View File

@ -43,8 +43,7 @@
.highlight .highlight
+block +block
font-size: 12px font-weight: $weight-normal
font-weight: normal
max-width: 100% max-width: 100%
overflow: hidden overflow: hidden
padding: 0 padding: 0

35
sass/elements/title.sass
View File

@ -17,56 +17,39 @@
.title .title
color: $text-strong color: $text-strong
font-size: $size-large font-size: $size-large
line-height: 1 line-height: 1.125
code
display: inline-block
font-size: $size-large
strong strong
color: inherit color: inherit
& + .highlight & + .highlight
margin-top: -10px margin-top: -0.75rem
& + .subtitle & + .subtitle
margin-top: -10px margin-top: -1.25rem
// Colors // Colors
@each $size in $sizes @each $size in $sizes
$i: index($sizes, $size) $i: index($sizes, $size)
&.is-#{$i} &.is-#{$i}
font-size: $size font-size: $size
code
font-size: nth($sizes, min($i + 1, 6))
// Modifiers // Modifiers
&.is-normal &.is-normal
font-weight: 400 font-weight: $weight-normal
strong strong
font-weight: 700 font-weight: $weight-bold
// Responsiveness
+tablet
& + .subtitle
margin-top: -15px
.subtitle .subtitle
color: $text color: $text
font-size: $size-medium font-size: $size-medium
line-height: 1.125 line-height: 1.25
code
border-radius: $radius
display: inline-block
font-size: $size-normal
padding: 2px 3px
vertical-align: top
strong strong
color: $text-strong color: $text-strong
& + .title & + .title
margin-top: -20px margin-top: -1.4rem
// Colors // Colors
@each $size in $sizes @each $size in $sizes
$i: index($sizes, $size) $i: index($sizes, $size)
&.is-#{$i} &.is-#{$i}
font-size: $size font-size: $size
code
font-size: nth($sizes, min($i + 1, 6))
// Modifiers // Modifiers
&.is-normal &.is-normal
font-weight: 400 font-weight: $weight-normal
strong strong
font-weight: 700 font-weight: $weight-bold

27
sass/utilities/controls.sass
View File

@ -28,14 +28,15 @@ $control-icon-active: $grey-light !default
background-color: $control-background background-color: $control-background
border: 1px solid $control-border border: 1px solid $control-border
border-radius: $control-radius border-radius: $control-radius
box-shadow: none
color: $control color: $control
display: inline-flex display: inline-flex
font-size: $control-size font-size: $control-size
height: 32px height: 2.5em
justify-content: flex-start justify-content: flex-start
line-height: 24px line-height: 1.5
padding-left: 8px padding-left: 0.75em
padding-right: 8px padding-right: 0.75em
position: relative position: relative
vertical-align: top vertical-align: top
&:hover &:hover
@ -56,20 +57,8 @@ $control-icon-active: $grey-light !default
=control-small =control-small
border-radius: $control-radius-small border-radius: $control-radius-small
font-size: 11px font-size: $size-small
height: 24px
line-height: 16px
padding-left: 6px
padding-right: 6px
=control-medium =control-medium
font-size: 18px font-size: $size-medium
height: 40px
line-height: 32px
padding-left: 10px
padding-right: 10px
=control-large =control-large
font-size: 24px font-size: $size-large
height: 48px
line-height: 40px
padding-left: 12px
padding-right: 12px

2
sass/utilities/mixins.sass
View File

@ -12,7 +12,7 @@
=block =block
&:not(:last-child) &:not(:last-child)
margin-bottom: 20px margin-bottom: 1.5rem
=clearfix =clearfix
&:after &:after

19
sass/utilities/variables.sass
View File

@ -29,14 +29,14 @@ $red: hsl(348, 100%, 61%) !default
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
$size-1: 48px !default $size-1: 3.5rem !default
$size-2: 40px !default $size-2: 2.5rem !default
$size-3: 28px !default $size-3: 1.75rem !default
$size-4: 24px !default $size-4: 1.5rem !default
$size-5: 18px !default $size-5: 1.25rem !default
$size-6: 14px !default $size-6: 16px !default
$size-7: 11px !default $size-7: 0.875rem !default
$weight-normal: 400 !default $weight-normal: 400 !default
$weight-bold: 700 !default $weight-bold: 700 !default
@ -70,12 +70,10 @@ $dark: $grey-darker !default
// Invert colors // Invert colors
$primary-invert: findColorInvert($primary) !default $primary-invert: findColorInvert($primary) !default
$info-invert: findColorInvert($info) !default $info-invert: findColorInvert($info) !default
$success-invert: findColorInvert($success) !default $success-invert: findColorInvert($success) !default
$warning-invert: findColorInvert($warning) !default $warning-invert: findColorInvert($warning) !default
$danger-invert: findColorInvert($danger) !default $danger-invert: findColorInvert($danger) !default
$light-invert: $dark !default $light-invert: $dark !default
$dark-invert: $light !default $dark-invert: $light !default
@ -119,8 +117,7 @@ $family-code: $family-monospace !default
$size-small: $size-7 !default $size-small: $size-7 !default
$size-normal: $size-6 !default $size-normal: $size-6 !default
$size-medium: $size-5 !default $size-medium: $size-5 !default
$size-large: $size-3 !default $size-large: $size-4 !default
$size-huge: $size-1 !default
//////////////////////////////////////////////// ////////////////////////////////////////////////
//////////////////////////////////////////////// ////////////////////////////////////////////////