diff options
Diffstat (limited to 'scss/uikit/components/tile.scss')
| -rw-r--r-- | scss/uikit/components/tile.scss | 224 |
1 files changed, 0 insertions, 224 deletions
diff --git a/scss/uikit/components/tile.scss b/scss/uikit/components/tile.scss deleted file mode 100644 index 3a364bfb..00000000 --- a/scss/uikit/components/tile.scss +++ /dev/null @@ -1,224 +0,0 @@ -// Name: Tile -// Description: Component to create tiled boxes -// -// Component: `uk-tile` -// -// Modifiers: `uk-tile-xsmall` -// `uk-tile-small` -// `uk-tile-large` -// `uk-tile-xlarge` -// `uk-tile-default` -// `uk-tile-muted` -// `uk-tile-primary` -// `uk-tile-secondary` -// -// States: `uk-preserve-color` -// -// ======================================================================== - - -// Variables -// ======================================================================== - -$tile-padding-horizontal: 15px !default; -$tile-padding-horizontal-s: $global-gutter !default; -$tile-padding-horizontal-m: $global-medium-gutter !default; -$tile-padding-vertical: $global-medium-margin !default; -$tile-padding-vertical-m: $global-large-margin !default; - -$tile-xsmall-padding-vertical: $global-margin !default; - -$tile-small-padding-vertical: $global-medium-margin !default; - -$tile-large-padding-vertical: $global-large-margin !default; -$tile-large-padding-vertical-m: $global-xlarge-margin !default; - -$tile-xlarge-padding-vertical: $global-xlarge-margin !default; -$tile-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; - -$tile-default-background: $global-background !default; - -$tile-muted-background: $global-muted-background !default; - -$tile-primary-background: $global-primary-background !default; -$tile-primary-color-mode: light !default; - -$tile-secondary-background: $global-secondary-background !default; -$tile-secondary-color-mode: light !default; - - -/* ======================================================================== - Component: Tile - ========================================================================== */ - -.uk-tile { - position: relative; - box-sizing: border-box; - padding-left: $tile-padding-horizontal; - padding-right: $tile-padding-horizontal; - padding-top: $tile-padding-vertical; - padding-bottom: $tile-padding-vertical; - @if(mixin-exists(hook-tile)) {@include hook-tile();} -} - -/* Phone landscape and bigger */ -@media (min-width: $breakpoint-small) { - - .uk-tile { - padding-left: $tile-padding-horizontal-s; - padding-right: $tile-padding-horizontal-s; - } - -} - -/* Tablet landscape and bigger */ -@media (min-width: $breakpoint-medium) { - - .uk-tile { - padding-left: $tile-padding-horizontal-m; - padding-right: $tile-padding-horizontal-m; - padding-top: $tile-padding-vertical-m; - padding-bottom: $tile-padding-vertical-m; - } - -} - -/* - * Micro clearfix - */ - -.uk-tile::before, -.uk-tile::after { - content: ""; - display: table; -} - -.uk-tile::after { clear: both; } - -/* - * Remove margin from the last-child - */ - -.uk-tile > :last-child { margin-bottom: 0; } - - -/* Size modifiers - ========================================================================== */ - -/* - * XSmall - */ - -.uk-tile-xsmall { - padding-top: $tile-xsmall-padding-vertical; - padding-bottom: $tile-xsmall-padding-vertical; -} - -/* - * Small - */ - -.uk-tile-small { - padding-top: $tile-small-padding-vertical; - padding-bottom: $tile-small-padding-vertical; -} - -/* - * Large - */ - -.uk-tile-large { - padding-top: $tile-large-padding-vertical; - padding-bottom: $tile-large-padding-vertical; -} - -/* Tablet landscape and bigger */ -@media (min-width: $breakpoint-medium) { - - .uk-tile-large { - padding-top: $tile-large-padding-vertical-m; - padding-bottom: $tile-large-padding-vertical-m; - } - -} - - -/* - * XLarge - */ - -.uk-tile-xlarge { - padding-top: $tile-xlarge-padding-vertical; - padding-bottom: $tile-xlarge-padding-vertical; -} - -/* Tablet landscape and bigger */ -@media (min-width: $breakpoint-medium) { - - .uk-tile-xlarge { - padding-top: $tile-xlarge-padding-vertical-m; - padding-bottom: $tile-xlarge-padding-vertical-m; - } - -} - - -/* Style modifiers - ========================================================================== */ - -/* - * Default - */ - -.uk-tile-default { - background: $tile-default-background; - @if(mixin-exists(hook-tile-default)) {@include hook-tile-default();} -} - -/* - * Muted - */ - -.uk-tile-muted { - background: $tile-muted-background; - @if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();} -} - -/* - * Primary - */ - -.uk-tile-primary { - background: $tile-primary-background; - @if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();} -} - -// Color Mode -@if ( $tile-primary-color-mode == light ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} } -@if ( $tile-primary-color-mode == dark ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } - -/* - * Secondary - */ - -.uk-tile-secondary { - background: $tile-secondary-background; - @if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();} -} - -// Color Mode -@if ( $tile-secondary-color-mode == light ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} } -@if ( $tile-secondary-color-mode == dark ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } - - -// Hooks -// ======================================================================== - -@if(mixin-exists(hook-tile-misc)) {@include hook-tile-misc();} - -// @mixin hook-tile(){} -// @mixin hook-tile-default(){} -// @mixin hook-tile-muted(){} -// @mixin hook-tile-primary(){} -// @mixin hook-tile-secondary(){} -// @mixin hook-tile-misc(){} |