MDL-55403 theme_noname: Add bootstrap4 js to moodle
[moodle.git] / theme / noname / scss / moodle / dock.scss
CommitLineData
536f0460
DW
1$dockWidth: 36px;
2$dockTitleMargin: 3px;
3$dockPanelWidth: (768px / 2);
4$dockTitleFontSize: 11px;
5
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}
19
20body.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}
29
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 }
72
73 // Hide the move icon for blocks which are docked.
74 .editing_move,
75 .moodle-core-dragdrop-draghandle {
76 display: none;
77 }
78
79}
80
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 }
135}