1/** 2 * This file provides the design styles for the sidebar (navmain). 3 * 4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de> 5 */ 6 7 8.togglelink { 9 &.page_main-content { 10 position: absolute; 11 top: 0; 12 bottom: -1px; 13 width: 2rem; 14 left: -(@margin-default); 15 16 @media @screen_max-md { 17 display: none; 18 } 19 20 a { 21 .fontello-double(); 22 .icon-right-bold(); 23 .icon-left-bold(); 24 25 .display-flex(); 26 .flex-direction(); 27 .justify-content(); 28 29 width: @margin-default; 30 height: 100%; 31 background-color: @ini_button_background; 32 border: solid 1px @ini_button_background; 33 border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius 34 color: @ini_button_color; 35 text-decoration: none; 36 transition: @transition color, @transition background-color, @transition border-color; 37 38 &::before, 39 &::after { 40 width: 100%; 41 opacity: .6; 42 font-size: 1rem; 43 line-height: 1; 44 text-align: center; 45 margin: 0; 46 transition: @transition opacity; 47 } 48 49 &::before { 50 opacity: 1; 51 font-size: 1.25rem; 52 } 53 54 &:hover, 55 &:focus, 56 &:active { 57 background-color: @ini_button_color; 58 border-color: @ini_button_background; 59 color: @ini_button_background; 60 text-decoration: none; 61 62 * { 63 color: inherit; 64 text-decoration: none; 65 } 66 67 &::after { 68 opacity: 0; 69 } 70 } 71 } 72 73/* + + + toggle out + + + */ 74 .wide-content & { 75 left: 0; 76 77 a { 78 background-color: @ini_button_background; 79 border-color: @ini_button_background; 80 border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius 81 82 &::before { 83 opacity: .6; 84 font-size: 1rem; 85 } 86 87 &::after { 88 opacity: 1; 89 font-size: 1.25rem; 90 } 91 92 &:hover, 93 &:focus, 94 &:active { 95 background-color: @ini_button_color; 96 97 &::before { 98 opacity: 0; 99 } 100 101 &::after { 102 opacity: 1; 103 } 104 } 105 } 106 } 107 } 108} 109