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

Add breakpoint based column gaps documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2018-05-30 14:12:03 +02:00
parent 4caa77dc0f
commit 56d58280ca
7 changed files with 575 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8638,38 +8638,524 @@ label.panel-block:hover {
--columnGap: 0rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-0-mobile {
--columnGap: 0rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-0-tablet {
--columnGap: 0rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-0-tablet-only {
--columnGap: 0rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-0-touch {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-0-desktop {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-0-desktop-only {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-0-widescreen {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-0-widescreen-only {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-0-fullhd {
--columnGap: 0rem;
}
}
.columns.is-variable.is-1 {
--columnGap: 0.25rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-1-mobile {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-1-tablet {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-1-tablet-only {
--columnGap: 0.25rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-1-touch {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-1-desktop {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-1-desktop-only {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-1-widescreen {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-1-widescreen-only {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-1-fullhd {
--columnGap: 0.25rem;
}
}
.columns.is-variable.is-2 {
--columnGap: 0.5rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-2-mobile {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-2-tablet {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-2-tablet-only {
--columnGap: 0.5rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-2-touch {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-2-desktop {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-2-desktop-only {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-2-widescreen {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-2-widescreen-only {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-2-fullhd {
--columnGap: 0.5rem;
}
}
.columns.is-variable.is-3 {
--columnGap: 0.75rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-3-mobile {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-3-tablet {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-3-tablet-only {
--columnGap: 0.75rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-3-touch {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-3-desktop {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-3-desktop-only {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-3-widescreen {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-3-widescreen-only {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-3-fullhd {
--columnGap: 0.75rem;
}
}
.columns.is-variable.is-4 {
--columnGap: 1rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-4-mobile {
--columnGap: 1rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-4-tablet {
--columnGap: 1rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-4-tablet-only {
--columnGap: 1rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-4-touch {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-4-desktop {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-4-desktop-only {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-4-widescreen {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-4-widescreen-only {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-4-fullhd {
--columnGap: 1rem;
}
}
.columns.is-variable.is-5 {
--columnGap: 1.25rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-5-mobile {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-5-tablet {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-5-tablet-only {
--columnGap: 1.25rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-5-touch {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-5-desktop {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-5-desktop-only {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-5-widescreen {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-5-widescreen-only {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-5-fullhd {
--columnGap: 1.25rem;
}
}
.columns.is-variable.is-6 {
--columnGap: 1.5rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-6-mobile {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-6-tablet {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-6-tablet-only {
--columnGap: 1.5rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-6-touch {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-6-desktop {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-6-desktop-only {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-6-widescreen {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-6-widescreen-only {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-6-fullhd {
--columnGap: 1.5rem;
}
}
.columns.is-variable.is-7 {
--columnGap: 1.75rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-7-mobile {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-7-tablet {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-7-tablet-only {
--columnGap: 1.75rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-7-touch {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-7-desktop {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-7-desktop-only {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-7-widescreen {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-7-widescreen-only {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-7-fullhd {
--columnGap: 1.75rem;
}
}
.columns.is-variable.is-8 {
--columnGap: 2rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-8-mobile {
--columnGap: 2rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-8-tablet {
--columnGap: 2rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-8-tablet-only {
--columnGap: 2rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-8-touch {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-8-desktop {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-8-desktop-only {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-8-widescreen {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-8-widescreen-only {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-8-fullhd {
--columnGap: 2rem;
}
}
.tile {
align-items: stretch;
display: block;