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

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
Download Patch File Download Diff File Expand all files Collapse all files

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

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