mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Change default font size
This commit is contained in:
Jeremy Thomas
parent
d2d9515dfa
commit
b93c3789b6
@ -1,6 +1,9 @@
|
||||
# Bulma Changelog
|
||||
|
||||
## 0.3.3
|
||||
## 0.4
|
||||
|
||||
* **Default font-size is 16px**
|
||||
* **New `.field` element ; `.control` repurposed**
|
||||
|
||||
* Remove monospace named fonts
|
||||
* Remove icon spacing logic
|
||||
|
||||
@ -17,6 +17,7 @@ route: blog
|
||||
<h1 class="title is-2">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<hr>
|
||||
<div class="content is-medium">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
@ -95,7 +95,7 @@ th {
|
||||
|
||||
html {
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-width: 300px;
|
||||
@ -582,11 +582,11 @@ a.box:active {
|
||||
font-size: 1rem;
|
||||
height: 2.25em;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.425em;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.325em;
|
||||
padding-top: 0.5em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
-webkit-touch-callout: none;
|
||||
@ -624,11 +624,11 @@ a.box:active {
|
||||
|
||||
.button .icon:first-child:not(:last-child) {
|
||||
margin-left: calc(-0.375em - 1px);
|
||||
margin-right: 0.375em;
|
||||
margin-right: 0.1875em;
|
||||
}
|
||||
|
||||
.button .icon:last-child:not(:first-child) {
|
||||
margin-left: 0.375em;
|
||||
margin-left: 0.1875em;
|
||||
margin-right: calc(-0.375em - 1px);
|
||||
}
|
||||
|
||||
@ -1253,7 +1253,7 @@ a.box:active {
|
||||
|
||||
.button.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.button.is-medium {
|
||||
@ -1297,8 +1297,11 @@ a.box:active {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
button.button {
|
||||
button.button,
|
||||
input[type="submit"].button {
|
||||
line-height: 1;
|
||||
padding-bottom: 0.4em;
|
||||
padding-top: 0.35em;
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -1442,7 +1445,7 @@ button.button {
|
||||
}
|
||||
|
||||
.content.is-small {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.content.is-medium {
|
||||
@ -1465,11 +1468,11 @@ button.button {
|
||||
font-size: 1rem;
|
||||
height: 2.25em;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.425em;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.325em;
|
||||
padding-top: 0.5em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
@ -1594,7 +1597,7 @@ button.button {
|
||||
.input.is-small,
|
||||
.textarea.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.input.is-medium,
|
||||
@ -1702,11 +1705,11 @@ button.button {
|
||||
font-size: 1rem;
|
||||
height: 2.25em;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.425em;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.325em;
|
||||
padding-top: 0.5em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
@ -1772,7 +1775,7 @@ button.button {
|
||||
|
||||
.select.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.select.is-medium {
|
||||
@ -1803,7 +1806,7 @@ button.button {
|
||||
|
||||
.help {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
@ -1843,7 +1846,6 @@ button.button {
|
||||
color: #ff3860;
|
||||
}
|
||||
|
||||
input[type="submit"].input,
|
||||
.select select {
|
||||
line-height: 1;
|
||||
}
|
||||
@ -1998,7 +2000,7 @@ input[type="submit"].input,
|
||||
}
|
||||
|
||||
.control.has-icon .input.is-small + .icon {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.control.has-icon .input.is-medium + .icon {
|
||||
@ -2335,7 +2337,7 @@ input[type="submit"].input,
|
||||
}
|
||||
|
||||
.progress.is-small {
|
||||
height: 0.85rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.progress.is-medium {
|
||||
@ -2422,7 +2424,7 @@ input[type="submit"].input,
|
||||
border-radius: 290486px;
|
||||
color: #4a4a4a;
|
||||
display: inline-flex;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
@ -2537,11 +2539,11 @@ input[type="submit"].input,
|
||||
}
|
||||
|
||||
.title.is-1 {
|
||||
font-size: 3.5rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.title.is-2 {
|
||||
font-size: 2.75rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.title.is-3 {
|
||||
@ -2576,11 +2578,11 @@ input[type="submit"].input,
|
||||
}
|
||||
|
||||
.subtitle.is-1 {
|
||||
font-size: 3.5rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.subtitle.is-2 {
|
||||
font-size: 2.75rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.subtitle.is-3 {
|
||||
@ -3400,9 +3402,9 @@ input[type="submit"].input,
|
||||
.nav-toggle {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 3.5rem;
|
||||
height: 3.25rem;
|
||||
position: relative;
|
||||
width: 3.5rem;
|
||||
width: 3.25rem;
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
@ -3467,6 +3469,7 @@ input[type="submit"].input,
|
||||
flex-shrink: 0;
|
||||
font-size: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
@ -3516,10 +3519,10 @@ a.nav-item.is-active {
|
||||
a.nav-item.is-tab {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
padding-bottom: calc(0.5rem - 1px);
|
||||
padding-bottom: calc(0.75rem - 1px);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: calc(0.5rem - 1px);
|
||||
padding-top: calc(0.75rem - 1px);
|
||||
}
|
||||
|
||||
.nav-item a.is-tab:hover,
|
||||
@ -3532,7 +3535,7 @@ a.nav-item.is-tab:hover {
|
||||
a.nav-item.is-tab.is-active {
|
||||
border-bottom: 3px solid #00d1b2;
|
||||
color: #00d1b2;
|
||||
padding-bottom: calc(0.5rem - 3px);
|
||||
padding-bottom: calc(0.75rem - 3px);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
@ -3607,7 +3610,7 @@ a.nav-item.is-tab.is-active {
|
||||
align-items: stretch;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
min-height: 3.5rem;
|
||||
min-height: 3.25rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
@ -3616,7 +3619,7 @@ a.nav-item.is-tab.is-active {
|
||||
.nav > .container {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
min-height: 3.5rem;
|
||||
min-height: 3.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -3646,11 +3649,11 @@ a.nav-item.is-tab.is-active {
|
||||
font-size: 1rem;
|
||||
height: 2.25em;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.425em;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.325em;
|
||||
padding-top: 0.5em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
-webkit-touch-callout: none;
|
||||
@ -3695,7 +3698,7 @@ a.nav-item.is-tab.is-active {
|
||||
.pagination-next,
|
||||
.pagination-link {
|
||||
border: 1px solid #dbdbdb;
|
||||
min-width: 2.5em;
|
||||
min-width: 2.25em;
|
||||
}
|
||||
|
||||
.pagination-previous:hover,
|
||||
@ -4070,7 +4073,7 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.tabs.is-small {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tabs.is-medium {
|
||||
@ -6134,7 +6137,7 @@ svg {
|
||||
|
||||
#carbon {
|
||||
max-width: 340px;
|
||||
min-height: 130px;
|
||||
min-height: 150px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
@ -6187,7 +6190,7 @@ svg {
|
||||
#carbonads .carbon-poweredby {
|
||||
bottom: 0;
|
||||
color: #7a7a7a;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
left: 160px;
|
||||
line-height: 20px;
|
||||
padding: 0 15px 10px 0;
|
||||
|
||||
@ -105,13 +105,15 @@ doc-subtab: media-object
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a class="button is-info">Post comment</a>
|
||||
<a class="button is-info">Submit</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
@ -210,12 +212,16 @@ doc-subtab: media-object
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">Post comment</button>
|
||||
</p>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<button class="button">Post comment</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
@ -55,7 +55,7 @@ doc-subtab: modal
|
||||
No JavaScript
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself
|
||||
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -354,16 +354,16 @@ doc-subtab: button
|
||||
{% capture button_only_icon_example %}
|
||||
<p class="field">
|
||||
<a class="button is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
@ -373,9 +373,9 @@ doc-subtab: button
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon">
|
||||
@ -383,16 +383,16 @@ doc-subtab: button
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-large">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon">
|
||||
@ -400,14 +400,14 @@ doc-subtab: button
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
|
||||
@ -6,7 +6,7 @@ $carbon-space: 15px
|
||||
|
||||
#carbon
|
||||
max-width: 340px
|
||||
min-height: 100px + ($carbon-space * 2)
|
||||
min-height: 120px + ($carbon-space * 2)
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
$nav-height: 3.5rem !default
|
||||
$nav-height: 3.25rem !default
|
||||
|
||||
// Components
|
||||
|
||||
@ -15,6 +15,7 @@ $nav-height: 3.5rem !default
|
||||
flex-shrink: 0
|
||||
font-size: $size-normal
|
||||
justify-content: center
|
||||
line-height: 1.5
|
||||
padding: 0.5rem 0.75rem
|
||||
a
|
||||
flex-grow: 1
|
||||
@ -43,17 +44,17 @@ a.nav-item
|
||||
&.is-tab
|
||||
border-bottom: 1px solid transparent
|
||||
border-top: 1px solid transparent
|
||||
padding-bottom: calc(0.5rem - 1px)
|
||||
padding-bottom: calc(0.75rem - 1px)
|
||||
padding-left: 1rem
|
||||
padding-right: 1rem
|
||||
padding-top: calc(0.5rem - 1px)
|
||||
padding-top: calc(0.75rem - 1px)
|
||||
&:hover
|
||||
border-bottom-color: $primary
|
||||
border-top-color: transparent
|
||||
&.is-active
|
||||
border-bottom: 3px solid $primary
|
||||
color: $primary
|
||||
padding-bottom: calc(0.5rem - 3px)
|
||||
padding-bottom: calc(0.75rem - 3px)
|
||||
// Responsiveness
|
||||
+desktop
|
||||
&.is-brand
|
||||
|
||||
@ -46,7 +46,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
||||
.pagination-next,
|
||||
.pagination-link
|
||||
border: 1px solid $pagination-border
|
||||
min-width: 2.5em
|
||||
min-width: 2.25em
|
||||
&:hover
|
||||
border-color: $pagination-hover-border
|
||||
color: $pagination-hover
|
||||
|
||||
@ -45,9 +45,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
||||
width: 1.5em
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: calc(-0.375em - 1px)
|
||||
margin-right: 0.375em
|
||||
margin-right: 0.1875em
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.375em
|
||||
margin-left: 0.1875em
|
||||
margin-right: calc(-0.375em - 1px)
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-0.375em - 1px)
|
||||
@ -154,5 +154,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
||||
+center(1em)
|
||||
position: absolute !important
|
||||
|
||||
button.button
|
||||
// Adjustment for vertical spacing
|
||||
button.button,
|
||||
input[type="submit"].button
|
||||
line-height: 1
|
||||
padding-bottom: 0.4em
|
||||
padding-top: 0.35em
|
||||
|
||||
@ -158,7 +158,6 @@ $input-radius: $radius !default
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
|
||||
input[type="submit"].input,
|
||||
.select select
|
||||
line-height: 1
|
||||
|
||||
|
||||
@ -12,11 +12,11 @@ $control-radius-small: $radius-small !default
|
||||
font-size: $size-normal
|
||||
height: 2.25em
|
||||
justify-content: flex-start
|
||||
line-height: 1.5
|
||||
padding-bottom: 0.425em
|
||||
line-height: 1.25
|
||||
padding-bottom: 0.5em
|
||||
padding-left: 0.625em
|
||||
padding-right: 0.625em
|
||||
padding-top: 0.325em
|
||||
padding-top: 0.5em
|
||||
position: relative
|
||||
vertical-align: top
|
||||
// States
|
||||
|
||||
@ -167,10 +167,13 @@
|
||||
// Responsiveness
|
||||
|
||||
$tablet: 769px !default
|
||||
|
||||
// 960px container + 40px
|
||||
$desktop: 1000px !default
|
||||
|
||||
// 1152px container + 40
|
||||
$widescreen: 1192px !default
|
||||
|
||||
// 960 and 1152 have been chosen because
|
||||
// they are divisible by both 12 and 16
|
||||
|
||||
|
||||
@ -29,13 +29,13 @@ $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-monospace: monospace !default
|
||||
|
||||
$size-1: 3.5rem !default
|
||||
$size-2: 2.75rem !default
|
||||
$size-1: 3rem !default
|
||||
$size-2: 2.5rem !default
|
||||
$size-3: 2rem !default
|
||||
$size-4: 1.5rem !default
|
||||
$size-5: 1.25rem !default
|
||||
$size-6: 1rem !default
|
||||
$size-7: 0.85rem !default
|
||||
$size-7: 0.75rem !default
|
||||
|
||||
$weight-light: 300 !default
|
||||
$weight-normal: 400 !default
|
||||
@ -44,7 +44,7 @@ $weight-bold: 700 !default
|
||||
|
||||
// Body
|
||||
$body-background: $white !default
|
||||
$body-size: 14px !default
|
||||
$body-size: 16px !default
|
||||
|
||||
// Miscellaneous
|
||||
$easing: ease-out !default
|
||||
|
||||
Loading…
Reference in New Issue
Block a user