openrat-cms

openrat-workbench.less (9567B)

---

 /*
 OpenRat Content Management System
 Copyright (C) 2002-2010 Jan Dankert
 
 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU General Public License
 as published by the Free Software Foundation; either version 2
 of the License, or (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program; if not, write to the Free Software
 Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */
 
 /*
 Basis-Style for Openrat.
 */
 
 
 
 
 
 
 .border-radius (@radius) {
     border-radius: @radius;
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
     -khtml-border-radius: @radius;
 }
 
 
 
 
 
 div#dialog {
 
     > .view {
         overflow: auto;
 
         /*width:60%;*/
         position: absolute;
         top: 5%;
         left: 10%;
         width: 80%;
         height: 80%;
 
         @media @smartphones {
             top: 2.5%;
             left: 2.5%;
             width: 95%;
             height: 95%;
         }
 
 
         z-index: 110;
 
         border: 1px solid !important;
     }
 
     &.is-closed {
         display: none;
         width: 0;
     }
 
     /* Modale Dialoge */
     .filler {
         position: absolute;
         z-index: 100;
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
         opacity: 0.5;
 
         span.icon {
             opacity: 1;
             font-size: 3em;
             font-weight: bold;
             text-align: center;
             width: 40px;
             height: 40px;
 
             position: absolute;
             right: 20px;
             top: 20px;
         }
     }
 
 }
 
 .arrow {
     width: 0;
     height: 0;
     margin: 6px;
     padding: 0;
     font-size: 0;
 
     &.arrow-down {
         border-right: 6px solid transparent;
         border-top: 6px solid;
         border-left: 6px solid transparent;
         border-bottom: 4px solid transparent;
         margin-top: 10px;
     }
     &.arrow-right {
         border-top: 6px solid transparent;
         border-left: 6px solid;
         border-bottom: 6px solid transparent;
         border-right: 4px solid transparent;
         margin-left: 10px;
     }
 }
 
 #editor .dirty {
     font-weight: bold;
 }
 
 .visible-for-nojs {
     display: none;
 }
 
 html.nojs .noscript {
     display: block;
 }
 
 .toggle-open-close {
 
     display: flex;
     flex-direction: column;
 
     .on-click-open-close {
         cursor: pointer;
         font-weight: normal;
         //flex: 1;
     }
 
     > .closable {
         //transition: transform 0.5s ease-in-out;
         transition: opacity 0.3s ease-out;
         //transition: max-height 1s linear;
         flex: 1;
         display: block;
         //overflow: hidden;
     }
 
     /* Geschlossen */
     &.closed {
         > .on-click-open-close > .on-closed {
             display: inline;
         }
         > .on-click-open-close > .on-open {
             display: none;
         }
         > .closable {
             //flex: 0.0001;
             opacity: 0;
             max-height: 0;
             overflow: hidden;
             //display: none;
         }
     }
 
     /* Offen */
     &.open {
         > .closable {
             height: auto;
         }
         > .on-click-open-close > .on-closed {
             display: none;
         }
         > .on-click-open-close > .on-open {
             display: inline;
         }
     }
 }
 
 @smartphones: ~"only screen and (max-width: 55rem)";
 @wide: ~"only screen and (min-width: 75rem)";
 
 
 html, body { width:100%; height:100%;}
 
 div#workbench {
 
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
 
 
     /*
 
     div.panel.modal {
     position: relative;
     z-index: 101;
     border: 1px solid !important;
     }
      */
 
     /* vertikale Flex-Box zwischen Header und Hauptbereich */
     > * {
     }
 
     > header {
         height: 3.0rem;
 
         .toolbar-icon {
 
             .arrow-down {
                 display: inline;
             }
 
             span.label, .arrow-down {
                 @media @smartphones {
                     display: none;
                 }
             }
         }
     }
 
     > .or-main-area {
         flex: 1;
 
         /* Horizontale Flexbox */
         //display: flex;
         //flex-direction: row;
 
         /*
         https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
         Whenever you've got an element with overflow: [hidden|scroll|auto] inside of a flex item, you need to give its ancestor flex item min-width:0 (in a horizontal flex container) or min-height:0 (in a vertical flex container), to disable this min-sizing behavior, or else the flex item will refuse to shrink smaller than the child's min-content size.
          */
         //min-width: 0;
         min-height: 0;
 
         padding-top: 0.5em;
 
         > * {
             min-width: 0;
             min-height: 0;
             overflow-y: auto;
             overflow-x: hidden;
 
             height:100%;
         }
 
         > nav {
             width:33%;
             transition: width 0.15s ease-in-out;
             position: fixed;
             height: ~"calc(100% - 3.0rem - 0.5em)";
 
             @media @smartphones {
                 width: 0;
             }
 
 
             &.small {
                 width: 5%;
                 opacity: 0.5;
                 overflow-y: hidden;
 
                 &:hover {
                     width: 33%;
                     overflow-y: auto;
                     opacity: 1;
                     background-color: inherit;
                     border-right: 1px solid inherit;
                 }
 
                 & ~ .or-workplace {
                     margin-left:5%;
                 }
             }
 
             &.open {
 
                 overflow-y: auto;
                 @media @smartphones {
                     width: 95%;
                     border-right: 1px solid;
                     opacity: 0.95;
                 }
             }
 
             @media @wide {
                 width: 33%;
                 overflow-y: auto;
             }
 
 
             div.view {
                 height: 100%;
             }
         }
 
         header {
 
             .or-view-icon, .or-view-headline {
                 margin: 0.3em;
                 display: inline;
                 font-size: 1.2em;
                 line-height: 1.5em;
             }
 
         }
 
         > .or-workplace {
 
             margin-left: 33%;
             transition: margin-left 0.15s ease-in-out;
 
             @media @smartphones {
                 margin-left: 0;
             }
 
             > #editor {
 
                 transition: opacity 0.5s ease;
                 display: flex;
                 flex-direction: column;
 
                 &.is-closed {
                     flex: 0.5;
                     cursor: not-allowed;
                     pointer-events: none;
 
                     @media @smartphones {
                         // do not display the views in mobile mode.
                         flex: 0;
                     }
 
                     //overflow: hidden;
                 }
 
                 > section {
                     margin: 1.5em;
                     @media @smartphones {
                         margin:0.5em;
                     }
 
                     border: 1px solid;
 
                     .border-radius(5px);
 
 
                     .view-toolbar {
                         display: inline;
                     }
 
                     .view {
                         //transition: flex 0.5s ease-in-out;
                     }
 
                     // Wenn Sektion geschlossen, keine Toolbar anzeigen.
                     &.closed {
                         .view-toolbar {
                             display: none;
                         }
                         //.view {                        flex: 0;                    }
                     }
 
                     // Diabled Sections are not displayed.
                     &.disabled {
                         //display: none;
                     }
                     &.is-empty {
                         //display: none;
                     }
                 }
             }
 
         }
 
     }
 
 }
 
 #title {
 
     .toggle-nav-small {
         display: inline;
         @media @smartphones {
             display: none;
         }
     }
 
     .toggle-nav-open-close {
         display: none;
         @media @smartphones {
             display: inline;
         }
     }
 
     .toolbar-icon.search {
         //width: 8em;
         @media @smartphones {
             //width: 8em;
         }
 
         input {
             @media @smartphones {
                 width: 3em;
             }
         }
     }
 }
 
 
 /* Fortschrittsbalken, fuer alle Elemente verfuegbar. */
 .loader
 {
     background: url(../images/loader.gif) no-repeat;
     background-position: center, top;
     height: 30px;
     opacity: 0.5;
     cursor: wait;
     pointer-events: none;
 }
 
 
 
 @media @smartphones {
     html {
         font-size: 1em;
     }
 }
 
 
 /* Navigation over the filler */
 .toggle-nav-small,
 .or-navigation
 {
     z-index: 102;
 
     &:hover {
         z-index: 112;
     }
 }
 
 .or-breadcrumb
 {
     margin-bottom: 0.1em;
     margin-left:1.5em;
     line-height: 18px;
     font-weight: normal;
     white-space: nowrap;
 
     li {
         display: inline;
         margin-right: 0.3em;
     }
 
     .or-breadcrumb-item .image-icon {
         margin-right:0.2em;
     }
 }