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