xref: /template/sprintdoc/css/area_togglelink.less (revision cb7cc643bf8e0ff0a632314222134a32ded8ae21) 
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        z-index: 1;
16
17        @media @screen_max-md {
18            display: none;
19        }
20
21        a {
22            .fontello-double();
23            .icon-right-bold();
24            .icon-left-bold();
25
26            .display-flex();
27            .flex-direction();
28            .justify-content();
29
30            width: @margin-default;
31            height: 100%;
32            background-color: @ini_button_background;
33            border: solid 1px @ini_button_background;
34            border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
35            color: @ini_button_color;
36            text-decoration: none;
37            transition: @transition color, @transition background-color, @transition border-color;
38
39            &::before,
40            &::after {
41                width: 100%;
42                opacity: .6;
43                font-size: 1rem;
44                line-height: 1;
45                text-align: center;
46                margin: 0;
47                transition: @transition opacity;
48            }
49
50            &::before {
51                opacity: 1;
52                font-size: 1.25rem;
53            }
54
55            &:hover,
56            &:focus,
57            &:active {
58                background-color: @ini_button_color;
59                border-color: @ini_button_background;
60                color: @ini_button_background;
61                text-decoration: none;
62
63                * {
64                    color: inherit;
65                    text-decoration: none;
66                }
67
68                &::after {
69                    opacity: 0;
70                }
71            }
72        }
73
74/* + + +  toggle out  + + + */
75        .wide-content & {
76            left: -1px;
77
78            a {
79                background-color: @ini_button_background;
80                border-color: @ini_button_background;
81                border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius
82
83                &::before {
84                    opacity: .6;
85                    font-size: 1rem;
86                }
87
88                &::after {
89                    opacity: 1;
90                    font-size: 1.25rem;
91                }
92
93                &:hover,
94                &:focus,
95                &:active {
96                    background-color: @ini_button_color;
97
98                    &::before {
99                        opacity: 0;
100                    }
101
102                    &::after {
103                        opacity: 1;
104                    }
105                }
106            }
107        }
108    }
109}
110