/*------------------------------------*\ #FLAG \*------------------------------------*/ /** * The flag object is a design pattern similar to the media object, however it * utilises `display: table[-cell];` to give us control over the vertical * alignments of the text and image. csswizardry.com/2013/05/the-flag-object */ // Predefine the variables below in order to alter and enable specific features. $inuit-flag-namespace: $inuit-namespace !default; $inuit-flag-gutter: $inuit-base-spacing-unit !default; $inuit-flag-gutter--small: halve($inuit-flag-gutter) !default; $inuit-flag-gutter--large: double($inuit-flag-gutter) !default; $inuit-enable-flag--small: false !default; $inuit-enable-flag--large: false !default; $inuit-enable-flag--rev: false !default; $inuit-enable-flag--flush: false !default; $inuit-enable-flag--top: false !default; $inuit-enable-flag--bottom: false !default; $inuit-enable-flag--responsive: false !default; $inuit-flag-collapse-at: 720px !default; /** * 1. Allows us to control vertical alignments * 2. Force the object to be the full width of its parent. Combined with [1], * this makes the object behave in a quasi-`display: block;` manner. */ .#{$inuit-flag-namespace}flag, %#{$inuit-flag-namespace}flag { display: table; /* [1] */ width: 100%; /* [2] */ } /** * Items within a flag object. There should only ever be one of each. * * 1. Default to aligning content to their middles. */ .#{$inuit-flag-namespace}flag__img, %#{$inuit-flag-namespace}flag__img, .#{$inuit-flag-namespace}flag__body, %#{$inuit-flag-namespace}flag__body { display: table-cell; vertical-align: middle; /* [1] */ } /** * Flag images have a space between them and the body of the object. */ .#{$inuit-flag-namespace}flag__img, %#{$inuit-flag-namespace}flag__img { padding-right: $inuit-flag-gutter; > img { display: block; max-width: none; } } /** * The container for the main content of the flag object. * * 1. Forces the `.flag__body` to take up all remaining space. */ .#{$inuit-flag-namespace}flag__body, %#{$inuit-flag-namespace}flag__body { width: 100%; /* [1] */ &, > :last-child { margin-bottom: 0; } } @if ($inuit-enable-flag--small == true) { /** * Small flags. */ .#{$inuit-flag-namespace}flag--small, %#{$inuit-flag-namespace}flag--small { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: $inuit-flag-gutter--small; } @if ($inuit-enable-flag--rev == true) { /** * Small reversed flags. */ &.#{$inuit-flag-namespace}flag--rev, &%#{$inuit-flag-namespace}flag--rev { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: 0; padding-left: $inuit-flag-gutter--small; } } } } } @if ($inuit-enable-flag--large == true) { /** * Large flags. */ .#{$inuit-flag-namespace}flag--large, %#{$inuit-flag-namespace}flag--large { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: $inuit-flag-gutter--large; } @if ($inuit-enable-flag--rev == true) { /** * Large reversed flags. */ &.#{$inuit-flag-namespace}flag--rev, &%#{$inuit-flag-namespace}flag--rev { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: 0; padding-left: $inuit-flag-gutter--large; } } } } } @if ($inuit-enable-flag--rev == true) { /** * Reversed flag objects have their image-content to the right, and text-content * to the left. * * 1. Swap the rendered direction of the object… * 2. …and reset it. * 3. Reassign margins to the correct sides. */ .#{$inuit-flag-namespace}flag--rev, %#{$inuit-flag-namespace}flag--rev { direction: rtl; /* [1] */ > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img, > .#{$inuit-flag-namespace}flag__body, > %#{$inuit-flag-namespace}flag__body { direction: ltr; /* [2] */ } > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: 0; /* [3] */ padding-left: $inuit-flag-gutter; /* [3] */ } } } @if ($inuit-enable-flag--flush == true) { /** * Flush flag objects have no space between the image- and text-content. */ .#{$inuit-flag-namespace}flag--flush, %#{$inuit-flag-namespace}flag--flush { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: 0; padding-left: 0; } } } @if ($inuit-enable-flag--top == true) { /** * Vertically top aligned flag objects. */ .#{$inuit-flag-namespace}flag--top, %#{$inuit-flag-namespace}flag--top { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img, > .#{$inuit-flag-namespace}flag__body, > %#{$inuit-flag-namespace}flag__body { vertical-align: top; } } } @if ($inuit-enable-flag--bottom == true) { /** * Vertically bottom aligned flag objects. */ .#{$inuit-flag-namespace}flag--bottom, %#{$inuit-flag-namespace}flag--bottom { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img, > .#{$inuit-flag-namespace}flag__body, > %#{$inuit-flag-namespace}flag__body { vertical-align: bottom; } } } @if ($inuit-enable-flag--responsive == true) { /** * Responsive flag objects. * * There is a very pragmatic, simple implementation of a responsive flag * object, which simply places the text-content beneath the image-content. * * We use a `max-width` media query because: * * a) it is the least verbose method in terms of amount of code required. * b) the flag object’s default state is image-next-to-text, so its stacked * state is the exception, rather than the rule. */ @media screen and (max-width: $inuit-flag-collapse-at) { .#{$inuit-flag-namespace}flag--responsive, %#{$inuit-flag-namespace}flag--responsive { @if ($inuit-enable-flag--rev == true) { /** * Disable reversal of content because there is no concept of * ‘reversed’ in a stacked layout. */ direction: ltr; } &, > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img, > .#{$inuit-flag-namespace}flag__body, > %#{$inuit-flag-namespace}flag__body { display: block; } /** * Rework the spacings on regular flag objects. */ > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: 0; padding-left: 0; margin-bottom: $inuit-flag-gutter; } @if ($inuit-enable-flag--small == true) { /** * Small responsive flags. * * Take a little more heavy-handed approach to reworking * spacings on flags that are also small flags in their regular * state. */ &.#{$inuit-flag-namespace}flag--small, &%#{$inuit-flag-namespace}flag--small { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: 0; padding-left: 0; } } } @if ($inuit-enable-flag--large == true) { /** * Large responsive flags. * * Take a little more heavy-handed approach to reworking * spacings on flags that are also large flags in their regular * state. */ &.#{$inuit-flag-namespace}flag--large, &%#{$inuit-flag-namespace}flag--large { > .#{$inuit-flag-namespace}flag__img, > %#{$inuit-flag-namespace}flag__img { padding-right: 0; padding-left: 0; } } } } } }