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