Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 760 | blopes | 1 | .help-page { |
| 2 | p { |
||
| 3 | margin: 0; |
||
| 4 | } |
||
| 5 | |||
| 6 | .help-search { |
||
| 7 | background: url("\#{resource['poseidon-layout:images/pages/bg-help.jpg']}") ; |
||
| 8 | background-position: center; |
||
| 9 | background-repeat: no-repeat; |
||
| 10 | background-size: cover; |
||
| 11 | padding: 0; |
||
| 12 | text-align: center; |
||
| 13 | |||
| 14 | |||
| 15 | .help-search-content { |
||
| 16 | padding: 5rem 12rem; |
||
| 17 | |||
| 18 | h4 { |
||
| 19 | color: #ffffff; |
||
| 20 | font-weight: 500; |
||
| 21 | } |
||
| 22 | } |
||
| 23 | |||
| 24 | .search-container { |
||
| 25 | font-size: 1rem; |
||
| 26 | padding: 1rem; |
||
| 27 | position: relative; |
||
| 28 | |||
| 29 | input { |
||
| 30 | appearance: none; |
||
| 31 | font-size: 1rem; |
||
| 32 | text-indent: 2.5rem; |
||
| 33 | padding: .5rem; |
||
| 34 | width: 100%; |
||
| 35 | |||
| 36 | } |
||
| 37 | |||
| 38 | i { |
||
| 39 | color:$primaryColor; |
||
| 40 | width: 1rem; |
||
| 41 | position: absolute; |
||
| 42 | margin-left: .5rem; |
||
| 43 | top: 50%; |
||
| 44 | margin-top: -.5rem; |
||
| 45 | } |
||
| 46 | } |
||
| 47 | } |
||
| 48 | |||
| 49 | .status-bars { |
||
| 50 | margin-top: 1rem; |
||
| 51 | @include flex(); |
||
| 52 | |||
| 53 | .status-bar { |
||
| 54 | flex: 1 1 0; |
||
| 55 | -ms-flex: 1 1 0px; |
||
| 56 | background: #02acac; |
||
| 57 | height: 50px; |
||
| 58 | margin-right: .25rem; |
||
| 59 | transition: transform $transitionDuration; |
||
| 60 | |||
| 61 | &:last-child { |
||
| 62 | margin-right: 0; |
||
| 63 | } |
||
| 64 | |||
| 65 | &.status-bar-failure { |
||
| 66 | background: #f16383; |
||
| 67 | } |
||
| 68 | |||
| 69 | &:hover { |
||
| 70 | transform: scale(1.1); |
||
| 71 | } |
||
| 72 | } |
||
| 73 | } |
||
| 74 | |||
| 75 | .status-bar-footer { |
||
| 76 | padding: 1rem 0 0 0; |
||
| 77 | @include flex(); |
||
| 78 | @include flex-justify-between(); |
||
| 79 | } |
||
| 80 | |||
| 81 | .blog-post { |
||
| 82 | height: 150px; |
||
| 83 | border-radius: 4px; |
||
| 84 | margin: 3rem 2rem; |
||
| 85 | position: relative; |
||
| 86 | box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); |
||
| 87 | |||
| 88 | &:last-child { |
||
| 89 | margin-bottom: 1rem; |
||
| 90 | } |
||
| 91 | |||
| 92 | img { |
||
| 93 | width: 100%; |
||
| 94 | position: absolute; |
||
| 95 | left: 0; |
||
| 96 | top: 0; |
||
| 97 | } |
||
| 98 | |||
| 99 | .blog-text { |
||
| 100 | position: absolute; |
||
| 101 | left: 20px; |
||
| 102 | top: 30px; |
||
| 103 | |||
| 104 | h1 { |
||
| 105 | font-size: 1.25rem; |
||
| 106 | color: #ffffff; |
||
| 107 | margin-bottom: 1rem; |
||
| 108 | font-weight: 700; |
||
| 109 | } |
||
| 110 | |||
| 111 | span { |
||
| 112 | color: #ffffff; |
||
| 113 | font-weight: 600; |
||
| 114 | } |
||
| 115 | } |
||
| 116 | |||
| 117 | .blog-profile { |
||
| 118 | position: absolute; |
||
| 119 | top: -25px; |
||
| 120 | left: -25px; |
||
| 121 | |||
| 122 | img { |
||
| 123 | width: 50px; |
||
| 124 | height: 50px; |
||
| 125 | border-radius: 50%; |
||
| 126 | |||
| 127 | } |
||
| 128 | } |
||
| 129 | |||
| 130 | &:nth-child(1) { |
||
| 131 | background-image: url("\#{resource['poseidon-layout:images/pages/help/blog1.jpg']}"); |
||
| 132 | } |
||
| 133 | |||
| 134 | &:nth-child(2) { |
||
| 135 | background-image: url("\#{resource['poseidon-layout:images/pages/help/blog2.jpg']}"); |
||
| 136 | } |
||
| 137 | |||
| 138 | &:nth-child(3) { |
||
| 139 | background-image: url("\#{resource['poseidon-layout:images/pages/help/blog3.jpg']}"); |
||
| 140 | } |
||
| 141 | } |
||
| 142 | } |
||
| 143 | |||
| 144 | @media screen and (max-width: $tabletBreakpoint) { |
||
| 145 | .help-page { |
||
| 146 | .help-search { |
||
| 147 | .help-search-content { |
||
| 148 | padding: 6rem 2rem; |
||
| 149 | } |
||
| 150 | } |
||
| 151 | } |
||
| 152 | } |