/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/foundation.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Reset Box Sizing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ *, *:before, *:after { box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { margin: 0px; background-color: @body-background-color; height: 100%; overflow-x: hidden; position: relative; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Selection Highlighting -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ a { outline: 0; } ::selection { background: @body-text-link-text-color; color: @white; } ::-moz-selection { background: @body-text-link-text-color; color: @white; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas { position: relative; background-color: @canvas-background-color; overflow: hidden; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .canvas-pod { position: relative; &.canvas-pod-light { background: @canvas-pod-light-background-color; } &.canvas-pod-dark { background: @canvas-pod-dark-background-color; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { position: relative; padding-top: @container-pod-padding-vertical; padding-bottom: @container-pod-padding-vertical; &.container-pod-short { padding-top: @container-pod-short-padding-vertical; padding-bottom: @container-pod-short-padding-vertical; } &.container-pod-short-top { padding-top: @container-pod-short-padding-vertical; } &.container-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical; } &.container-pod-tall { padding-top: @container-pod-tall-padding-vertical; padding-bottom: @container-pod-tall-padding-vertical; } &.container-pod-tall-top { padding-top: @container-pod-tall-padding-vertical; } &.container-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical; } &.container-pod-fill { height: 100%; box-sizing: border-box; } &.container-pod-divider-top { border-top: 1px solid @border-color; &.container-pod-divider-inverse { border-top: 1px solid @border-color-inverse; } } &.container-pod-divider-bottom { border-bottom: 1px solid @border-color; &.container-pod-divider-inverse { border-bottom: 1px solid @border-color-inverse; } } &.flush-top { padding-top: 0px !important; } &.flush-bottom { padding-bottom: 0px !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { position: relative; padding-top: @container-pod-padding-vertical; padding-bottom: @container-pod-padding-vertical; &.row-pod-short { padding-top: @container-pod-short-padding-vertical; padding-bottom: @container-pod-short-padding-vertical; } &.row-pod-short-top { padding-top: @container-pod-short-padding-vertical; } &.row-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical; } &.row-pod-tall { padding-top: @container-pod-tall-padding-vertical; padding-bottom: @container-pod-tall-padding-vertical; } &.row-pod-tall-top { padding-top: @container-pod-tall-padding-vertical; } &.row-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical; } &.flush-top { padding-top: 0px !important; } &.flush-bottom { padding-bottom: 0px !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -@grid-gutter-width; [class*="column-"] { margin-bottom: @grid-gutter-width; } &.flush-bottom { margin-bottom: -@grid-gutter-width !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-overflow { margin-top: @container-pod-padding-vertical; &.column-overflow-short { margin-top: @container-pod-short-padding-vertical; } &.column-overflow-tall { margin-top: @container-pod-tall-padding-vertical; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { border: 0px; height: 1px; margin-top: @container-pod-padding-vertical; margin-bottom: @container-pod-padding-vertical; background: @border-color; &.short { margin-top: @container-pod-short-padding-vertical; margin-bottom: @container-pod-short-padding-vertical; } &.tall { margin-top: @container-pod-tall-padding-vertical; margin-bottom: @container-pod-tall-padding-vertical; } /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { background: @border-color-inverse; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flex-box { display: flex; flex-direction: row; &:before, &:after { display: none; } &.flex-box-wrap { flex-wrap: wrap; } &.flex-box-fit-height { align-items: stretch; } &.flex-box-align-vertical-center { align-items: center; } &.flex-box-align-horizontal-center { justify-content: center; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.fill-height { height: 100%; box-sizing: border-box; } & when (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: @container-pod-padding-vertical-screen-mini; padding-bottom: @container-pod-padding-vertical-screen-mini; &.container-pod-short { padding-top: @container-pod-short-padding-vertical-screen-mini; padding-bottom: @container-pod-short-padding-vertical-screen-mini; } &.container-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-mini; } &.container-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-mini; } &.container-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-mini; padding-bottom: @container-pod-tall-padding-vertical-screen-mini; } &.container-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-mini; } &.container-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-mini; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: @container-pod-padding-vertical-screen-mini; padding-bottom: @container-pod-padding-vertical-screen-mini; &.row-pod-short { padding-top: @container-pod-short-padding-vertical-screen-mini; padding-bottom: @container-pod-short-padding-vertical-screen-mini; } &.row-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-mini; } &.row-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-mini; } &.row-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-mini; padding-bottom: @container-pod-tall-padding-vertical-screen-mini; } &.row-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-mini; } &.row-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-mini; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -@grid-gutter-width-screen-mini; [class*="column-"] { margin-bottom: @grid-gutter-width-screen-mini; } &.flush-bottom { margin-bottom: -@grid-gutter-width-screen-mini !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-overflow { &[class*="column-mini-"] { margin-top: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: @container-pod-padding-vertical-screen-mini; margin-bottom: @container-pod-padding-vertical-screen-mini; &.short { margin-top: @container-pod-short-padding-vertical-screen-mini; margin-bottom: @container-pod-short-padding-vertical-screen-mini; } &.tall { margin-top: @container-pod-tall-padding-vertical-screen-mini; margin-bottom: @container-pod-tall-padding-vertical-screen-mini; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.flex-box-mini { display: flex; flex-direction: row; &.flex-box-fit-height { align-items: stretch; } &.flex-box-align-vertical-center { align-items: center; } &.flex-box-align-horizontal-center { justify-content: center; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.fill-height-mini { height: 100%; box-sizing: border-box; } } } & when (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: @container-pod-padding-vertical-screen-small; padding-bottom: @container-pod-padding-vertical-screen-small; &.container-pod-short { padding-top: @container-pod-short-padding-vertical-screen-small; padding-bottom: @container-pod-short-padding-vertical-screen-small; } &.container-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-small; } &.container-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-small; } &.container-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-small; padding-bottom: @container-pod-tall-padding-vertical-screen-small; } &.container-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-small; } &.container-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-small; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: @container-pod-padding-vertical-screen-small; padding-bottom: @container-pod-padding-vertical-screen-small; &.row-pod-short { padding-top: @container-pod-short-padding-vertical-screen-small; padding-bottom: @container-pod-short-padding-vertical-screen-small; } &.row-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-small; } &.row-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-small; } &.row-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-small; padding-bottom: @container-pod-tall-padding-vertical-screen-small; } &.row-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-small; } &.row-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-small; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -@grid-gutter-width-screen-small; [class*="column-"] { margin-bottom: @grid-gutter-width-screen-small; } &.flush-bottom { margin-bottom: -@grid-gutter-width-screen-small !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-overflow { &[class*="column-small-"] { margin-top: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: @container-pod-padding-vertical-screen-small; margin-bottom: @container-pod-padding-vertical-screen-small; &.short { margin-top: @container-pod-short-padding-vertical-screen-small; margin-bottom: @container-pod-short-padding-vertical-screen-small; } &.tall { margin-top: @container-pod-tall-padding-vertical-screen-small; margin-bottom: @container-pod-tall-padding-vertical-screen-small; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.flex-box-small { display: flex; flex-direction: row; &.flex-box-fit-height { align-items: stretch; } &.flex-box-align-vertical-center { align-items: center; } &.flex-box-align-horizontal-center { justify-content: center; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.fill-height-small { height: 100%; box-sizing: border-box; } } } & when (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: @container-pod-padding-vertical-screen-medium; padding-bottom: @container-pod-padding-vertical-screen-medium; &.container-pod-short { padding-top: @container-pod-short-padding-vertical-screen-medium; padding-bottom: @container-pod-short-padding-vertical-screen-medium; } &.container-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-medium; } &.container-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-medium; } &.container-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-medium; padding-bottom: @container-pod-tall-padding-vertical-screen-medium; } &.container-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-medium; } &.container-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-medium; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: @container-pod-padding-vertical-screen-medium; padding-bottom: @container-pod-padding-vertical-screen-medium; &.row-pod-short { padding-top: @container-pod-short-padding-vertical-screen-medium; padding-bottom: @container-pod-short-padding-vertical-screen-medium; } &.row-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-medium; } &.row-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-medium; } &.row-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-medium; padding-bottom: @container-pod-tall-padding-vertical-screen-medium; } &.row-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-medium; } &.row-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-medium; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -@grid-gutter-width-screen-medium; [class*="column-"] { margin-bottom: @grid-gutter-width-screen-medium; } &.flush-bottom { margin-bottom: -@grid-gutter-width-screen-medium !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ [class^="column-"].column-overflow { &[class^="column-medium-"] { margin-top: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: @container-pod-padding-vertical-screen-medium; margin-bottom: @container-pod-padding-vertical-screen-medium; &.short { margin-top: @container-pod-short-padding-vertical-screen-medium; margin-bottom: @container-pod-short-padding-vertical-screen-medium; } &.tall { margin-top: @container-pod-tall-padding-vertical-screen-medium; margin-bottom: @container-pod-tall-padding-vertical-screen-medium; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.flex-box-medium { display: flex; flex-direction: row; &.flex-box-fit-height { align-items: stretch; } &.flex-box-align-vertical-center { align-items: center; } &.flex-box-align-horizontal-center { justify-content: center; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.fill-height-medium { height: 100%; box-sizing: border-box; } } } & when (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: @container-pod-padding-vertical-screen-large; padding-bottom: @container-pod-padding-vertical-screen-large; &.container-pod-short { padding-top: @container-pod-short-padding-vertical-screen-large; padding-bottom: @container-pod-short-padding-vertical-screen-large; } &.container-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-large; } &.container-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-large; } &.container-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-large; padding-bottom: @container-pod-tall-padding-vertical-screen-large; } &.container-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-large; } &.container-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-large; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: @container-pod-padding-vertical-screen-large; padding-bottom: @container-pod-padding-vertical-screen-large; &.row-pod-short { padding-top: @container-pod-short-padding-vertical-screen-large; padding-bottom: @container-pod-short-padding-vertical-screen-large; } &.row-pod-short-top { padding-top: @container-pod-short-padding-vertical-screen-large; } &.row-pod-short-bottom { padding-bottom: @container-pod-short-padding-vertical-screen-large; } &.row-pod-tall { padding-top: @container-pod-tall-padding-vertical-screen-large; padding-bottom: @container-pod-tall-padding-vertical-screen-large; } &.row-pod-tall-top { padding-top: @container-pod-tall-padding-vertical-screen-large; } &.row-pod-tall-bottom { padding-bottom: @container-pod-tall-padding-vertical-screen-large; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -@grid-gutter-width-screen-large; [class*="column-"] { margin-bottom: @grid-gutter-width-screen-large; } &.flush-bottom { margin-bottom: -@grid-gutter-width-screen-large !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ [class^="column-"].column-overflow { &[class^="column-large-"] { margin-top: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: @container-pod-padding-vertical-screen-large; margin-bottom: @container-pod-padding-vertical-screen-large; &.short { margin-top: @container-pod-short-padding-vertical-screen-large; margin-bottom: @container-pod-short-padding-vertical-screen-large; } &.tall { margin-top: @container-pod-tall-padding-vertical-screen-large; margin-bottom: @container-pod-tall-padding-vertical-screen-large; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.flex-box-large { display: flex; flex-direction: row; &.flex-box-fit-height { align-items: stretch; } &.flex-box-align-vertical-center { align-items: center; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.fill-height-large { height: 100%; box-sizing: border-box; } } } & when (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }