xref: /template/sprintdoc/css/area_togglelink.less (revision 7b5bc581e7856958079227e398b98063053f45e2)
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: 0px;
12        bottom: -1px;
13        width: 2rem;
14        left: -(@margin-default);
15        z-index: 1;
16        @media @screen_max-md{
17            display: none;
18        }
19
20        a {
21            .display-flex();
22            .flex-direction();
23            .justify-content();
24
25            width: (@margin-default);
26            height: 100%;
27            background-color: @button_background;
28            border: solid 1px @button_background;
29            border-radius: @fix_border-radius 0 0 @fix_border-radius;
30            color: @button_color;
31            text-decoration: none;
32            text-align: center;
33            transition: @transition color, @transition background-color, @transition border-color;
34
35            &:hover,
36            &:focus,
37            &:active {
38                background-color: @button_color;
39                border-color: @button_background;
40                color: @button_background;
41                text-decoration: none;
42
43                * {
44                    color: inherit;
45                    text-decoration: none;
46                }
47            }
48        }
49
50
51/* + + +  toggle out  + + + */
52        .wide-content & {
53            left: -1px;
54
55            a {
56                background-color: @button_background;
57                border-color: @button_background;
58                border-radius: 0 @fix_border-radius @fix_border-radius 0;
59
60                &:hover,
61                &:focus,
62                &:active {
63                    background-color: @button_color;
64                }
65            }
66        }
67    }
68}
69
70
71/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
72/* min-width: 1440px */
73
74@media @screen_min-xlg {
75    .togglelink {
76
77    }
78}
79
80
81/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
82/* max-width: 1199px */
83
84@media @screen_max-xlg {
85    .togglelink {
86
87    }
88}
89