| Line 1,796: |
Line 1,796: |
| | } | | } |
| | | | |
| − | /* A C C O R D I O N */
| |
| | | | |
| − | $midnight: #2c3e50;
| + | .bookind { |
| − | $clouds: #ecf0f1;
| + | font-size:88%; |
| − | // General
| + | /*font-weight: 400;*/ |
| − | acco {
| + | list-style-type: none; |
| − | color: $midnight;
| + | padding: 1px; |
| − | background: $clouds;
| + | margin: 1px; |
| − | padding: 0 1em 1em;
| + | text-indent:-4px; |
| | } | | } |
| − | acco:h1 {
| + | |
| − | margin: 0;
| + | .bookind:ul, .bookind:li { |
| − | line-height: 2;
| + | list-style-type: none; |
| − | text-align: center;
| + | text-indent:-4px; |
| | } | | } |
| − | acco:h2 {
| + | |
| − | margin: 0 0 .5em;
| + | @media only screen and (max-width: 600px) { |
| − | font-weight: normal;
| + | .bookind { |
| | + | font-size:80%; |
| | + | margin-right: 1px; |
| | } | | } |
| − | acco:input {
| + | |
| − | position: absolute;
| |
| − | opacity: 0;
| |
| − | z-index: -1;
| |
| | } | | } |
| − | // Layout
| + | |
| − | .row { | + | |
| − | display:flex;
| + | .header-container, .header-chrome { |
| − | .col {
| + | /* background-color: #97D6F7 !important; |
| − | flex:1;
| + | position: fixed !important; |
| − | &:last-child {
| + | display: block !important; |
| − | margin-left: 1em;
| + | width: 100% !important; |
| − | }
| + | z-index: 99 !important;*/ |
| − | }
| + | border-bottom: 2px solid orange !important; |
| | } | | } |
| − | /* Accordion styles */
| + | |
| − | .tabs {
| + | input { |
| − | border-radius: 8px;
| + | border: 1px solid grey !important; |
| − | overflow: hidden;
| + | border-radius: 6px !important; |
| − | box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
| + | padding: 12px !important; |
| − | }
| |
| − | .tab {
| |
| − | width: 100%;
| |
| − | color: white;
| |
| − | overflow: hidden;
| |
| − | &-label {
| |
| − | display: flex;
| |
| − | justify-content: space-between;
| |
| − | padding: 1em;
| |
| − | background: $midnight;
| |
| − | font-weight: bold;
| |
| − | cursor: pointer;
| |
| − | /* Icon */
| |
| − | &:hover {
| |
| − | background: darken($midnight, 10%);
| |
| − | }
| |
| − | &::after {
| |
| − | content: "\276F";
| |
| − | width: 1em;
| |
| − | height: 1em;
| |
| − | text-align: center;
| |
| − | transition: all .35s;
| |
| − | }
| |
| − | }
| |
| − | &-content {
| |
| − | max-height: 0;
| |
| − | padding: 0 1em;
| |
| − | color: $midnight;
| |
| − | background: white;
| |
| − | transition: all .35s;
| |
| − | }
| |
| − | &-close {
| |
| − | display: flex;
| |
| − | justify-content: flex-end;
| |
| − | padding: 1em;
| |
| − | font-size: 0.75em;
| |
| − | background: $midnight;
| |
| − | cursor: pointer;
| |
| − | &:hover {
| |
| − | background: darken($midnight, 10%);
| |
| − | }
| |
| − | }
| |
| | } | | } |
| | | | |
| − | // :checked
| + | |
| − | input:checked {
| + | @media print { |
| − | + .tab-label {
| + | .noprint { |
| − | background: darken($midnight, 10%);
| + | visibility: hidden; |
| − | &::after {
| + | } |
| − | transform: rotate(90deg);
| + | } |
| − | }
| |
| − | }
| |
| − | ~ .tab-content {
| |
| − | max-height: 100vh;
| |
| − | padding: 1em;
| |
| − | }
| |
| − | } | |