[Summary view] [Print] [Text view]

   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: @sansFontFamily;
  12      font-size: @dockTitleFontSize;
  13      line-height: @dockWidth;
  14      text-align: center;
  15      font-weight: bold;
  16      margin: 0;
  17      padding: 0;
  18  }
  19  
  20  body.has_dock {
  21      #page {
  22          padding-left: (@dockWidth + (@dockTitleMargin * 3));
  23          padding-right: @gridGutterWidth;
  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          .btn;
  51          display: block;
  52          width: @dockWidth;
  53          margin: @dockTitleMargin;
  54          padding: 0;
  55          cursor: pointer;
  56          h2 {
  57              .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(@grayLighter, 10%);
  93          .box-shadow(2px 4px 4px 2px @grayLighter);
  94          .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 @white;
 107          padding: 0.5em 1em;
 108          h2 {
 109              .nav-header;
 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  }
 136  
 137  .dir-rtl {
 138      &.has_dock #page {
 139          padding-left: @gridGutterWidth;
 140          padding-right: (@dockWidth + (@dockTitleMargin * 3));
 141      }
 142      #dock {
 143          left: auto;
 144          right: 0%;
 145          .dockedtitle {
 146              h2 {
 147                  line-height: @dockWidth - @dockTitleFontSize;
 148              }
 149          }
 150      }
 151      #dockeditempanel {
 152          right: 100%;
 153          .dockeditempanel_hd {
 154              .commands {
 155                  text-align: left;
 156              }
 157          }
 158      }
 159  }