MDL-55403 theme_noname: Add bootstrap4 js to moodle
[moodle.git] / theme / noname / scss / moodle / dock.scss
1 $dockWidth: 36px;
2 $dockTitleMargin: 3px;
3 $dockPanelWidth: (768px / 2);
4 $dockTitleFontSize: 11px;
6 /**
7  * This styles the H2 node the dock creates to test the width before making its title rotation.
8  * We need to apply these EXACT styles to the #dock .dockedtitle h2 to be sure things are spaced correctly.
9  */
10 .transform-test-heading {
11     font-family: $font-family-sans-serif;
12     font-size: $dockTitleFontSize;
13     line-height: $dockWidth;
14     text-align: center;
15     font-weight: bold;
16     margin: 0;
17     padding: 0;
18 }
20 body.has_dock {
21     #page {
22         padding-left: ($dockWidth + ($dockTitleMargin * 3));
23         padding-right: $grid-gutter-width;
24     }
25     div#dock {
26         display: inline;
27     }
28 }
30 #dock {
31     z-index: 12000; // Required to place the dock panel above the fixed pos navbar.
32     width: ($dockWidth + ($dockTitleMargin * 2));
33     position: fixed;
34     top: 0;
35     left: 0;
36     height: 100%;
37     background-color: transparent;
38     border-right: 0 none;
39     .nothingdocked {
40         visibility: hidden;
41         display: none;
42     }
43     .dockeditem_container {
44         margin-top: 68px;
45     }
46     .dockeditem .firstdockitem {
47         margin-top: 1em;
48     }
49     .dockedtitle {
50         @extend .btn;
51         display: block;
52         width: $dockWidth;
53         margin: $dockTitleMargin;
54         padding:0;
55         cursor: pointer;
56         h2 {
57             @extend .transform-test-heading;
58         }
59         .filterrotate {
60             margin-left: 8px;
61         }
62     }
63     .controls {
64         position: absolute;
65         bottom: 1em;
66         text-align: center;
67         width: 100%;
68         img {
69             cursor: pointer;
70         }
71     }
73     // Hide the move icon for blocks which are docked.
74     .editing_move,
75     .moodle-core-dragdrop-draghandle {
76         display: none;
77     }
79 }
81 #dockeditempanel {
82     &.dockitempanel_hidden {
83         display: none;
84     }
85     min-width: 200px;
86     position: relative;
87     left: 100%;
88     padding-left: 5px;
89     .dockeditempanel_content {
90         //background-color: $wellBackground;
91         width: $dockPanelWidth;
92         border: 1px solid darken($gray-lighter, 10%);
93         @include box-shadow(2px 4px 4px 2px $gray-lighter);
94         @include border-radius(4px);
95     }
96     .dockeditempanel_bd {
97         overflow: auto; /** Required to make the content scrollable when it flows over the fixed area of the screen */
98         > * {
99             margin: 1em;
100         }
101         .block_navigation .block_tree li {
102             overflow: visible;
103         }
104     }
105     .dockeditempanel_hd {
106         border-bottom: 1px solid $body-color;
107         padding: 0.5em 1em;
108         h2 {
109             @extend h3;
110             font-size: 1.1em;
111             padding:0;
112             margin: 0;
113         }
114         .commands {
115             display: block;
116             text-align: right;
117             > a,
118             > span {
119                 margin-left: 3px;
120                 cursor: pointer;
121             }
122             img,
123             input {
124                 vertical-align: middle;
125                 margin-right: 1px;
126             }
127             .hidepanelicon img {
128                 cursor: pointer;
129             }
130             img.actionmenu {
131                 width: auto;
132             }
133         }
134     }