patterns/_flag.scss at master · ViaductCSS/patterns · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// =============================
// Enable Private Variables
// =============================

$flag-pattern-enable:          true !default;
$flag-pattern-reversed-enable: true !default;

// =============================
// Core Flag Pattern Styling
// =============================

//
// The flag pattern similar is to the media pattern, however it utilises
// `display: table[-cell];` to give us control over the vertical
// alignments of the text and image.
// Find out more information regarding this pattern: http://www.csswizardry.com/2013/05/the-flag-object
//
// Flag Pattern Default.
//
// Note - Reversed Version is the diagram below but the elements are in opposite positions.
//
//    Flag Sidebar               Flag Body
//
//                          ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//                          ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~ ~ ~ ~ ~ ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~         ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~         ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~         ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~ ~ ~ ~ ~ ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//                          ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//                          ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//
//
//
// Flag Pattern Bottom Modifier.
//
// Note - Reversed Version is the diagram below but the elements are in opposite positions.
//
//    Flag Sidebar              Flag Body
//
//                          ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//                          ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~ ~ ~ ~ ~ ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~         ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~         ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~         ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//    ~ ~ ~ ~ ~ ~           ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//

@if ($flag-pattern-enable) {

    .flag,
    %flag {
      display: table;

      // .flag__sidebar
      // .flag__body
      // .flag__sidebar--bottom
      // .flag__body--bottom

      &__sidebar,
      &__body,
      &__sidebar--bottom,
      &__body--bottom {
        display: table-cell;
      }

      // .flag__sidebar
      // .flag__body

      &__sidebar,
      &__body {
        @extend %valign;
      }

      // .flag__sidebar--bottom
      // .flag__body--bottom

      &__sidebar--bottom,
      &__body--bottom {
          vertical-align: bottom;
      }

    }

    [class*="flag__sidebar"] img {
        display: block;
        max-width: none;
    }

}

// Set Direction to reverse the layout of the pattern elements.

@if ($flag-pattern-enable and $flag-pattern-reversed-enable) {
    .flag--rev {
        @extend %flag;
        direction: rtl;

        * {
            direction: ltr;
        }

    }
}