xref: /template/sprintdoc/css/area_togglelink.less (revision 437798b6178e7a688f887f2c68d8900d628a4171) 
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: @button_background;
33            border: solid 1px @button_background;
34            border-radius: @fix_border-radius 0 0 @fix_border-radius;
35            color: @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: @button_color;
59                border-color: @button_background;
60                color: @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: @button_background;
80                border-color: @button_background;
81                border-radius: 0 @fix_border-radius @fix_border-radius 0;
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: @button_color;
97
98                    &::before {
99                        opacity: 0;
100                    }
101
102                    &::after {
103                        opacity: 1;
104                    }
105                }
106            }
107        }
108    }
109}
110
111/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
112/* min-width: 1440px */
113
114@media @screen_min-xlg {
115    .togglelink {
116
117    }
118}
119
120/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
121/* max-width: 1199px */
122
123@media @screen_max-xlg {
124    .togglelink {
125
126    }
127}
128