@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/card.scss

@@ -1,534 +0,0 @@
-// Name:            Card
-// Description:     Component to create boxed content containers
-//
-// Component:       `uk-card`
-//
-// Sub-objects:     `uk-card-body`
-//                  `uk-card-header`
-//                  `uk-card-footer`
-//                  `uk-card-media-*`
-//                  `uk-card-title`
-//                  `uk-card-badge`
-//
-// Modifiers:       `uk-card-hover`
-//                  `uk-card-default`
-//                  `uk-card-primary`
-//                  `uk-card-secondary`
-//                  `uk-card-tertiary`
-//                  `uk-card-small`
-//                  `uk-card-large`
-//
-// Uses:            `uk-grid-stack`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Card
- ========================================================================== */
-
-.uk-card {
-    box-sizing: border-box;
-    position: relative;
-    @if meta.mixin-exists('hook-card') {
-        @include hook-card;
-    }
-}
-
-
-/* Sections
- ========================================================================== */
-
-.uk-card-body {
-    display: flow-root;
-    padding: var(--card-body-padding-vertical) var(--card-body-padding-horizontal);
-    @if meta.mixin-exists('hook-card-body') {
-        @include hook-card-body;
-    }
-}
-
-.uk-card-header {
-    display: flow-root;
-    padding: var(--card-header-padding-vertical) var(--card-header-padding-horizontal);
-    @if meta.mixin-exists('hook-card-header') {
-        @include hook-card-header;
-    }
-}
-
-.uk-card-footer {
-    display: flow-root;
-    padding: var(--card-footer-padding-vertical) var(--card-footer-padding-horizontal);
-    @if meta.mixin-exists('hook-card-footer') {
-        @include hook-card-footer;
-    }
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-card-body {
-        padding: var(--card-body-padding-vertical-l) var(--card-body-padding-horizontal-l);
-    }
-
-    .uk-card-header {
-        padding: var(--card-header-padding-vertical-l) var(--card-header-padding-horizontal-l);
-    }
-
-    .uk-card-footer {
-        padding: var(--card-footer-padding-vertical-l) var(--card-footer-padding-horizontal-l);
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-card-body > :last-child,
-.uk-card-header > :last-child,
-.uk-card-footer > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Media
- ========================================================================== */
-
-/*
- * Reserved alignment modifier to style the media element, e.g. with `border-radius`
- * Implemented by the theme
- */
-
-[class*='uk-card-media'] {
-    @if meta.mixin-exists('hook-card-media') {
-        @include hook-card-media;
-    }
-}
-
-.uk-card-media-top,
-.uk-grid-stack > .uk-card-media-left,
-.uk-grid-stack > .uk-card-media-right {
-    @if meta.mixin-exists('hook-card-media-top') {
-        @include hook-card-media-top;
-    }
-}
-
-.uk-card-media-bottom {
-    @if meta.mixin-exists('hook-card-media-bottom') {
-        @include hook-card-media-bottom;
-    }
-}
-
-:not(.uk-grid-stack) > .uk-card-media-left {
-    @if meta.mixin-exists('hook-card-media-left') {
-        @include hook-card-media-left;
-    }
-}
-
-:not(.uk-grid-stack) > .uk-card-media-right {
-    @if meta.mixin-exists('hook-card-media-right') {
-        @include hook-card-media-right;
-    }
-}
-
-
-/* Title
- ========================================================================== */
-
-.uk-card-title {
-    font-size: var(--card-title-font-size);
-    line-height: var(--card-title-line-height);
-    @if meta.mixin-exists('hook-card-title') {
-        @include hook-card-title;
-    }
-}
-
-
-/* Badge
- ========================================================================== */
-
-/*
- * 1. Position
- * 2. Size
- * 3. Style
- * 4. Center child vertically
- */
-
-.uk-card-badge {
-    align-items: center; /* 4 */
-    background: var(--card-badge-background); /* 3 */
-    color: var(--card-badge-color); /* 3 */
-    display: flex; /* 4 */
-    font-size: var(--card-badge-font-size); /* 3 */
-    height: var(--card-badge-height); /* 2 */
-    justify-content: center; /* 4 */
-    line-height: 0; /* 4 */
-    padding: 0 var(--card-badge-padding-horizontal);
-    position: absolute; /* 1 */
-    right: var(--card-badge-right); /* 1 */
-    top: var(--card-badge-top); /* 1 */
-    z-index: 1; /* 1 */
-    @if meta.mixin-exists('hook-card-badge') {
-        @include hook-card-badge;
-    }
-}
-
-/*
- * Remove margin from adjacent element
- */
-
-.uk-card-badge:first-child + * {
-    margin-top: 0;
-}
-
-
-/* Hover modifier
- ========================================================================== */
-
-.uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-tertiary):hover {
-    background: var(--card-hover-background);
-    @if meta.mixin-exists('hook-card-hover') {
-        @include hook-card-hover;
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- * Note: Header and Footer are only implemented for the default style
- */
-
-.uk-card-default {
-    --uk-inverse: #{$card-default-color-mode};
-    background: var(--card-default-background);
-    color: var(--card-default-color);
-    @if meta.mixin-exists('hook-card-default') {
-        @include hook-card-default;
-    }
-}
-
-.uk-card-default .uk-card-title {
-    color: var(--card-default-title-color);
-    @if meta.mixin-exists('hook-card-default-title') {
-        @include hook-card-default-title;
-    }
-}
-
-.uk-card-default.uk-card-hover:hover {
-    background-color: var(--card-default-hover-background);
-    @if meta.mixin-exists('hook-card-default-hover') {
-        @include hook-card-default-hover;
-    }
-}
-
-.uk-card-default .uk-card-header {
-    @if meta.mixin-exists('hook-card-default-header') {
-        @include hook-card-default-header;
-    }
-}
-
-.uk-card-default .uk-card-footer {
-    @if meta.mixin-exists('hook-card-default-footer') {
-        @include hook-card-default-footer;
-    }
-}
-
-// Color Mode
-@if $card-default-color-mode == light {
-    .uk-card-default.uk-card-body {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-default-color-mode == light {
-    .uk-card-default > :not([class*='uk-card-media']) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-default-color-mode == dark {
-    .uk-card-default.uk-card-body {
-        @extend .uk-dark !optional;
-    }
-}
-
-@if $card-default-color-mode == dark {
-    .uk-card-default > :not([class*='uk-card-media']) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-card-primary {
-    --uk-inverse: #{$card-primary-color-mode};
-    background: var(--card-primary-background);
-    color: var(--card-primary-color);
-    @if meta.mixin-exists('hook-card-primary') {
-        @include hook-card-primary;
-    }
-}
-
-.uk-card-primary .uk-card-title {
-    color: var(--card-primary-title-color);
-    @if meta.mixin-exists('hook-card-primary-title') {
-        @include hook-card-primary-title;
-    }
-}
-
-.uk-card-primary.uk-card-hover:hover {
-    background-color: var(--card-primary-hover-background);
-    @if meta.mixin-exists('hook-card-primary-hover') {
-        @include hook-card-primary-hover;
-    }
-}
-
-// Color Mode
-@if $card-primary-color-mode == light {
-    .uk-card-primary.uk-card-body {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-primary-color-mode == light {
-    .uk-card-primary > :not([class*='uk-card-media']) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-primary-color-mode == dark {
-    .uk-card-primary.uk-card-body {
-        @extend .uk-dark !optional;
-    }
-}
-
-@if $card-primary-color-mode == dark {
-    .uk-card-primary > :not([class*='uk-card-media']) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Secondary
- */
-
-.uk-card-secondary {
-    --uk-inverse: #{$card-secondary-color-mode};
-    background: var(--card-secondary-background);
-    color: var(--card-secondary-color);
-    @if meta.mixin-exists('hook-card-secondary') {
-        @include hook-card-secondary;
-    }
-}
-
-.uk-card-secondary .uk-card-title {
-    color: var(--card-secondary-title-color);
-    @if meta.mixin-exists('hook-card-secondary-title') {
-        @include hook-card-secondary-title;
-    }
-}
-
-.uk-card-secondary.uk-card-hover:hover {
-    background-color: var(--card-secondary-hover-background);
-    @if meta.mixin-exists('hook-card-secondary-hover') {
-        @include hook-card-secondary-hover;
-    }
-}
-
-// Color Mode
-@if $card-secondary-color-mode == light {
-    .uk-card-secondary.uk-card-body {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-secondary-color-mode == light {
-    .uk-card-secondary > :not([class*='uk-card-media']) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-secondary-color-mode == dark {
-    .uk-card-secondary.uk-card-body {
-        @extend .uk-dark !optional;
-    }
-}
-
-@if $card-secondary-color-mode == dark {
-    .uk-card-secondary > :not([class*='uk-card-media']) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Tertiary
- */
-
-.uk-card-tertiary {
-    --uk-inverse: #{$card-tertiary-color-mode};
-    background: var(--card-tertiary-background);
-    color: var(--card-tertiary-color);
-    @if meta.mixin-exists('hook-card-tertiary') {
-        @include hook-card-tertiary;
-    }
-}
-
-.uk-card-tertiary .uk-card-title {
-    color: var(--card-tertiary-title-color);
-    @if meta.mixin-exists('hook-card-tertiary-title') {
-        @include hook-card-tertiary-title;
-    }
-}
-
-.uk-card-tertiary.uk-card-hover:hover {
-    background-color: var(--card-tertiary-hover-background);
-    @if meta.mixin-exists('hook-card-tertiary-hover') {
-        @include hook-card-tertiary-hover;
-    }
-}
-
-// Color Mode
-@if $card-tertiary-color-mode == light {
-    .uk-card-tertiary.uk-card-body {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-tertiary-color-mode == light {
-    .uk-card-tertiary > :not([class*='uk-card-media']) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $card-tertiary-color-mode == dark {
-    .uk-card-tertiary.uk-card-body {
-        @extend .uk-dark !optional;
-    }
-}
-
-@if $card-tertiary-color-mode == dark {
-    .uk-card-tertiary > :not([class*='uk-card-media']) {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-/*
- * Small
- */
-
-.uk-card-small.uk-card-body,
-.uk-card-small .uk-card-body {
-    padding: var(--card-small-body-padding-vertical) var(--card-small-body-padding-horizontal);
-}
-
-.uk-card-small .uk-card-header {
-    padding: var(--card-small-header-padding-vertical) var(--card-small-header-padding-horizontal);
-}
-
-.uk-card-small .uk-card-footer {
-    padding: var(--card-small-footer-padding-vertical) var(--card-small-footer-padding-horizontal);
-}
-
-/*
- * Large
- */
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-card-large.uk-card-body,
-    .uk-card-large .uk-card-body {
-        padding: var(--card-large-body-padding-vertical-l) var(--card-large-body-padding-horizontal-l);
-    }
-
-    .uk-card-large .uk-card-header {
-        padding: var(--card-large-header-padding-vertical-l) var(--card-large-header-padding-horizontal-l);
-    }
-
-    .uk-card-large .uk-card-footer {
-        padding: var(--card-large-footer-padding-vertical-l) var(--card-large-footer-padding-horizontal-l);
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-card-misc') {
-    @include hook-card-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --card-body-padding-horizontal: var(--global-gutter);
-    --card-body-padding-vertical: var(--global-gutter);
-    --card-body-padding-horizontal-l: var(--global-medium-gutter);
-    --card-body-padding-vertical-l: var(--global-medium-gutter);
-    --card-header-padding-horizontal: var(--global-gutter);
-    --card-header-padding-vertical: #{$card-header-padding-vertical};
-    --card-header-padding-horizontal-l: var(--global-medium-gutter);
-    --card-header-padding-vertical-l: #{$card-header-padding-vertical-l};
-    --card-footer-padding-horizontal: var(--global-gutter);
-    --card-footer-padding-vertical: #{$card-footer-padding-vertical};
-    --card-footer-padding-horizontal-l: var(--global-medium-gutter);
-    --card-footer-padding-vertical-l: #{$card-footer-padding-vertical-l};
-    --card-title-font-size: var(--global-large-font-size);
-    --card-title-line-height: #{$card-title-line-height};
-    --card-badge-top: var(--global-small-gutter);
-    --card-badge-right: var(--card-badge-top);
-    --card-badge-height: var(--badge-size);
-    --card-badge-padding-horizontal: var(--badge-padding-horizontal);
-    --card-badge-background: var(--badge-background);
-    --card-badge-color: var(--badge-color);
-    --card-badge-font-size: var(--badge-font-size);
-    --card-hover-background: var(--global-muted-background);
-    --card-default-background: var(--global-muted-background);
-    --card-default-color: var(--global-color);
-    --card-default-title-color: var(--global-emphasis-color);
-    --card-default-hover-background: #{$card-default-hover-background};
-    --card-primary-background: var(--global-primary-background);
-    --card-primary-color: var(--global-inverse-color);
-    --card-primary-title-color: var(--card-primary-color);
-    --card-primary-hover-background: #{$card-primary-hover-background};
-    --card-secondary-background: var(--global-secondary-background);
-    --card-secondary-color: var(--global-inverse-color);
-    --card-secondary-title-color: var(--card-secondary-color);
-    --card-secondary-hover-background: #{$card-secondary-hover-background};
-    --card-tertiary-background: var(--global-tertiary-background);
-    --card-tertiary-color: var(--global-inverse-color);
-    --card-tertiary-title-color: var(--card-tertiary-color);
-    --card-tertiary-hover-background: #{$card-tertiary-hover-background};
-    --card-small-body-padding-horizontal: var(--global-margin);
-    --card-small-body-padding-vertical: var(--global-margin);
-    --card-small-header-padding-horizontal: var(--global-margin);
-    --card-small-header-padding-vertical: #{$card-small-header-padding-vertical};
-    --card-small-footer-padding-horizontal: var(--global-margin);
-    --card-small-footer-padding-vertical: #{$card-small-footer-padding-vertical};
-    --card-large-body-padding-horizontal-l: var(--global-large-gutter);
-    --card-large-body-padding-vertical-l: var(--global-large-gutter);
-    --card-large-header-padding-horizontal-l: var(--global-large-gutter);
-    --card-large-header-padding-vertical-l: #{$card-large-header-padding-vertical-l};
-    --card-large-footer-padding-horizontal-l: var(--global-large-gutter);
-    --card-large-footer-padding-vertical-l: #{$card-large-footer-padding-vertical-l};
-
-    // Inverse
-    --inverse-card-badge-background: var(--inverse-global-primary-background);
-    --inverse-card-badge-color: var(--inverse-global-inverse-color);
-}