utils/test/reporting/3rd_party/sass/layout/_footer.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 /* Footer */\r
   8 \r
   9         #footer {\r
  10                 $gutter: _size(gutter);\r
  11 \r
  12                 @include padding(5em, 0, (0, 0, 3em, 0));\r
  13                 background-color: _palette(bg-alt);\r
  14 \r
  15                 > .inner {\r
  16                         @include vendor('display', 'flex');\r
  17                         @include vendor('flex-wrap', 'wrap');\r
  18                         @include vendor('flex-direction', 'row');\r
  19 \r
  20                         > * > :last-child {\r
  21                                 margin-bottom: 0;\r
  22                         }\r
  23 \r
  24                         section:nth-child(1) {\r
  25                                 width: calc(66% - #{$gutter});\r
  26                                 margin-right: $gutter;\r
  27                         }\r
  28 \r
  29                         section:nth-child(2) {\r
  30                                 width: calc(33% - #{$gutter});\r
  31                                 margin-left: $gutter;\r
  32                         }\r
  33 \r
  34                         .copyright {\r
  35                                 width: 100%;\r
  36                                 padding: 0;\r
  37                                 margin-top: 5em;\r
  38                                 list-style: none;\r
  39                                 font-size: 0.8em;\r
  40                                 color: transparentize(_palette(fg), 0.5);\r
  41 \r
  42                                 a {\r
  43                                         color: inherit;\r
  44                                 }\r
  45 \r
  46                                 li {\r
  47                                         display: inline-block;\r
  48                                         border-left: solid 1px transparentize(_palette(fg), 0.85);\r
  49                                         line-height: 1;\r
  50                                         padding: 0 0 0 1em;\r
  51                                         margin: 0 0 0 1em;\r
  52 \r
  53                                         &:first-child {\r
  54                                                 border-left: 0;\r
  55                                                 padding-left: 0;\r
  56                                                 margin-left: 0;\r
  57                                         }\r
  58                                 }\r
  59                         }\r
  60                 }\r
  61 \r
  62                 @include breakpoint(large) {\r
  63                         $gutter: _size(gutter) * 0.5;\r
  64 \r
  65                         @include padding(5em, 0);\r
  66 \r
  67                         > .inner {\r
  68                                 section:nth-child(1) {\r
  69                                         width: calc(66% - #{$gutter});\r
  70                                         margin-right: $gutter;\r
  71                                 }\r
  72 \r
  73                                 section:nth-child(2) {\r
  74                                         width: calc(33% - #{$gutter});\r
  75                                         margin-left: $gutter;\r
  76                                 }\r
  77                         }\r
  78                 }\r
  79 \r
  80                 @include breakpoint(medium) {\r
  81                         $gutter: _size(gutter);\r
  82 \r
  83                         > .inner {\r
  84                                 section:nth-child(1) {\r
  85                                         width: 66%;\r
  86                                         margin-right: 0;\r
  87                                 }\r
  88 \r
  89                                 section:nth-child(2) {\r
  90                                         width: calc(33% - #{$gutter});\r
  91                                         margin-left: $gutter;\r
  92                                 }\r
  93                         }\r
  94                 }\r
  95 \r
  96                 @include breakpoint(small) {\r
  97                         @include padding(3em, 0);\r
  98 \r
  99                         > .inner {\r
 100                                 @include vendor('flex-direction', 'column');\r
 101 \r
 102                                 section:nth-child(1) {\r
 103                                         width: 100%;\r
 104                                         margin-right: 0;\r
 105                                         margin: 3em 0 0 0;\r
 106                                 }\r
 107 \r
 108                                 section:nth-child(2) {\r
 109                                         @include vendor('order', '-1');\r
 110                                         width: 100%;\r
 111                                         margin-left: 0;\r
 112                                 }\r
 113 \r
 114                                 .copyright {\r
 115                                         margin-top: 3em;\r
 116                                 }\r
 117                         }\r
 118                 }\r
 119 \r
 120                 @include breakpoint(xsmall) {\r
 121                         > .inner {\r
 122                                 .copyright {\r
 123                                         margin-top: 3em;\r
 124 \r
 125                                         li {\r
 126                                                 border-left: 0;\r
 127                                                 padding-left: 0;\r
 128                                                 margin: 0.75em 0 0 0;\r
 129                                                 display: block;\r
 130                                                 line-height: inherit;\r
 131 \r
 132                                                 &:first-child {\r
 133                                                         margin-top: 0;\r
 134                                                 }\r
 135                                         }\r
 136                                 }\r
 137                         }\r
 138                 }\r
 139         }