source: admin/style/scss/partials/_layout.scss @ 3513:49903df908f3

// Admin layout
#dotclear-admin {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
}

#header {
     width: 99.99%;
     /* Bugfix Chrome >= 49.0.2623.108 */
     display: table;
     position: relative;
}

h1,
#top-info-blog,
#top-info-user {
     display: table-cell;
     padding: 8px 0;
     margin: 0;
     font-size: 1em;
     vertical-align: top;
}

#wrapper {
     position: relative;
     padding-top: 1.5em;
     float: left;
     width: 100%;
     z-index: 10;
     flex: 1;
}

.with-js #wrapper {
     padding-top: 0;
}

#main {
     width: 100%;
     float: right;
     margin-left: -14em;
     margin-top: 0;
}

#content {
     margin: 0 0 0 14em;
     padding: .5em 1.5em .75em 2.5em;
}

#main-menu {
     width: 14em;
     float: left;
     margin: 0;
     padding-top: .5em;
     padding-bottom: 1em;
     overflow: hidden;
}

#footer {
     clear: both;
     position: relative;
     padding: .5em 0 .5em 1em;
     text-align: left;
}


/* to hide main-menu */

#collapser {
     position: absolute;
     top: 0;
     left: 14em;
     width: $collapser-width;
     height: 100%;
     overflow: hidden;
     display: block;
     border-right: 0; // 1px solid #999;
     border-bottom: 0;
     z-index: 1;
     transition: none;
}

.expand-mm {
     display: none;
}


/* if main-menu is hidden */

.hide-mm {
     #main {
          margin-left: 0;
     }
     #content {
          margin-left: $collapser-width;
          > h2 {
               margin-left: calc(-1em - #{$collapser-width});
          }
     }
     #main-menu {
          display: none;
     }
     #collapser {
          left: 0;
     }
     .collapse-mm {
          display: none;
     }
     .expand-mm {
          display: block;
     }
}


/* -------------------------------------------------------------- layout: two-cols */

.two-cols {
     position: static;
     .col {
          width: 48%;
          margin-left: 2%;
          float: left;
          &:first-child {
               margin-left: 0;
               margin-right: 2%;
          }
          &:last-child {
               margin-left: 2%;
               margin-right: 0;
          }
     }
     .col70 {
          width: 68%;
          margin-left: 0;
          float: left;
          &.last-col {
               margin-left: 2%;
               margin-right: 0;
          }
     }
     .col30 {
          width: 28%;
          margin-left: 2%;
          float: left;
          &.first-col {
               margin-left: 0;
               margin-right: 2%;
          }
     }
     table {
          width: 90%;
     }
}


/* -------------------------------------------------------------- layout: three-cols */

.three-cols {
     position: static;
     .col {
          width: 32.3%;
          float: left;
          margin-left: 1%;
          &:first-child {
               margin-left: 0;
          }
     }
}


/* ------------------------------------------------- layout: optionnal one/two/three-boxes */

.one-box {
     text-align: justify;
}

.two-boxes {
     width: 48.5%;
}

.three-boxes {
     width: 30%;
}

.two-boxes,
.three-boxes {
     display: inline-block;
     vertical-align: top;
     margin: 0 1.5% 1em;
     text-align: left;
}

.two-boxes:nth-of-type(odd),
.three-boxes:nth-of-type(3n+1) {
     margin-left: 0;
}

.two-boxes:nth-of-type(even),
.three-boxes:nth-of-type(3n) {
     margin-right: 0;
}


/* ---------------------------------------------------------------- layout: popups */

.popup {
     h1 {
          display: block;
          width: 100%;
          margin: 0;
          font-size: 1.5em;
          text-indent: 1em;
          line-height: 1.5em;
          font-weight: normal;
     }
     #wrapper {
          display: block;
          float: none;
          width: 100%;
          margin: 0;
          padding: 0;
          background-position: 0 0;
     }
     #main {
          margin: 0;
          padding: 0;
     }
     #content {
          margin: 0;
          padding: 1em;
          h2 {
               margin: 0 0 1em 0;
               padding: 0;
          }
     }
     #footer p {
          border: none;
     }
}


/* -------------------------------------------------------- layout: classes de complément */

.constrained {
     margin: 0;
     padding: 0;
     border: none;
     background: transparent;
}

.table {
     display: table;
}

.cell {
     display: table-cell;
     vertical-align: top;
}

.clear {
     clear: both;
}

.lclear {
     clear: left;
}

.clearer {
     height: 1px;
     font-size: 1px;
}


/* Micro clearfix thx to Nicolas Gallagher */

.clearfix:before,
.clearfix:after {
     content: " ";
     display: table;
}

.clearfix:after {
     clear: both;
}

.box {
     display: inline-block;
     vertical-align: top;
     margin: 0 10px 10px;
     text-align: left;
     flex: 1 1 auto;
     &.small {
          //    width: 312px;
          flex-basis: 312px;
     }
     &.medium {
          //    width: 644px;
          flex-basis: 644px;
     }
     &.large {
          width: 100%;
     }
}

.odd {
     margin-left: 0;
}

.even {
     margin-right: 0;
}


/* ------------------------------------------------------------------------------------
                                                                           UN POIL DE MEDIA QUERIES
------------------------------------------------------------------------------------ */

@media screen and (max-width: $xl-screen) {
     #header {
          display: block;
          width: 100%;
          text-align: right;
          h1,
          h1 a {
               width: 120px;
               margin: 0;
          }
     }
     h1 {
          width: 19.5em;
          display: inline-block;
          vertical-align: top;
          margin-right: 1em;
     }
     #top-info-blog {
          display: inline-block;
          vertical-align: top;
          margin-right: 1em;
          #switchblog {
               max-width: 16em;
          }
          a {
               margin-left: 2em;
          }
     }
     #top-info-user {
          display: block;
          width: 100%;
     }
     #collapser {
          left: 17em;
     }
     #main {
          margin-left: -17em;
     }
     #content {
          margin: 0 0 0 17em;
     }
     #main-menu {
          width: 17em;
     }
     .three-boxes,
     .three-boxes .box,
     .two-cols .col70,
     .two-cols .col30 {
          width: 100%;
          margin-left: 0;
          margin-right: 0;
     }
}

@media screen and (max-width: $m-screen) {
     #dashboard-boxes .box.medium,
     .box.medium,
     #dashboard-boxes .box.small,
     .box.small,
     #dashboard-boxes .box.large,
     .box.large {
          width: 95%;
          margin: 10px auto;
     }
}

@media screen and (max-width: $s-screen) {
     #help-button {
          height: 26px;
          width: 26px;
          margin: 0;
          overflow: hidden;
     }
     #content.with-help #help-button {
          top: 10em; // 77px;
     }
     .one-box,
     .two-boxes,
     .box,
     .two-cols .col {
          width: 96%;
          margin-left: 0;
          margin-right: 0;
     }
}

@media screen and (max-width: $xs-screen) {
     #header h1,
     #header h1 a {
          width: 42px !important;
          height: 42px;
     }
     #wrapper,
     #main,
     #main-menu {
          display: block;
          float: none;
          width: 100%;
          margin: 0;
     }
     #main-menu {
          a {
               display: block;
               width: 100%;
          }
          h3 a {
               display: inline;
          }
     }
     #content,
     .hide-mm #content {
          margin: 0;
     }
     #collapser {
          display: none;
     }
     #main #content > h2 {
          margin: 0 -.25em 1em;
     }
     #dashboard-boxes .box.medium,
     .box.medium,
     #dashboard-boxes .box.small,
     .box.small,
     #dashboard-boxes .box.large,
     .box.large {
          width: 95%;
          margin: 10px auto;
     }
     .cell,
     #filters-form .cell {
          display: inline-block;
          vertical-align: bottom;
     }
     .pseudo-tabs li {
          display: block;
          float: left;
          width: 50%;
     }
}

@media screen and (max-width: $xxs-screen) {
     #top-info-blog label,
     .nomobile {
          display: none;
     }
     #top-info-blog {
          margin-bottom: .5em;
          max-width: 75%;
          select {
               margin-bottom: .5em;
          }
     }
     #content.with-help {
          #help-button {
               top: 10em; // 120px;
               right: 28rem; // 20.5em;
          }
          #help {
               width: 28rem;
          }
     }
     p.top-add {
          margin-bottom: .5em;
     }
     .part-tabs ul {
          margin: 1em 0;
     }
     .part-tabs li a {
          display: block;
          width: 100%;
     }
     #icons p {
          width: 9em;
     }
     .media-item {
          width: 90%;
     }
     #theme-new,
     #theme-activate,
     #theme-deactivate {
          margin-left: 0;
          margin-right: 0;
     }
     .box.current-theme {
          margin: 5px;
          width: 100%;
     }
     .current-theme .module-sshot img {
          margin: 0;
          float: none;
          max-width: 100%;
     }
     table .maximal {
          min-width: 14em;
     }
     .pseudo-tabs li {
          display: block;
          width: 100%;
          float: none;
     }
}