/** * Ink * * A set of tools for quick development of web interfaces. * * @package Ink * @author Sapo Ink Team * @license http://opensource.org/licenses/MIT MIT * @link http://ink.sapo.pt * @version 3.0.5 */ /** * Ink class names prefix * Used in all of Inks components root elements */ /** * Grid class names */ /** * Alerts class names */ /** * Badges class names */ /** * Buttons class names */ /** * Forms class names */ /** * Labels class names */ /** * Navigation class names */ /** * Dropdown class names */ /** * Tables class names */ /** * Images class names */ /** * JS UI components classe names */ /** * Sets the grids maximum width * @var $grid-max-width (pixels|ems|percentage) */ /*! * Sets the grids breakpoint * * To add a new break point you'll need to add an element to the list. * * Here's an example: ( class-name-prefix, minimum-width, maximum-width, gutter-width, no-media-query). * * media: media type. * class-name-prefix: this is the prefix used in tons of inks classes i.e.: large-100, small-40, etc. * minimum-width: (pixels|null) the minimum width for the breakpoint * maximum-width: (pixels|null) the maximum width for the breakpoint * gutter-width: (ems) the width for the gutters (space between grid columns) for the breakpoint * no-media-query: (true|false) if you need to support IE8 set this to true on a single breakpoint. * Since IE8 does not support the @media statement leaving one of the breakpoints * outside a @media query let's you use the grid in IE8. * */ .ink-grid { width: auto; max-width: 1440px; margin: 0 auto; } .ink-grid { padding: 0 1.75em; } .column-group > [class*=large-] { float: left; clear: none; } .large-5 { width: 5%; } .large-10 { width: 10%; } .large-15 { width: 15%; } .large-16 { width: 16.66%; } .large-20 { width: 20%; } .large-25 { width: 25%; } .large-30 { width: 30%; } .large-33 { width: 33.33%; } .large-35 { width: 35%; } .large-40 { width: 40%; } .large-45 { width: 45%; } .large-50 { width: 50%; } .large-55 { width: 55%; } .large-60 { width: 60%; } .large-65 { width: 65%; } .large-66 { width: 66.66%; } .large-70 { width: 70%; } .large-75 { width: 75%; } .large-80 { width: 80%; } .large-85 { width: 85%; } .large-90 { width: 90%; } .large-95 { width: 95%; } .large-100 { width: 100%; } [class*=large-100] { float: none; clear: both; } .column-group { *zoom: 1; } .column-group:after { content: ""; display: table; clear: both; } .column-group.gutters { margin-left: -1.75em; } .column-group.gutters > [class*=large-], .column-group.gutters > [class*=all-] { padding-left: 1.75em; margin-bottom: 1.75em; } .column-group.horizontal-gutters { margin-left: -1.75em; } .column-group.horizontal-gutters > [class*=large-], .column-group.horizontal-gutters > [class*=all-] { padding-left: 1.75em; } .column-group.vertical-gutters > [class*=large-], .column-group.vertical-gutters > [class*=all-] { margin-bottom: 1.75em; } .column-group.double-gutters { margin-left: -3.5em; } .column-group.double-gutters > [class*=large-], .column-group.double-gutters > [class*=all-] { padding-left: 3.5em; margin-bottom: 3.5em; } .column-group.double-horizontal-gutters { margin-left: -3.5em; } .column-group.double-horizontal-gutters > [class*=large-], .column-group.double-horizontal-gutters > [class*=all-] { padding-left: 3.5em; } .column-group.double-vertical-gutters > [class*=large-], .column-group.double-vertical-gutters > [class*=all-] { margin-bottom: 3.5em; } .column-group.half-gutters { margin-left: -0.875em; } .column-group.half-gutters > [class*=large-], .column-group.half-gutters > [class*=all-] { padding-left: 0.875em; margin-bottom: 0.875em; } .column-group.half-horizontal-gutters { margin-left: -0.875em; } .column-group.half-horizontal-gutters > [class*=large-], .column-group.half-horizontal-gutters > [class*=all-] { padding-left: 0.875em; } .column-group.half-vertical-gutters > [class*=large-], .column-group.half-vertical-gutters > [class*=all-] { margin-bottom: 0.875em; } .column-group.quarter-gutters { margin-left: -0.4375em; } .column-group.quarter-gutters > [class*=large-], .column-group.quarter-gutters > [class*=all-] { padding-left: 0.4375em; margin-bottom: 0.4375em; } .column-group.quarter-horizontal-gutters { margin-left: -0.4375em; } .column-group.quarter-horizontal-gutters > [class*=large-], .column-group.quarter-horizontal-gutters > [class*=all-] { padding-left: 0.4375em; } .column-group.quarter-vertical-gutters > [class*=large-], .column-group.quarter-vertical-gutters > [class*=all-] { margin-bottom: 0.4375em; } .column-group.large-gutters { margin-left: -1.75em; } .column-group.large-gutters > [class*=large-], .column-group.large-gutters > [class*=all-] { padding-left: 1.75em; margin-bottom: 1.75em; } .column-group.large-horizontal-gutters { margin-left: -1.75em; } .column-group.large-horizontal-gutters > [class*=large-], .column-group.large-horizontal-gutters > [class*=all-] { padding-left: 1.75em; } .column-group.large-vertical-gutters > [class*=large-], .column-group.large-vertical-gutters > [class*=all-] { margin-bottom: 1.75em; } .column-group.large-double-gutters { margin-left: -3.5em; } .column-group.large-double-gutters > [class*=large-], .column-group.large-double-gutters > [class*=all-] { padding-left: 3.5em; margin-bottom: 3.5em; } .column-group.large-double-horizontal-gutters { margin-left: -3.5em; } .column-group.large-double-horizontal-gutters > [class*=large-], .column-group.large-double-horizontal-gutters > [class*=all-] { padding-left: 3.5em; } .column-group.large-double-vertical-gutters > [class*=large-], .column-group.large-double-vertical-gutters > [class*=all-] { margin-bottom: 3.5em; } .column-group.large-half-gutters { margin-left: -0.875em; } .column-group.large-half-gutters > [class*=large-], .column-group.large-half-gutters > [class*=all-] { padding-left: 0.875em; margin-bottom: 0.875em; } .column-group.large-half-horizontal-gutters { margin-left: -0.875em; } .column-group.large-half-horizontal-gutters > [class*=large-], .column-group.large-half-horizontal-gutters > [class*=all-] { padding-left: 0.875em; } .column-group.large-half-vertical-gutters > [class*=large-], .column-group.large-half-vertical-gutters > [class*=all-] { margin-bottom: 0.875em; } .column-group.large-quarter-gutters { margin-left: -0.4375em; } .column-group.large-quarter-gutters > [class*=large-], .column-group.large-quarter-gutters > [class*=all-] { padding-left: 0.4375em; margin-bottom: 0.4375em; } .column-group.large-quarter-horizontal-gutters { margin-left: -0.4375em; } .column-group.large-quarter-horizontal-gutters > [class*=large-], .column-group.large-quarter-horizontal-gutters > [class*=all-] { padding-left: 0.4375em; } .column-group.large-quarter-vertical-gutters > [class*=large-], .column-group.large-quarter-vertical-gutters > [class*=all-] { margin-bottom: 0.4375em; } .column-group.large-no-gutters { margin-left: 0; } .column-group.large-no-gutters > [class*=large-], .column-group.large-no-gutters > [class*=all-] { padding-left: 0; margin-bottom: 0; } .ink-table td[class*=large-], .ink-table th[class*=large-], .ink-table tr[class*=large-], .ink-table thead[class*=large-], .ink-table tbody[class*=large-], .ink-table tfoot[class*=large-] { float: none; } .large-push-left { float: left; } .large-push-center { float: none; margin-left: auto; margin-right: auto; } .large-push-right { float: right; } .large-align-left { text-align: left; } .large-align-center { text-align: center; } .large-align-right { text-align: right; } .large-no-margin { margin: 0 !important; } .space { margin: 1.75em; } .large-space { margin: 1.75em; } .padding { padding: 1.75em; } .large-padding { padding: 1.75em; } .double-space { margin: 3.5em; } .large-double-space { margin: 3.5em; } .double-padding { padding: 3.5em; } .large-double-padding { padding: 3.5em; } .half-space { margin: 0.875em; } .large-half-space { margin: 0.875em; } .half-padding { padding: 0.875em; } .large-half-padding { padding: 0.875em; } .quarter-space { margin: 0.4375em; } .large-quarter-space { margin: 0.4375em; } .quarter-padding { padding: 0.4375em; } .large-quarter-padding { padding: 0.4375em; } .vertical-space { margin-top: 1.75em; margin-bottom: 1.75em; } .large-vertical-space { margin-top: 1.75em; margin-bottom: 1.75em; } .vertical-padding { padding-top: 1.75em; padding-bottom: 1.75em; } .large-vertical-padding { padding-top: 1.75em; padding-bottom: 1.75em; } .double-vertical-space { margin-top: 3.5em; margin-bottom: 3.5em; } .large-double-vertical-space { margin-top: 3.5em; margin-bottom: 3.5em; } .double-vertical-padding { padding-top: 3.5em; padding-bottom: 3.5em; } .large-double-vertical-padding { padding-top: 3.5em; padding-bottom: 3.5em; } .half-vertical-space { margin-top: 0.875em; margin-bottom: 0.875em; } .large-half-vertical-space { margin-top: 0.875em; margin-bottom: 0.875em; } .half-vertical-padding { padding-top: 0.875em; padding-bottom: 0.875em; } .large-half-vertical-padding { padding-top: 0.875em; padding-bottom: 0.875em; } .quarter-vertical-space { margin-top: 0.4375em; margin-bottom: 0.4375em; } .large-quarter-vertical-space { margin-top: 0.4375em; margin-bottom: 0.4375em; } .quarter-vertical-padding { padding-top: 0.4375em; padding-bottom: 0.4375em; } .large-quarter-vertical-padding { padding-top: 0.4375em; padding-bottom: 0.4375em; } .horizontal-space { margin-left: 1.75em; margin-right: 1.75em; } .large-horizontal-space { margin-left: 1.75em; margin-right: 1.75em; } .horizontal-padding { padding-left: 1.75em; padding-right: 1.75em; } .large-horizontal-padding { padding-left: 1.75em; padding-right: 1.75em; } .double-horizontal-space { margin-left: 3.5em; margin-right: 3.5em; } .large-double-horizontal-space { margin-left: 3.5em; margin-right: 3.5em; } .double-horizontal-padding { padding-left: 3.5em; padding-right: 3.5em; } .large-double-horizontal-padding { padding-left: 3.5em; padding-right: 3.5em; } .half-horizontal-space { margin-left: 0.875em; margin-right: 0.875em; } .large-half-horizontal-space { margin-left: 0.875em; margin-right: 0.875em; } .half-horizontal-padding { padding-left: 0.875em; padding-right: 0.875em; } .large-half-horizontal-padding { padding-left: 0.875em; padding-right: 0.875em; } .quarter-horizontal-space { margin-left: 0.4375em; margin-right: 0.4375em; } .large-quarter-horizontal-space { margin-left: 0.4375em; margin-right: 0.4375em; } .quarter-horizontal-padding { padding-left: 0.4375em; padding-right: 0.4375em; } .large-quarter-horizontal-padding { padding-left: 0.4375em; padding-right: 0.4375em; } .top-space { margin-top: 1.75em; } .large-top-space { margin-top: 1.75em; } .top-padding { padding-top: 1.75em; } .large-top-padding { padding-top: 1.75em; } .double-top-space { margin-top: 3.5em; } .large-double-top-space { margin-top: 3.5em; } .double-top-padding { padding-top: 3.5em; } .large-double-top-padding { padding-top: 3.5em; } .half-top-space { margin-top: 0.875em; } .large-half-top-space { margin-top: 0.875em; } .half-top-padding { padding-top: 0.875em; } .large-half-top-padding { padding-top: 0.875em; } .quarter-top-space { margin-top: 0.4375em; } .large-quarter-top-space { margin-top: 0.4375em; } .quarter-top-padding { padding-top: 0.4375em; } .large-quarter-top-padding { padding-top: 0.4375em; } .right-space { margin-right: 1.75em; } .large-right-space { margin-right: 1.75em; } .right-padding { padding-right: 1.75em; } .large-right-padding { padding-right: 1.75em; } .double-right-space { margin-right: 3.5em; } .large-double-right-space { margin-right: 3.5em; } .double-right-padding { padding-right: 3.5em; } .large-double-right-padding { padding-right: 3.5em; } .half-right-space { margin-right: 0.875em; } .large-half-right-space { margin-right: 0.875em; } .half-right-padding { padding-right: 0.875em; } .large-half-right-padding { padding-right: 0.875em; } .quarter-right-space { margin-right: 0.4375em; } .large-quarter-right-space { margin-right: 0.4375em; } .quarter-right-padding { padding-right: 0.4375em; } .large-quarter-right-padding { padding-right: 0.4375em; } .bottom-space { margin-bottom: 1.75em; } .large-bottom-space { margin-bottom: 1.75em; } .bottom-padding { padding-bottom: 1.75em; } .large-bottom-padding { padding-bottom: 1.75em; } .double-bottom-space { margin-bottom: 3.5em; } .large-double-bottom-space { margin-bottom: 3.5em; } .double-bottom-padding { padding-bottom: 3.5em; } .large-double-bottom-padding { padding-bottom: 3.5em; } .half-bottom-space { margin-bottom: 0.875em; } .large-half-bottom-space { margin-bottom: 0.875em; } .half-bottom-padding { padding-bottom: 0.875em; } .large-half-bottom-padding { padding-bottom: 0.875em; } .quarter-bottom-space { margin-bottom: 0.4375em; } .large-quarter-bottom-space { margin-bottom: 0.4375em; } .quarter-bottom-padding { padding-bottom: 0.4375em; } .large-quarter-bottom-padding { padding-bottom: 0.4375em; } .left-space { margin-left: 1.75em; } .large-left-space { margin-left: 1.75em; } .left-padding { padding-left: 1.75em; } .large-left-padding { padding-left: 1.75em; } .double-left-space { margin-left: 3.5em; } .large-double-left-space { margin-left: 3.5em; } .double-left-padding { padding-left: 3.5em; } .large-double-left-padding { padding-left: 3.5em; } .half-left-space { margin-left: 0.875em; } .large-half-left-space { margin-left: 0.875em; } .half-left-padding { padding-left: 0.875em; } .large-half-left-padding { padding-left: 0.875em; } .quarter-left-space { margin-left: 0.4375em; } .large-quarter-left-space { margin-left: 0.4375em; } .quarter-left-padding { padding-left: 0.4375em; } .large-quarter-left-padding { padding-left: 0.4375em; } .hide-large { display: none !important; } .show-large { display: inherit !important; } table.show-large { display: table; } thead.show-large { display: table-header-group; } tbody.show-large { display: table-row-group; } tfoot.show-large { display: table-footer-group; } tr.show-large { display: table-row; } th.show-large, td.show-large { display: table-cell; }