aboutsummaryrefslogtreecommitdiffstats
path: root/scss/uikit/components/width.scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss/uikit/components/width.scss')
-rw-r--r--scss/uikit/components/width.scss397
1 files changed, 0 insertions, 397 deletions
diff --git a/scss/uikit/components/width.scss b/scss/uikit/components/width.scss
deleted file mode 100644
index b6941321..00000000
--- a/scss/uikit/components/width.scss
+++ /dev/null
@@ -1,397 +0,0 @@
-// Name: Width
-// Description: Utilities for widths
-//
-// Component: `uk-child-width-*`
-// `uk-width-*`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-$width-small-width: 150px !default;
-$width-medium-width: 300px !default;
-$width-large-width: 450px !default;
-$width-xlarge-width: 600px !default;
-$width-xxlarge-width: 750px !default;
-
-
-/* ========================================================================
- Component: Width
- ========================================================================== */
-
-
-/* Equal child widths
- ========================================================================== */
-
-[class*='uk-child-width'] > * {
- box-sizing: border-box;
- width: 100%;
-}
-
-.uk-child-width-1-2 > * { width: 50%; }
-.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); }
-.uk-child-width-1-4 > * { width: 25%; }
-.uk-child-width-1-5 > * { width: 20%; }
-.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); }
-
-.uk-child-width-auto > * { width: auto; }
-
-/*
- * Instead of 0, 1px is needed to make cell wrap into next row if predecessor is 100% wide
- * and the grid gutter is 0 pixels wide
- */
-
-.uk-child-width-expand > * { width: 1px; }
-
-/*
- * 1. Make `width: 1px` work, because according to the spec flex items won’t shrink
- * below their minimum content size. To change this, set the min-width.
- * Only needed for Firefox. All other browsers ignore this.
- *
- * 2. `width` is ignored when wrapping flex items in Safari
- * https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
- */
-
-.uk-child-width-expand > :not([class*='uk-width']) {
- flex: 1;
- /* 1 */
- min-width: 0;
- /* 2 */
- flex-basis: 1px;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-
- .uk-child-width-1-1\@s > * { width: 100%; }
- .uk-child-width-1-2\@s > * { width: 50%; }
- .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-child-width-1-4\@s > * { width: 25%; }
- .uk-child-width-1-5\@s > * { width: 20%; }
- .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }
-
- .uk-child-width-auto\@s > * { width: auto; }
- .uk-child-width-expand\@s > * { width: 1px; }
-
- .uk-child-width-expand\@s > :not([class*='uk-width']) {
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
- .uk-child-width-1-1\@m > * { width: 100%; }
- .uk-child-width-1-2\@m > * { width: 50%; }
- .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-child-width-1-4\@m > * { width: 25%; }
- .uk-child-width-1-5\@m > * { width: 20%; }
- .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }
-
- .uk-child-width-auto\@m > * { width: auto; }
- .uk-child-width-expand\@m > * { width: 1px; }
-
- .uk-child-width-expand\@m > :not([class*='uk-width']) {
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-
- .uk-child-width-1-1\@l > * { width: 100%; }
- .uk-child-width-1-2\@l > * { width: 50%; }
- .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-child-width-1-4\@l > * { width: 25%; }
- .uk-child-width-1-5\@l > * { width: 20%; }
- .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }
-
- .uk-child-width-auto\@l > * { width: auto; }
- .uk-child-width-expand\@l > * { width: 1px; }
-
- .uk-child-width-expand\@l > :not([class*='uk-width']) {
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-/* Large screen and bigger */
-@media (min-width: $breakpoint-xlarge) {
-
- .uk-child-width-1-1\@xl > * { width: 100%; }
- .uk-child-width-1-2\@xl > * { width: 50%; }
- .uk-child-width-1-3\@xl > * { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-child-width-1-4\@xl > * { width: 25%; }
- .uk-child-width-1-5\@xl > * { width: 20%; }
- .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); }
-
- .uk-child-width-auto\@xl > * { width: auto; }
- .uk-child-width-expand\@xl > * { width: 1px; }
-
- .uk-child-width-expand\@xl > :not([class*='uk-width']) {
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-
-/* Single Widths
- ========================================================================== */
-
-/*
- * 1. `max-width` is needed for the pixel-based classes
- */
-
-[class*='uk-width'] {
- box-sizing: border-box;
- width: 100%;
- /* 1 */
- max-width: 100%;
-}
-
-/* Halves */
-.uk-width-1-2 { width: 50%; }
-
-/* Thirds */
-.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); }
-.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); }
-
-/* Quarters */
-.uk-width-1-4 { width: 25%; }
-.uk-width-3-4 { width: 75%; }
-
-/* Fifths */
-.uk-width-1-5 { width: 20%; }
-.uk-width-2-5 { width: 40%; }
-.uk-width-3-5 { width: 60%; }
-.uk-width-4-5 { width: 80%; }
-
-/* Sixths */
-.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); }
-.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); }
-
-/* Pixel */
-.uk-width-small { width: $width-small-width; }
-.uk-width-medium { width: $width-medium-width; }
-.uk-width-large { width: $width-large-width; }
-.uk-width-xlarge { width: $width-xlarge-width; }
-.uk-width-xxlarge { width: $width-xxlarge-width; }
-
-/* Auto */
-.uk-width-auto { width: auto; }
-
-/* Expand */
-.uk-width-expand {
- width: 1px;
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-
- /* Whole */
- .uk-width-1-1\@s { width: 100%; }
-
- /* Halves */
- .uk-width-1-2\@s { width: 50%; }
-
- /* Thirds */
- .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); }
-
- /* Quarters */
- .uk-width-1-4\@s { width: 25%; }
- .uk-width-3-4\@s { width: 75%; }
-
- /* Fifths */
- .uk-width-1-5\@s { width: 20%; }
- .uk-width-2-5\@s { width: 40%; }
- .uk-width-3-5\@s { width: 60%; }
- .uk-width-4-5\@s { width: 80%; }
-
- /* Sixths */
- .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); }
- .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); }
-
- /* Pixel */
- .uk-width-small\@s { width: $width-small-width; }
- .uk-width-medium\@s { width: $width-medium-width; }
- .uk-width-large\@s { width: $width-large-width; }
- .uk-width-xlarge\@s { width: $width-xlarge-width; }
- .uk-width-xxlarge\@s { width: $width-xxlarge-width; }
-
- /* Auto */
- .uk-width-auto\@s { width: auto; }
-
- /* Expand */
- .uk-width-expand\@s {
- width: 1px;
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
- /* Whole */
- .uk-width-1-1\@m { width: 100%; }
-
- /* Halves */
- .uk-width-1-2\@m { width: 50%; }
-
- /* Thirds */
- .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); }
-
- /* Quarters */
- .uk-width-1-4\@m { width: 25%; }
- .uk-width-3-4\@m { width: 75%; }
-
- /* Fifths */
- .uk-width-1-5\@m { width: 20%; }
- .uk-width-2-5\@m { width: 40%; }
- .uk-width-3-5\@m { width: 60%; }
- .uk-width-4-5\@m { width: 80%; }
-
- /* Sixths */
- .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); }
- .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); }
-
- /* Pixel */
- .uk-width-small\@m { width: $width-small-width; }
- .uk-width-medium\@m { width: $width-medium-width; }
- .uk-width-large\@m { width: $width-large-width; }
- .uk-width-xlarge\@m { width: $width-xlarge-width; }
- .uk-width-xxlarge\@m { width: $width-xxlarge-width; }
-
- /* Auto */
- .uk-width-auto\@m { width: auto; }
-
- /* Expand */
- .uk-width-expand\@m {
- width: 1px;
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-
- /* Whole */
- .uk-width-1-1\@l { width: 100%; }
-
- /* Halves */
- .uk-width-1-2\@l { width: 50%; }
-
- /* Thirds */
- .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); }
-
- /* Quarters */
- .uk-width-1-4\@l { width: 25%; }
- .uk-width-3-4\@l { width: 75%; }
-
- /* Fifths */
- .uk-width-1-5\@l { width: 20%; }
- .uk-width-2-5\@l { width: 40%; }
- .uk-width-3-5\@l { width: 60%; }
- .uk-width-4-5\@l { width: 80%; }
-
- /* Sixths */
- .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); }
- .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); }
-
- /* Pixel */
- .uk-width-small\@l { width: $width-small-width; }
- .uk-width-medium\@l { width: $width-medium-width; }
- .uk-width-large\@l { width: $width-large-width; }
- .uk-width-xlarge\@l { width: $width-xlarge-width; }
- .uk-width-xxlarge\@l { width: $width-xxlarge-width; }
-
- /* Auto */
- .uk-width-auto\@l { width: auto; }
-
- /* Expand */
- .uk-width-expand\@l {
- width: 1px;
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-/* Large screen and bigger */
-@media (min-width: $breakpoint-xlarge) {
-
- /* Whole */
- .uk-width-1-1\@xl { width: 100%; }
-
- /* Halves */
- .uk-width-1-2\@xl { width: 50%; }
-
- /* Thirds */
- .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); }
- .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); }
-
- /* Quarters */
- .uk-width-1-4\@xl { width: 25%; }
- .uk-width-3-4\@xl { width: 75%; }
-
- /* Fifths */
- .uk-width-1-5\@xl { width: 20%; }
- .uk-width-2-5\@xl { width: 40%; }
- .uk-width-3-5\@xl { width: 60%; }
- .uk-width-4-5\@xl { width: 80%; }
-
- /* Sixths */
- .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); }
- .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); }
-
- /* Pixel */
- .uk-width-small\@xl { width: $width-small-width; }
- .uk-width-medium\@xl { width: $width-medium-width; }
- .uk-width-large\@xl { width: $width-large-width; }
- .uk-width-xlarge\@xl { width: $width-xlarge-width; }
- .uk-width-xxlarge\@xl { width: $width-xxlarge-width; }
-
- /* Auto */
- .uk-width-auto\@xl { width: auto; }
-
- /* Expand */
- .uk-width-expand\@xl {
- width: 1px;
- flex: 1;
- min-width: 0;
- flex-basis: 1px;
- }
-
-}
-
-
-// Hooks
-// ========================================================================
-
-@if(mixin-exists(hook-width-misc)) {@include hook-width-misc();}
-
-// @mixin hook-width-misc(){}
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-01 23:12:10 +0000