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