assets/main/sass/components/_features.scss

   1 ///
   2 /// Editorial by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Features */
   8
   9         .features {
  10                 $gutter: _size(gutter);
  11
  12                 @include vendor('display', 'flex');
  13                 @include vendor('flex-wrap', 'wrap');
  14                 margin: 0 0 _size(element-margin) ($gutter * -1);
  15                 width: calc(100% + #{$gutter});
  16
  17                 article {
  18                         @include vendor('align-items', 'center');
  19                         @include vendor('display', 'flex');
  20                         margin: 0 0 $gutter $gutter;
  21                         position: relative;
  22                         width: calc(50% - #{$gutter});
  23
  24                         &:nth-child(2n - 1) {
  25                                 margin-right: ($gutter * 0.5);
  26                         }
  27
  28                         &:nth-child(2n) {
  29                                 margin-left: ($gutter * 0.5);
  30                         }
  31
  32                         &:nth-last-child(1),
  33                         &:nth-last-child(2) {
  34                                 margin-bottom: 0;
  35                         }
  36
  37                         .icon {
  38                                 @include vendor('flex-grow', '0');
  39                                 @include vendor('flex-shrink', '0');
  40                                 display: block;
  41                                 height: 10em;
  42                                 line-height: 10em;
  43                                 margin: 0 _size(element-margin) 0 0;
  44                                 text-align: center;
  45                                 width: 10em;
  46
  47                                 &:before {
  48                                         color: _palette(accent);
  49                                         font-size: 2.75rem;
  50                                         position: relative;
  51                                         top: 0.05em;
  52                                 }
  53
  54                                 &:after {
  55                                         @include vendor('transform', 'rotate(45deg)');
  56                                         border-radius: 0.25rem;
  57                                         border: solid 2px _palette(border);
  58                                         content: '';
  59                                         display: block;
  60                                         height: 7em;
  61                                         left: 50%;
  62                                         margin: -3.5em 0 0 -3.5em;
  63                                         position: absolute;
  64                                         top: 50%;
  65                                         width: 7em;
  66                                 }
  67                         }
  68
  69                         .content {
  70                                 @include vendor('flex-grow', '1');
  71                                 @include vendor('flex-shrink', '1');
  72                                 width: 100%;
  73
  74                                 > :last-child {
  75                                         margin-bottom: 0;
  76                                 }
  77                         }
  78                 }
  79
  80                 @include breakpoint('<=medium') {
  81                         margin: 0 0 _size(element-margin) 0;
  82                         width: 100%;
  83
  84                         article {
  85                                 margin: 0 0 $gutter 0;
  86                                 width: 100%;
  87
  88                                 &:nth-child(2n - 1) {
  89                                         margin-right: 0;
  90                                 }
  91
  92                                 &:nth-child(2n) {
  93                                         margin-left: 0;
  94                                 }
  95
  96                                 &:nth-last-child(1),
  97                                 &:nth-last-child(2) {
  98                                         margin-bottom: $gutter;
  99                                 }
 100
 101                                 &:last-child {
 102                                         margin-bottom: 0;
 103                                 }
 104
 105                                 .icon {
 106                                         height: 8em;
 107                                         line-height: 8em;
 108                                         width: 8em;
 109
 110                                         &:before {
 111                                                 font-size: 2.25rem;
 112                                         }
 113
 114                                         &:after {
 115                                                 height: 6em;
 116                                                 margin: -3em 0 0 -3em;
 117                                                 width: 6em;
 118                                         }
 119                                 }
 120                         }
 121                 }
 122
 123                 @include breakpoint('<=xsmall') {
 124                         article {
 125                                 @include vendor('flex-direction', 'column');
 126                                 @include vendor('align-items', 'flex-start');
 127
 128                                 .icon {
 129                                         height: 6em;
 130                                         line-height: 6em;
 131                                         margin: 0 0 (_size(element-margin) * 0.75) 0;
 132                                         width: 6em;
 133
 134                                         &:before {
 135                                                 font-size: 1.5rem;
 136                                         }
 137
 138                                         &:after {
 139                                                 height: 4em;
 140                                                 margin: -2em 0 0 -2em;
 141                                                 width: 4em;
 142                                         }
 143                                 }
 144                         }
 145                 }
 146
 147                 @include breakpoint('<=xsmall') {
 148                         article {
 149                                 .icon {
 150                                         &:before {
 151                                                 font-size: 1.25rem;
 152                                         }
 153                                 }
 154                         }
 155                 }
 156         }