library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix button spacing, Add image placeholders

Browse Source
This commit is contained in:
Jeremy Thomas 2016-12-22 18:17:26 +00:00
parent b8b3733d99
commit 41db07d68d
40 changed files with 1989 additions and 2178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3647
css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

51
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

3
docs/bulma-docs.sass
View File

@ -188,11 +188,10 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
#npm #npm
animation: fadeIn 500ms both animation: fadeIn 500ms both
animation-delay: 1.4s animation-delay: 1.4s
background: none
margin: -10px 0 20px margin: -10px 0 20px
code code
border-radius: $radius border-radius: $radius
color: $link color: $primary
display: inline-block display: inline-block
font-size: 16px font-size: 16px
padding: 16px 32px padding: 16px 32px

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

@ -95,7 +95,7 @@ th {
html { html {
background-color: whitesmoke; background-color: whitesmoke;
font-size: 16px; font-size: 14px;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-width: 300px; min-width: 300px;
@ -150,7 +150,7 @@ a:hover {
code { code {
background-color: whitesmoke; background-color: whitesmoke;
color: #ff3860; color: #ff3860;
font-size: 0.75em; font-size: 0.8em;
font-weight: normal; font-weight: normal;
padding: 0.25em 0.5em 0.25em; padding: 0.25em 0.5em 0.25em;
} }
@ -189,7 +189,7 @@ strong {
pre { pre {
background-color: whitesmoke; background-color: whitesmoke;
color: #4a4a4a; color: #4a4a4a;
font-size: 0.75em; font-size: 0.8em;
white-space: pre; white-space: pre;
word-wrap: normal; word-wrap: normal;
} }
@ -597,8 +597,8 @@ a.box:active {
color: #363636; color: #363636;
cursor: pointer; cursor: pointer;
justify-content: center; justify-content: center;
padding-left: 1em; padding-left: 0.75em;
padding-right: 1em; padding-right: 0.75em;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
} }
@ -626,53 +626,47 @@ a.box:active {
} }
.button .icon:first-child:last-child { .button .icon:first-child:last-child {
margin-left: calc(-1px - 0.5rem); margin-left: calc(-1px + -0.25rem);
margin-right: calc(-1px - 0.5rem); margin-right: calc(-1px + -0.25rem);
} }
.button .icon.is-small:first-child:not(:last-child) { .button .icon.is-small:first-child:not(:last-child) {
margin-left: -0.125rem; margin-left: 0rem;
margin-right: 0.25rem;
} }
.button .icon.is-small:last-child:not(:first-child) { .button .icon.is-small:last-child:not(:first-child) {
margin-left: 0.25rem; margin-right: 0rem;
margin-right: -0.125rem;
} }
.button .icon.is-small:first-child:last-child { .button .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.25rem); margin-left: calc(-1px + 0rem);
margin-right: calc(-1px - 0.25rem); margin-right: calc(-1px + 0rem);
} }
.button .icon.is-medium:first-child:not(:last-child) { .button .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.375rem; margin-left: -0.5rem;
margin-right: 0.75rem;
} }
.button .icon.is-medium:last-child:not(:first-child) { .button .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.75rem; margin-right: -0.5rem;
margin-right: -0.375rem;
} }
.button .icon.is-medium:first-child:last-child { .button .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.75rem); margin-left: calc(-1px + -0.5rem);
margin-right: calc(-1px - 0.75rem); margin-right: calc(-1px + -0.5rem);
} }
.button .icon.is-large:first-child:not(:last-child) { .button .icon.is-large:first-child:not(:last-child) {
margin-left: -0.625rem; margin-left: -1rem;
margin-right: 1.25rem;
} }
.button .icon.is-large:last-child:not(:first-child) { .button .icon.is-large:last-child:not(:first-child) {
margin-left: 1.25rem; margin-right: -1rem;
margin-right: -0.625rem;
} }
.button .icon.is-large:first-child:last-child { .button .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.25rem); margin-left: calc(-1px + -1rem);
margin-right: calc(-1px - 1.25rem); margin-right: calc(-1px + -1rem);
} }
.button:hover, .button.is-hovered { .button:hover, .button.is-hovered {
@ -1259,63 +1253,57 @@ a.box:active {
} }
.button.is-small .icon:first-child:not(:last-child) { .button.is-small .icon:first-child:not(:last-child) {
margin-left: -0.28125rem; margin-left: -0.375rem;
margin-right: 0.5625rem; margin-right: 0.375rem;
} }
.button.is-small .icon:last-child:not(:first-child) { .button.is-small .icon:last-child:not(:first-child) {
margin-left: 0.5625rem; margin-left: 0.375rem;
margin-right: -0.28125rem; margin-right: -0.375rem;
} }
.button.is-small .icon:first-child:last-child { .button.is-small .icon:first-child:last-child {
margin-left: calc(-1px - 0.5625rem); margin-left: calc(-1px + -0.375rem);
margin-right: calc(-1px - 0.5625rem); margin-right: calc(-1px + -0.375rem);
} }
.button.is-small .icon.is-small:first-child:not(:last-child) { .button.is-small .icon.is-small:first-child:not(:last-child) {
margin-left: -0.15625rem; margin-left: -0.125rem;
margin-right: 0.3125rem;
} }
.button.is-small .icon.is-small:last-child:not(:first-child) { .button.is-small .icon.is-small:last-child:not(:first-child) {
margin-left: 0.3125rem; margin-right: -0.125rem;
margin-right: -0.15625rem;
} }
.button.is-small .icon.is-small:first-child:last-child { .button.is-small .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.3125rem); margin-left: calc(-1px + -0.125rem);
margin-right: calc(-1px - 0.3125rem); margin-right: calc(-1px + -0.125rem);
} }
.button.is-small .icon.is-medium:first-child:not(:last-child) { .button.is-small .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.40625rem; margin-left: -0.625rem;
margin-right: 0.8125rem;
} }
.button.is-small .icon.is-medium:last-child:not(:first-child) { .button.is-small .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.8125rem; margin-right: -0.625rem;
margin-right: -0.40625rem;
} }
.button.is-small .icon.is-medium:first-child:last-child { .button.is-small .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.8125rem); margin-left: calc(-1px + -0.625rem);
margin-right: calc(-1px - 0.8125rem); margin-right: calc(-1px + -0.625rem);
} }
.button.is-small .icon.is-large:first-child:not(:last-child) { .button.is-small .icon.is-large:first-child:not(:last-child) {
margin-left: -0.65625rem; margin-left: -1.125rem;
margin-right: 1.3125rem;
} }
.button.is-small .icon.is-large:last-child:not(:first-child) { .button.is-small .icon.is-large:last-child:not(:first-child) {
margin-left: 1.3125rem; margin-right: -1.125rem;
margin-right: -0.65625rem;
} }
.button.is-small .icon.is-large:first-child:last-child { .button.is-small .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.3125rem); margin-left: calc(-1px + -1.125rem);
margin-right: calc(-1px - 1.3125rem); margin-right: calc(-1px + -1.125rem);
} }
.button.is-medium { .button.is-medium {
@ -1323,63 +1311,57 @@ a.box:active {
} }
.button.is-medium .icon:first-child:not(:last-child) { .button.is-medium .icon:first-child:not(:last-child) {
margin-left: -0.21875rem; margin-left: -0.125rem;
margin-right: 0.4375rem; margin-right: 0.625rem;
} }
.button.is-medium .icon:last-child:not(:first-child) { .button.is-medium .icon:last-child:not(:first-child) {
margin-left: 0.4375rem; margin-left: 0.625rem;
margin-right: -0.21875rem; margin-right: -0.125rem;
} }
.button.is-medium .icon:first-child:last-child { .button.is-medium .icon:first-child:last-child {
margin-left: calc(-1px - 0.4375rem); margin-left: calc(-1px + -0.125rem);
margin-right: calc(-1px - 0.4375rem); margin-right: calc(-1px + -0.125rem);
} }
.button.is-medium .icon.is-small:first-child:not(:last-child) { .button.is-medium .icon.is-small:first-child:not(:last-child) {
margin-left: -0.09375rem; margin-left: 0.125rem;
margin-right: 0.1875rem;
} }
.button.is-medium .icon.is-small:last-child:not(:first-child) { .button.is-medium .icon.is-small:last-child:not(:first-child) {
margin-left: 0.1875rem; margin-right: 0.125rem;
margin-right: -0.09375rem;
} }
.button.is-medium .icon.is-small:first-child:last-child { .button.is-medium .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.1875rem); margin-left: calc(-1px + 0.125rem);
margin-right: calc(-1px - 0.1875rem); margin-right: calc(-1px + 0.125rem);
} }
.button.is-medium .icon.is-medium:first-child:not(:last-child) { .button.is-medium .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.34375rem; margin-left: -0.375rem;
margin-right: 0.6875rem;
} }
.button.is-medium .icon.is-medium:last-child:not(:first-child) { .button.is-medium .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.6875rem; margin-right: -0.375rem;
margin-right: -0.34375rem;
} }
.button.is-medium .icon.is-medium:first-child:last-child { .button.is-medium .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.6875rem); margin-left: calc(-1px + -0.375rem);
margin-right: calc(-1px - 0.6875rem); margin-right: calc(-1px + -0.375rem);
} }
.button.is-medium .icon.is-large:first-child:not(:last-child) { .button.is-medium .icon.is-large:first-child:not(:last-child) {
margin-left: -0.59375rem; margin-left: -0.875rem;
margin-right: 1.1875rem;
} }
.button.is-medium .icon.is-large:last-child:not(:first-child) { .button.is-medium .icon.is-large:last-child:not(:first-child) {
margin-left: 1.1875rem; margin-right: -0.875rem;
margin-right: -0.59375rem;
} }
.button.is-medium .icon.is-large:first-child:last-child { .button.is-medium .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.1875rem); margin-left: calc(-1px + -0.875rem);
margin-right: calc(-1px - 1.1875rem); margin-right: calc(-1px + -0.875rem);
} }
.button.is-large { .button.is-large {
@ -1387,63 +1369,57 @@ a.box:active {
} }
.button.is-large .icon:first-child:not(:last-child) { .button.is-large .icon:first-child:not(:last-child) {
margin-left: -0.1875rem; margin-left: 0rem;
margin-right: 0.375rem; margin-right: 0.75rem;
} }
.button.is-large .icon:last-child:not(:first-child) { .button.is-large .icon:last-child:not(:first-child) {
margin-left: 0.375rem; margin-left: 0.75rem;
margin-right: -0.1875rem; margin-right: 0rem;
} }
.button.is-large .icon:first-child:last-child { .button.is-large .icon:first-child:last-child {
margin-left: calc(-1px - 0.375rem); margin-left: calc(-1px + 0rem);
margin-right: calc(-1px - 0.375rem); margin-right: calc(-1px + 0rem);
} }
.button.is-large .icon.is-small:first-child:not(:last-child) { .button.is-large .icon.is-small:first-child:not(:last-child) {
margin-left: -0.0625rem; margin-left: 0.25rem;
margin-right: 0.125rem;
} }
.button.is-large .icon.is-small:last-child:not(:first-child) { .button.is-large .icon.is-small:last-child:not(:first-child) {
margin-left: 0.125rem; margin-right: 0.25rem;
margin-right: -0.0625rem;
} }
.button.is-large .icon.is-small:first-child:last-child { .button.is-large .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.125rem); margin-left: calc(-1px + 0.25rem);
margin-right: calc(-1px - 0.125rem); margin-right: calc(-1px + 0.25rem);
} }
.button.is-large .icon.is-medium:first-child:not(:last-child) { .button.is-large .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.3125rem; margin-left: -0.25rem;
margin-right: 0.625rem;
} }
.button.is-large .icon.is-medium:last-child:not(:first-child) { .button.is-large .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.625rem; margin-right: -0.25rem;
margin-right: -0.3125rem;
} }
.button.is-large .icon.is-medium:first-child:last-child { .button.is-large .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.625rem); margin-left: calc(-1px + -0.25rem);
margin-right: calc(-1px - 0.625rem); margin-right: calc(-1px + -0.25rem);
} }
.button.is-large .icon.is-large:first-child:not(:last-child) { .button.is-large .icon.is-large:first-child:not(:last-child) {
margin-left: -0.5625rem; margin-left: -0.75rem;
margin-right: 1.125rem;
} }
.button.is-large .icon.is-large:last-child:not(:first-child) { .button.is-large .icon.is-large:last-child:not(:first-child) {
margin-left: 1.125rem; margin-right: -0.75rem;
margin-right: -0.5625rem;
} }
.button.is-large .icon.is-large:first-child:last-child { .button.is-large .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.125rem); margin-left: calc(-1px + -0.75rem);
margin-right: calc(-1px - 1.125rem); margin-right: calc(-1px + -0.75rem);
} }
.button[disabled], .button.is-disabled { .button[disabled], .button.is-disabled {
@ -1487,18 +1463,10 @@ a.box:active {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.content a:not(.button) {
border-bottom: 1px solid #dbdbdb;
}
.content a:not(.button):visited { .content a:not(.button):visited {
color: #b86bff; color: #b86bff;
} }
.content a:not(.button):hover {
border-bottom-color: #00d1b2;
}
.content li + li { .content li + li {
margin-top: 0.25em; margin-top: 0.25em;
} }
@ -2261,6 +2229,7 @@ a.box:active {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
width: 1.5rem; width: 1.5rem;
background: coral;
} }
.icon .fa { .icon .fa {
@ -2779,7 +2748,7 @@ a.box:active {
} }
.title.is-6 { .title.is-6 {
font-size: 16px; font-size: 14px;
} }
.subtitle { .subtitle {
@ -2818,7 +2787,7 @@ a.box:active {
} }
.subtitle.is-6 { .subtitle.is-6 {
font-size: 16px; font-size: 14px;
} }
.block:not(:last-child) { .block:not(:last-child) {
@ -3450,7 +3419,7 @@ a.box:active {
.menu-label { .menu-label {
color: #7a7a7a; color: #7a7a7a;
font-size: 0.75em; font-size: 0.8em;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }
@ -3813,9 +3782,9 @@ a.box:active {
.nav-toggle { .nav-toggle {
cursor: pointer; cursor: pointer;
display: block; display: block;
height: 3rem; height: 3.5rem;
position: relative; position: relative;
width: 3rem; width: 3.5rem;
} }
.nav-toggle span { .nav-toggle span {
@ -3889,7 +3858,7 @@ a.box:active {
} }
.nav-item img { .nav-item img {
max-height: 1.5rem; max-height: 1.75rem;
} }
.nav-item .button + .button { .nav-item .button + .button {
@ -4013,7 +3982,7 @@ a.nav-item.is-tab.is-active {
align-items: stretch; align-items: stretch;
background-color: white; background-color: white;
display: flex; display: flex;
min-height: 3rem; min-height: 3.5rem;
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 2; z-index: 2;
@ -4022,7 +3991,7 @@ a.nav-item.is-tab.is-active {
.nav > .container { .nav > .container {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
min-height: 3rem; min-height: 3.5rem;
width: 100%; width: 100%;
} }
@ -5273,7 +5242,7 @@ label.panel-block:hover {
.tile { .tile {
align-items: stretch; align-items: stretch;
display: block; display: block;
flex-basis: auto; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
min-height: min-content; min-height: min-content;
@ -6568,7 +6537,6 @@ svg {
#npm { #npm {
animation: fadeIn 500ms both; animation: fadeIn 500ms both;
animation-delay: 1.4s; animation-delay: 1.4s;
background: none;
margin: -10px 0 20px; margin: -10px 0 20px;
} }

4
docs/documentation/components/card.html
View File

@ -17,14 +17,14 @@ doc-subtab: card
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/300x225" alt=""> <img src="{{site.url}}/images/placeholders/300x225.png" alt="">
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32"> <figure class="image is-32x32">
<img src="http://placehold.it/64x64" alt="Image"> <img src="{{site.url}}/images/placeholders/64x64.png" alt="Image">
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">

14
docs/documentation/components/media-object.html
View File

@ -21,7 +21,7 @@ doc-subtab: media-object
<article class="media"> <article class="media">
<figure class="media-left structure-item" title="media-left"> <figure class="media-left structure-item" title="media-left">
<p class="image is-64x64"> <p class="image is-64x64">
<img src="http://placehold.it/128x128"> <img src="{{site.url}}/images/placeholders/128x128.png">
</p> </p>
</figure> </figure>
<div class="media-content structure-item is-structure-right" title="media-content"> <div class="media-content structure-item is-structure-right" title="media-content">
@ -56,7 +56,7 @@ doc-subtab: media-object
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
<p class="image is-64x64"> <p class="image is-64x64">
<img src="http://placehold.it/128x128"> <img src="{{site.url}}/images/placeholders/128x128.png">
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -101,7 +101,7 @@ doc-subtab: media-object
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
<p class="image is-64x64"> <p class="image is-64x64">
<img src="http://placehold.it/128x128"> <img src="{{site.url}}/images/placeholders/128x128.png">
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -142,7 +142,7 @@ doc-subtab: media-object
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
<p class="image is-64x64"> <p class="image is-64x64">
<img src="http://placehold.it/128x128"> <img src="{{site.url}}/images/placeholders/128x128.png">
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -159,7 +159,7 @@ doc-subtab: media-object
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
<p class="image is-48x48"> <p class="image is-48x48">
<img src="http://placehold.it/96x96"> <img src="{{site.url}}/images/placeholders/96x96.png">
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -186,7 +186,7 @@ doc-subtab: media-object
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
<p class="image is-48x48"> <p class="image is-48x48">
<img src="http://placehold.it/96x96"> <img src="{{site.url}}/images/placeholders/96x96.png">
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -206,7 +206,7 @@ doc-subtab: media-object
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
<p class="image is-64x64"> <p class="image is-64x64">
<img src="http://placehold.it/128x128"> <img src="{{site.url}}/images/placeholders/128x128.png">
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">

6
docs/documentation/components/modal.html
View File

@ -75,7 +75,7 @@ doc-subtab: modal
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
<p class="image is-4by3"> <p class="image is-4by3">
<img src="http://placehold.it/1280x960"> <img src="{{site.url}}/images/placeholders/1280x960.png">
</p> </p>
</div> </div>
<button class="modal-close"></button> <button class="modal-close"></button>
@ -122,7 +122,7 @@ doc-subtab: modal
<article class="media"> <article class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-64x64"> <figure class="image is-64x64">
<img src="http://placehold.it/128x128" alt="Image"> <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">
@ -157,7 +157,7 @@ doc-subtab: modal
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
<p class="image is-4by3"> <p class="image is-4by3">
<img src="http://placehold.it/1280x960"> <img src="{{site.url}}/images/placeholders/1280x960.png">
</p> </p>
</div> </div>
<button class="modal-close"></button> <button class="modal-close"></button>

4
docs/documentation/elements/box.html
View File

@ -31,7 +31,7 @@ doc-subtab: box
<article class="media"> <article class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-64x64"> <figure class="image is-64x64">
<img src="http://placehold.it/128x128" alt="Image"> <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">
@ -66,7 +66,7 @@ doc-subtab: box
<article class="media"> <article class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-64x64"> <figure class="image is-64x64">
<img src="http://placehold.it/128x128" alt="Image"> <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">

8
docs/documentation/elements/form.html
View File

@ -38,7 +38,7 @@ doc-subtab: form
<label class="label">Username</label> <label class="label">Username</label>
<p class="control has-icon has-icon-right"> <p class="control has-icon has-icon-right">
<input class="input is-success" type="text" placeholder="Text input" value="bulma"> <input class="input is-success" type="text" placeholder="Text input" value="bulma">
<span class="icon"> <span class="icon is-small">
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</span> </span>
<span class="help is-success">This username is available</span> <span class="help is-success">This username is available</span>
@ -46,7 +46,7 @@ doc-subtab: form
<label class="label">Email</label> <label class="label">Email</label>
<p class="control has-icon has-icon-right"> <p class="control has-icon has-icon-right">
<input class="input is-danger" type="text" placeholder="Email input" value="hello@"> <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
<span class="icon"> <span class="icon is-small">
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
</span> </span>
<span class="help is-danger">This email is invalid</span> <span class="help is-danger">This email is invalid</span>
@ -323,13 +323,13 @@ doc-subtab: form
{% capture icons_example %} {% capture icons_example %}
<p class="control has-icon"> <p class="control has-icon">
<input class="input" type="email" placeholder="Email"> <input class="input" type="email" placeholder="Email">
<span class="icon"> <span class="icon is-small">
<i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i>
</span> </span>
</p> </p>
<p class="control has-icon"> <p class="control has-icon">
<input class="input" type="password" placeholder="Password"> <input class="input" type="password" placeholder="Password">
<span class="icon"> <span class="icon is-small">
<i class="fa fa-lock"></i> <i class="fa fa-lock"></i>
</span> </span>
</p> </p>

15
docs/documentation/elements/icon.html
View File

@ -19,16 +19,17 @@ doc-subtab: icon
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p> <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
</div> </div>
<div class="example"> {% capture icon_example %}
<span class="icon">
<i class="fa fa-home"></i>
</span>
</div>
{% highlight html %}
<span class="icon"> <span class="icon">
<i class="fa fa-home"></i> <i class="fa fa-home"></i>
</span> </span>
{% endcapture %}
<div class="example">
{{icon_example}}
</div>
{% highlight html %}
{{icon_example}}
{% endhighlight %} {% endhighlight %}
<div class="content"> <div class="content">

34
docs/documentation/elements/image.html
View File

@ -21,13 +21,13 @@ doc-subtab: image
<div class="example"> <div class="example">
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="http://placehold.it/128x128"> <img src="{{site.url}}/images/placeholders/128x128.png">
</figure> </figure>
</div> </div>
{% highlight html %} {% highlight html %}
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="http://placehold.it/128x128"> <img src="{{site.url}}/images/placeholders/128x128.png">
</figure> </figure>
{% endhighlight %} {% endhighlight %}
@ -42,37 +42,37 @@ doc-subtab: image
<tbody> <tbody>
<tr> <tr>
<td><code>image is-16x16</code></td> <td><code>image is-16x16</code></td>
<td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td> <td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
<td>16x16px</td> <td>16x16px</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-24x24</code></td> <td><code>image is-24x24</code></td>
<td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td> <td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
<td>24x24px</td> <td>24x24px</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-32x32</code></td> <td><code>image is-32x32</code></td>
<td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td> <td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
<td>32x32px</td> <td>32x32px</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-48x48</code></td> <td><code>image is-48x48</code></td>
<td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td> <td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
<td>48x48px</td> <td>48x48px</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-64x64</code></td> <td><code>image is-64x64</code></td>
<td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td> <td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
<td>64x64px</td> <td>64x64px</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-96x96</code></td> <td><code>image is-96x96</code></td>
<td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td> <td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
<td>96x96px</td> <td>96x96px</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-128x128</code></td> <td><code>image is-128x128</code></td>
<td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td> <td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
<td>128x128px</td> <td>128x128px</td>
</tr> </tr>
</tbody> </tbody>
@ -86,13 +86,13 @@ doc-subtab: image
<div class="example"> <div class="example">
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="http://placehold.it/256x256"> <img src="{{site.url}}/images/placeholders/256x256.png">
</figure> </figure>
</div> </div>
{% highlight html %} {% highlight html %}
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="http://placehold.it/256x256"> <img src="{{site.url}}/images/placeholders/256x256.png">
</figure> </figure>
{% endhighlight %} {% endhighlight %}
@ -108,32 +108,32 @@ doc-subtab: image
<tbody> <tbody>
<tr> <tr>
<td><code>image is-square</code></td> <td><code>image is-square</code></td>
<td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td> <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>Square (or 1by1)</td> <td>Square (or 1by1)</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-1by1</code></td> <td><code>image is-1by1</code></td>
<td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td> <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>1 by 1</td> <td>1 by 1</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-4by3</code></td> <td><code>image is-4by3</code></td>
<td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td> <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
<td>4 by 3</td> <td>4 by 3</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-3by2</code></td> <td><code>image is-3by2</code></td>
<td><figure class="image is-3by2"><img src="http://placehold.it/480x320"></figure></td> <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
<td>3 by 2</td> <td>3 by 2</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-16by9</code></td> <td><code>image is-16by9</code></td>
<td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td> <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
<td>16 by 9</td> <td>16 by 9</td>
</tr> </tr>
<tr> <tr>
<td><code>image is-2by1</code></td> <td><code>image is-2by1</code></td>
<td><figure class="image is-2by1"><img src="http://placehold.it/640x320"></figure></td> <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td>2 by 1</td> <td>2 by 1</td>
</tr> </tr>
</tbody> </tbody>

10
docs/documentation/grid/tiles.html
View File

@ -44,7 +44,7 @@ doc-subtab: tiles
<p class="title">Middle tile</p> <p class="title">Middle tile</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>
@ -93,7 +93,7 @@ doc-subtab: tiles
<p class="title">Middle tile</p> <p class="title">Middle tile</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>
@ -383,7 +383,7 @@ tile is-ancestor
<p class="title">Middle box</p> <p class="title">Middle box</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>
@ -490,7 +490,7 @@ tile is-ancestor
<p class="title">Middle box</p> <p class="title">Middle box</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>
@ -583,7 +583,7 @@ tile is-ancestor
<p class="title">Middle box</p> <p class="title">Middle box</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>

24
docs/documentation/overview/start.html
View File

@ -14,7 +14,9 @@ doc-subtab: start
<hr> <hr>
<article class="media is-large"> <article class="media is-large">
<div class="media-number">1</div> <div class="media-left">
<p class="title is-5">1</p>
</div>
<div class="media-content"> <div class="media-content">
<p class="title is-5"> <p class="title is-5">
Use <strong>NPM</strong> <em>(recommended)</em>: Use <strong>NPM</strong> <em>(recommended)</em>:
@ -26,7 +28,9 @@ npm install bulma
</article> </article>
<article class="media is-large"> <article class="media is-large">
<div class="media-number">2</div> <div class="media-left">
<p class="title is-5">2</p>
</div>
<div class="media-content"> <div class="media-content">
<p class="title is-5"> <p class="title is-5">
Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong> Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
@ -37,7 +41,9 @@ npm install bulma
</article> </article>
<article class="media is-large"> <article class="media is-large">
<div class="media-number">3</div> <div class="media-left">
<p class="title is-5">3</p>
</div>
<div class="media-content"> <div class="media-content">
<p class="title is-5"> <p class="title is-5">
Download from the <strong>repository</strong> Download from the <strong>repository</strong>
@ -70,7 +76,9 @@ npm install bulma
</div> </div>
<article class="media is-large"> <article class="media is-large">
<div class="media-number">1</div> <div class="media-left">
<p class="title is-5">1</p>
</div>
<div class="media-content"> <div class="media-content">
<p class="title is-5"> <p class="title is-5">
<strong>Download</strong> the source files: <strong>Download</strong> the source files:
@ -83,7 +91,9 @@ npm install bulma
</article> </article>
<article class="media is-large"> <article class="media is-large">
<div class="media-number">2</div> <div class="media-left">
<p class="title is-5">2</p>
</div>
<div class="media-content"> <div class="media-content">
<p class="title is-5"> <p class="title is-5">
<strong>Set</strong> your variables:<br> <strong>Set</strong> your variables:<br>
@ -107,7 +117,9 @@ $family-primary: $family-serif // Use the new serif family
</article> </article>
<article class="media is-large"> <article class="media is-large">
<div class="media-number">3</div> <div class="media-left">
<p class="title is-5">3</p>
</div>
<div class="media-content"> <div class="media-content">
<p class="title is-5"> <p class="title is-5">
<strong>Import</strong> Bulma <em>after</em> having set your variables:<br> <strong>Import</strong> Bulma <em>after</em> having set your variables:<br>

BIN
docs/images/placeholders/1280x960.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
docs/images/placeholders/128x128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
docs/images/placeholders/16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docs/images/placeholders/24x24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docs/images/placeholders/256x256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
docs/images/placeholders/300x225.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
docs/images/placeholders/32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docs/images/placeholders/480x320.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
docs/images/placeholders/480x480.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/images/placeholders/48x48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
docs/images/placeholders/640x320.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/images/placeholders/640x360.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/images/placeholders/640x480.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/images/placeholders/64x64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
docs/images/placeholders/96x96.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

8
docs/index.html
View File

@ -214,7 +214,7 @@ route: index
<p class="title">Middle tile</p> <p class="title">Middle tile</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>
@ -359,7 +359,7 @@ route: index
<article class="media"> <article class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-64x64"> <figure class="image is-64x64">
<img src="http://placehold.it/128x128" alt="Image"> <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">
@ -490,14 +490,14 @@ route: index
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/300x225" alt=""> <img src="{{site.url}}/images/placeholders/300x225.png" alt="">
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32"> <figure class="image is-32x32">
<img src="http://placehold.it/64x64" alt="Image"> <img src="{{site.url}}/images/placeholders/64x64.png" alt="Image">
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">

6
docs/templates.html
View File

@ -29,21 +29,21 @@ route: templates
<a class="box" href="{{ site.url }}/templates/everything.html"> <a class="box" href="{{ site.url }}/templates/everything.html">
<h3 class="title is-4">Everything</h3> <h3 class="title is-4">Everything</h3>
<h4 class="subtitle is-5">All Bulma elements on one page</h4> <h4 class="subtitle is-5">All Bulma elements on one page</h4>
<figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure> <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
</a> </a>
</div> </div>
<div class="column is-one-third"> <div class="column is-one-third">
<a class="box" href="{{ site.url }}/templates/business.html"> <a class="box" href="{{ site.url }}/templates/business.html">
<h3 class="title is-4">Business</h3> <h3 class="title is-4">Business</h3>
<h4 class="subtitle is-5">Classic business homepage</h4> <h4 class="subtitle is-5">Classic business homepage</h4>
<figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure> <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
</a> </a>
</div> </div>
<div class="column is-one-third"> <div class="column is-one-third">
<a class="box" href="{{ site.url }}/templates/welcome.html"> <a class="box" href="{{ site.url }}/templates/welcome.html">
<h3 class="title is-4">Welcome</h3> <h3 class="title is-4">Welcome</h3>
<h4 class="subtitle is-5">Simple one-page introduction</h4> <h4 class="subtitle is-5">Simple one-page introduction</h4>
<figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure> <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
</a> </a>
</div> </div>
</div> </div>

6
docs/tiles.html
View File

@ -275,7 +275,7 @@ tile is-ancestor
<p class="title">Middle box</p> <p class="title">Middle box</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>
@ -382,7 +382,7 @@ tile is-ancestor
<p class="title">Middle box</p> <p class="title">Middle box</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>
@ -475,7 +475,7 @@ tile is-ancestor
<p class="title">Middle box</p> <p class="title">Middle box</p>
<p class="subtitle">With an image</p> <p class="subtitle">With an image</p>
<figure class="image is-4by3"> <figure class="image is-4by3">
<img src="http://placehold.it/640x480"> <img src="{{site.url}}/images/placeholders/640x480.png">
</figure> </figure>
</article> </article>
</div> </div>

4
sass/base/generic.sass
View File

@ -52,7 +52,7 @@ a
code code
background-color: $code-background background-color: $code-background
color: $code color: $code
font-size: 0.75em font-size: 0.8em
font-weight: normal font-weight: normal
padding: 0.25em 0.5em 0.25em padding: 0.25em 0.5em 0.25em
@ -86,7 +86,7 @@ strong
pre pre
background-color: $pre-background background-color: $pre-background
color: $pre color: $pre
font-size: 0.75em font-size: 0.8em
white-space: pre white-space: pre
word-wrap: normal word-wrap: normal
code code

2
sass/components/menu.sass
View File

@ -23,7 +23,7 @@
.menu-label .menu-label
color: $text-light color: $text-light
font-size: 0.75em font-size: 0.8em
letter-spacing: 1px letter-spacing: 1px
text-transform: uppercase text-transform: uppercase
&:not(:first-child) &:not(:first-child)

10
sass/components/nav.sass
View File

@ -1,4 +1,4 @@
$nav-height: 3rem !default $nav-height: 3.5rem !default
// Components // Components
@ -20,7 +20,7 @@ $nav-height: 3rem !default
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0
img img
max-height: 1.5rem max-height: 1.75rem
.button + .button .button + .button
margin-left: 0.75rem margin-left: 0.75rem
.tag .tag
@ -48,11 +48,11 @@ a.nav-item
padding-right: 1rem padding-right: 1rem
padding-top: calc(0.5rem - 1px) padding-top: calc(0.5rem - 1px)
&:hover &:hover
border-bottom-color: $link border-bottom-color: $primary
border-top-color: transparent border-top-color: transparent
&.is-active &.is-active
border-bottom: 3px solid $link border-bottom: 3px solid $primary
color: $link color: $primary
padding-bottom: calc(0.5rem - 3px) padding-bottom: calc(0.5rem - 3px)
// Containers // Containers

4
sass/components/tabs.sass
View File

@ -24,8 +24,8 @@
display: block display: block
&.is-active &.is-active
a a
border-bottom-color: $link border-bottom-color: $primary
color: $link color: $primary
ul ul
align-items: center align-items: center
border-bottom: 1px solid $border border-bottom: 1px solid $border

83
sass/elements/button.sass
View File

@ -1,6 +1,6 @@
$button: $grey-darker !default $button: $grey-darker !default
$button-background: $white !default $button-background: $white !default
$button-border: $grey-lighter !default $button-border: $grey-lighter !default
$button-hover: $link-hover !default $button-hover: $link-hover !default
$button-hover-border: $link-hover-border !default $button-hover-border: $link-hover-border !default
@ -13,63 +13,58 @@ $button-active-border: $link-active-border !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
@function buttonIconSpacing($button-size, $icon-width) @function buttonIconSpacing($button-font-size, $icon-width)
// The rem height of the button // The rem height of the button
$button-height: 2.5 * $button-size // based on a height of 2.5em
// For the button to be square, the horizontal padding + the icon width must equal the button height. $button-height: 2.5 * $button-font-size // rem
// We know that $horizontal-padding = 2em // The rem total horizontal padding of the button
$horizontal-padding: 2 * $button-size $button-horizontal-padding: 2 * 0.75 * $button-font-size // rem
// We want to solve: // For the icon center to align with the button center
// $button-height = $horizontal-padding + $icon-width + $x // the horizontal padding + the icon width must equal the button height
$x: $button-height - $horizontal-padding - $icon-width // $button-height = $button-horizontal-padding + $icon-width + $difference
// We divide by 2 to apply this margin on both the left and right sides $difference: $button-height - $button-horizontal-padding - $icon-width
@return abs($x) / 2 @return $difference / 2
=button-icon($button-size) =button-icon($button-font-size)
$small-spacing: buttonIconSpacing($button-size, 1rem) $small-offset: buttonIconSpacing($button-font-size, 1rem)
$normal-spacing: buttonIconSpacing($button-size, 1.5rem) $normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
$medium-spacing: buttonIconSpacing($button-size, 2rem) $medium-offset: buttonIconSpacing($button-font-size, 2rem)
$large-spacing: buttonIconSpacing($button-size, 3rem) $large-offset: buttonIconSpacing($button-font-size, 3rem)
.icon .icon
&:first-child:not(:last-child) &:first-child:not(:last-child)
margin-left: -$normal-spacing / 2 margin-left: $normal-offset
margin-right: $normal-spacing margin-right: $button-font-size / 2
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: $normal-spacing margin-left: $button-font-size / 2
margin-right: -$normal-spacing / 2 margin-right: $normal-offset
&:first-child:last-child &:first-child:last-child
margin-left: calc(-1px - #{$normal-spacing}) // The -1px is to account for the button 1px border
margin-right: calc(-1px - #{$normal-spacing}) margin-left: calc(-1px + #{$normal-offset})
margin-right: calc(-1px + #{$normal-offset})
&.is-small &.is-small
&:first-child:not(:last-child) &:first-child:not(:last-child)
margin-left: -$small-spacing / 2 margin-left: $small-offset
margin-right: $small-spacing
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: $small-spacing margin-right: $small-offset
margin-right: -$small-spacing / 2
&:first-child:last-child &:first-child:last-child
margin-left: calc(-1px - #{$small-spacing}) margin-left: calc(-1px + #{$small-offset})
margin-right: calc(-1px - #{$small-spacing}) margin-right: calc(-1px + #{$small-offset})
&.is-medium &.is-medium
&:first-child:not(:last-child) &:first-child:not(:last-child)
margin-left: -$medium-spacing / 2 margin-left: $medium-offset
margin-right: $medium-spacing
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: $medium-spacing margin-right: $medium-offset
margin-right: -$medium-spacing / 2
&:first-child:last-child &:first-child:last-child
margin-left: calc(-1px - #{$medium-spacing}) margin-left: calc(-1px + #{$medium-offset})
margin-right: calc(-1px - #{$medium-spacing}) margin-right: calc(-1px + #{$medium-offset})
&.is-large &.is-large
&:first-child:not(:last-child) &:first-child:not(:last-child)
margin-left: -$large-spacing / 2 margin-left: $large-offset
margin-right: $large-spacing
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: $large-spacing margin-right: $large-offset
margin-right: -$large-spacing / 2
&:first-child:last-child &:first-child:last-child
margin-left: calc(-1px - #{$large-spacing}) margin-left: calc(-1px + #{$large-offset})
margin-right: calc(-1px - #{$large-spacing}) margin-right: calc(-1px + #{$large-offset})
// The button sizes use mixins so they can be used at different breakpoints // The button sizes use mixins so they can be used at different breakpoints
=button-small =button-small
@ -91,8 +86,8 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
color: $button color: $button
cursor: pointer cursor: pointer
justify-content: center justify-content: center
padding-left: 1em padding-left: 0.75em
padding-right: 1em padding-right: 0.75em
text-align: center text-align: center
white-space: nowrap white-space: nowrap
strong strong

3
sass/elements/content.sass
View File

@ -3,11 +3,8 @@
color: $text color: $text
// Inline // Inline
a:not(.button) a:not(.button)
border-bottom: 1px solid $border
&:visited &:visited
color: $link-visited color: $link-visited
&:hover
border-bottom-color: $link
li + li li + li
margin-top: 0.25em margin-top: 0.25em
// Block // Block

1
sass/elements/icon.sass
View File

@ -1,5 +1,6 @@
.icon .icon
+fa(21px, 1.5rem) +fa(21px, 1.5rem)
background: coral
.fa .fa
font-size: inherit font-size: inherit
line-height: inherit line-height: inherit

2
sass/grid/tiles.sass
View File

@ -1,7 +1,7 @@
.tile .tile
align-items: stretch align-items: stretch
display: block display: block
flex-basis: auto flex-basis: 0
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1
min-height: min-content min-height: min-content

20
sass/utilities/variables.sass
View File

@ -34,7 +34,7 @@ $size-2: 2.75rem !default
$size-3: 2rem !default $size-3: 2rem !default
$size-4: 1.5rem !default $size-4: 1.5rem !default
$size-5: 1.25rem !default $size-5: 1.25rem !default
$size-6: 16px !default $size-6: 14px !default
$size-7: 0.75rem !default $size-7: 0.75rem !default
$weight-light: 300 !default $weight-light: 300 !default
@ -68,11 +68,19 @@ $dark: $grey-darker !default
// 3. Applied variables // 3. Applied variables
// Invert colors // Invert colors
$primary-invert: findColorInvert($primary) !default $orange-invert: findColorInvert($orange) !default
$info-invert: findColorInvert($info) !default $yellow-invert: findColorInvert($yellow) !default
$success-invert: findColorInvert($success) !default $green-invert: findColorInvert($green) !default
$warning-invert: findColorInvert($warning) !default $turquoise-invert: findColorInvert($turquoise) !default
$danger-invert: findColorInvert($danger) !default $blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: $turquoise-invert !default
$info-invert: $blue-invert !default
$success-invert: $green-invert !default
$warning-invert: $yellow-invert !default
$danger-invert: $red-invert !default
$light-invert: $dark !default $light-invert: $dark !default
$dark-invert: $light !default $dark-invert: $light !default