utils/test/reporting/3rd_party/sass/components/_tiles.scss

   1 ///\r
   2 /// Phantom by HTML5 UP\r
   3 /// html5up.net | @ajlkn\r
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
   5 ///\r
   6 \r
   7 /* Tiles */\r
   8 \r
   9         .tiles {\r
  10                 $gutter: _size(gutter);\r
  11                 $duration: 0.5s;\r
  12                 $ease: 'ease';\r
  13 \r
  14                 @include vendor('display', 'flex');\r
  15                 @include vendor('flex-wrap', 'wrap');\r
  16                 postiion: relative;\r
  17                 margin: ($gutter * -1) 0 0 ($gutter * -1);\r
  18 \r
  19                 article {\r
  20                         @include vendor('transition', (\r
  21                                 'transform #{$duration} #{$ease}',\r
  22                                 'opacity #{$duration} #{$ease}'\r
  23                         ));\r
  24                         position: relative;\r
  25                         width: calc(#{(100% / 3)} - #{$gutter * 1});\r
  26                         margin: $gutter 0 0 $gutter;\r
  27 \r
  28                         > .image {\r
  29                                 @include vendor('transition', 'transform #{$duration} #{$ease}');\r
  30                                 position: relative;\r
  31                                 display: block;\r
  32                                 width: 100%;\r
  33                                 border-radius: _size(border-radius);\r
  34                                 overflow: hidden;\r
  35 \r
  36                                 img {\r
  37                                         display: block;\r
  38                                         width: 100%;\r
  39                                 }\r
  40 \r
  41                                 &:before {\r
  42                                         @include vendor('pointer-events', 'none');\r
  43                                         @include vendor('transition', (\r
  44                                                 'background-color #{$duration} #{$ease}',\r
  45                                                 'opacity #{$duration} #{$ease}'\r
  46                                         ));\r
  47                                         content: '';\r
  48                                         display: block;\r
  49                                         position: absolute;\r
  50                                         top: 0;\r
  51                                         left: 0;\r
  52                                         width: 100%;\r
  53                                         height: 100%;\r
  54                                         opacity: 1.0;\r
  55                                         z-index: 1;\r
  56                                         opacity: 0.8;\r
  57                                 }\r
  58 \r
  59                                 &:after {\r
  60                                         @include vendor('pointer-events', 'none');\r
  61                                         @include vendor('transition', 'opacity #{$duration} #{$ease}');\r
  62                                         content: '';\r
  63                                         display: block;\r
  64                                         position: absolute;\r
  65                                         top: 0;\r
  66                                         left: 0;\r
  67                                         width: 100%;\r
  68                                         height: 100%;\r
  69                                         background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>');\r
  70                                         background-position: center;\r
  71                                         background-repeat: no-repeat;\r
  72                                         background-size: 100% 100%;\r
  73                                         opacity: 0.25;\r
  74                                         z-index: 2;\r
  75                                 }\r
  76                         }\r
  77 \r
  78                         > a {\r
  79                                 @include vendor('display', 'flex');\r
  80                                 @include vendor('flex-direction', 'column');\r
  81                                 @include vendor('align-items', 'center');\r
  82                                 @include vendor('justify-content', 'center');\r
  83                                 @include vendor('transition', (\r
  84                                         'background-color #{$duration} #{$ease}',\r
  85                                         'transform #{$duration} #{$ease}'\r
  86                                 ));\r
  87                                 position: absolute;\r
  88                                 top: 0;\r
  89                                 left: 0;\r
  90                                 width: 100%;\r
  91                                 height: 100%;\r
  92                                 padding: 1em;\r
  93                                 border-radius: _size(border-radius);\r
  94                                 border-bottom: 0;\r
  95                                 color: _palette(fg-accent);\r
  96                                 text-align: center;\r
  97                                 text-decoration: none;\r
  98                                 z-index: 3;\r
  99 \r
 100                                 > :last-child {\r
 101                                         margin: 0;\r
 102                                 }\r
 103 \r
 104                                 &:hover {\r
 105                                         color: _palette(fg-accent) !important;\r
 106                                 }\r
 107 \r
 108                                 h2 {\r
 109                                         margin: 0;\r
 110                                 }\r
 111 \r
 112                                 .content {\r
 113                                         @include vendor('transition', (\r
 114                                                 'max-height #{$duration} #{$ease}',\r
 115                                                 'opacity #{$duration} #{$ease}'\r
 116                                         ));\r
 117                                         width: 100%;\r
 118                                         max-height: 0;\r
 119                                         line-height: 1.5;\r
 120                                         margin-top: 0.35em;\r
 121                                         opacity: 0;\r
 122 \r
 123                                         > :last-child {\r
 124                                                 margin-bottom: 0;\r
 125                                         }\r
 126                                 }\r
 127                         }\r
 128 \r
 129                         &.style1 {\r
 130                                 > .image:before {\r
 131                                         background-color: _palette(accent1);\r
 132                                 }\r
 133                         }\r
 134 \r
 135                         &.style2 {\r
 136                                 > .image:before {\r
 137                                         background-color: _palette(accent2);\r
 138                                 }\r
 139                         }\r
 140 \r
 141                         &.style3 {\r
 142                                 > .image:before {\r
 143                                         background-color: _palette(accent3);\r
 144                                 }\r
 145                         }\r
 146 \r
 147                         &.style4 {\r
 148                                 > .image:before {\r
 149                                         background-color: _palette(accent4);\r
 150                                 }\r
 151                         }\r
 152 \r
 153                         &.style5 {\r
 154                                 > .image:before {\r
 155                                         background-color: _palette(accent5);\r
 156                                 }\r
 157                         }\r
 158 \r
 159                         &.style6 {\r
 160                                 > .image:before {\r
 161                                         background-color: _palette(accent6);\r
 162                                 }\r
 163                         }\r
 164 \r
 165                         body:not(.is-touch) & {\r
 166                                 &:hover {\r
 167                                         > .image {\r
 168                                                 @include vendor('transform', 'scale(1.1)');\r
 169 \r
 170                                                 &:before {\r
 171                                                         background-color: _palette(bg-accent);\r
 172                                                         opacity: 0.35;\r
 173                                                 }\r
 174 \r
 175                                                 &:after {\r
 176                                                         opacity: 0;\r
 177                                                 }\r
 178                                         }\r
 179 \r
 180                                         .content {\r
 181                                                 max-height: 15em;\r
 182                                                 opacity: 1;\r
 183                                         }\r
 184                                 }\r
 185                         }\r
 186                 }\r
 187 \r
 188                 * + & {\r
 189                         margin-top: _size(element-margin);\r
 190                 }\r
 191 \r
 192                 body.is-loading & {\r
 193                         article {\r
 194                                 @include vendor('transform', 'scale(0.9)');\r
 195                                 opacity: 0;\r
 196                         }\r
 197                 }\r
 198 \r
 199                 body.is-touch & {\r
 200                         article {\r
 201                                 .content {\r
 202                                         max-height: 15em;\r
 203                                         opacity: 1;\r
 204                                 }\r
 205                         }\r
 206                 }\r
 207 \r
 208                 @include breakpoint(large) {\r
 209                         $gutter: _size(gutter) * 0.5;\r
 210 \r
 211                         margin: ($gutter * -1) 0 0 ($gutter * -1);\r
 212 \r
 213                         article {\r
 214                                 width: calc(#{(100% / 3)} - #{$gutter * 1});\r
 215                                 margin: $gutter 0 0 $gutter;\r
 216                         }\r
 217                 }\r
 218 \r
 219                 @include breakpoint(medium) {\r
 220                         $gutter: _size(gutter);\r
 221 \r
 222                         margin: ($gutter * -1) 0 0 ($gutter * -1);\r
 223 \r
 224                         article {\r
 225                                 width: calc(#{(100% / 2)} - #{$gutter * 1});\r
 226                                 margin: $gutter 0 0 $gutter;\r
 227                         }\r
 228                 }\r
 229 \r
 230                 @include breakpoint(small) {\r
 231                         $gutter: _size(gutter) * 0.5;\r
 232 \r
 233                         margin: ($gutter * -1) 0 0 ($gutter * -1);\r
 234 \r
 235                         article {\r
 236                                 width: calc(#{(100% / 2)} - #{$gutter * 1});\r
 237                                 margin: $gutter 0 0 $gutter;\r
 238 \r
 239                                 &:hover {\r
 240                                         > .image {\r
 241                                                 @include vendor('transform', 'scale(1.0)');\r
 242                                         }\r
 243                                 }\r
 244                         }\r
 245                 }\r
 246 \r
 247                 @include breakpoint(xsmall) {\r
 248                         $gutter: _size(gutter) * 0.5;\r
 249 \r
 250                         margin: 0;\r
 251 \r
 252                         article {\r
 253                                 width: 100%;\r
 254                                 margin: $gutter 0 0 0;\r
 255                         }\r
 256                 }\r
 257         }\r
 258 \r