openrat-cms

openrat-workbench.less (8931B)

---

 /*
 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.
 */
 
 
 /* Usage to this variable is safe to be removed */
 @color-overridden-by-theme: black;
 
 .border-radius (@radius) {
     border-radius: @radius;
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
     -khtml-border-radius: @radius;
 }
 
 
 @smartphones: ~"only screen and (max-width: 55rem)";
 @wide: ~"only screen and (min-width: 75rem)";
 
 
 
 .or {
 
     &-workbench {
 
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: row;
         visibility: hidden;
 
         &--visible-on-dialog-open {
           // make the menu buttons visible if a dialog is open.
           z-index: 3;
         }
 
 
         &-screen {
           /* vertical flexbox */
           display: flex;
           flex-direction: column;
           position: relative;
 
           /*
           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;
 
             //width: 100%;
           }
 
 
         }
 
         &-main {
           flex: 1;
           min-width: 0; // min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto. This can make block elements take up much more space than desired, resulting in overflow.
         }
 
         &-title {
             height: 3.0rem;
             max-height: 3.0rem;
             min-height: 3.0rem;
             overflow: hidden;
             padding: 0.5em;
             //opacity: 0.9;
 
             font-size: 1.2em;
 
             .toolbar-icon {
 
                 .arrow-down {
                     display: inline;
                 }
 
                 span.label, .arrow-down {
                     @media @smartphones {
                         display: none;
                     }
                 }
             }
         }
 
 
 
         &-content {
             flex: 1;
             //margin-left: 33%;
             //transition: margin-left 0.15s ease-in-out;
 
             @media @smartphones {
                 //margin-left: 0;
             }
 
             //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);
 
 
             .or-view-toolbar {
                 display: inline;
             }
 
             // Wenn Sektion geschlossen, keine Toolbar anzeigen.
             &.or--is-closed {
                 .or-view-toolbar {
                     display: none;
                 }
 
             }
 
             // Diabled Sections are not displayed.
             &.or--disabled {
                 //display: none;
             }
 
             &.or--is-empty {
                 //display: none;
             }
         }*/
 
 
         /* */
         &--visible-on-small {
             display: none;
         }
 
         &--visible-on-wide {
             display: block;
         }
 
         &--navigation-is-small {
             .or-workbench--visible-on-wide {
                 display: none;
             }
 
             .or-workbench--visible-on-small {
                 display: block;
             }
         }
 
         &-navigation {
 
             display: flex;
             flex-direction: row;
             width: 30em;
 
             &-content {
               //width: 100%;
               flex: 1;
               @media @smartphones {
                 flex: none;
               }
             }
             &-filler {
               flex: 0;
               opacity: 0.6;
             }
 
             &-container {
 
                 width: 100%;
                 position: relative;
 
                 //position: fixed;
                 //z-index: 1;
                 //opacity: 0.9;
                 //transition: width 0.15s ease-in-out;
                 //height: 100%;
                 padding:0.7em;
                 overflow-x:hidden; // no horizontal scrolling
 
             }
 
 
           .or-navtree {
             //transition: opacity 0.1s ease-in-out;
           }
 
           &--is-small {
                 width: 0;
 
                 //& ~ .or-workbench-workplace {
                 //    margin-left: 0;
                 //}
 
                 .or-workbench-navigation-container {
                     //opacity: 0.2;
                     width: 0;
                     overflow-y: hidden;
 
                     .or-navtree {
                       opacity: 0.2;
                     }
 
                     /*
                     &:hover {
                         overflow-y: auto;
                         width: 33%;
                         opacity: 0.9;
 
                         .or-navtree {
                             opacity: 1;
                         }
                     }
                     */
                 }
 
                 .or-navtree {
                     opacity: 0;
                 }
             }
 
             @media @smartphones {
 
                 width: 0;
 
                 .or-workbench-navigation-container {
 
                     /*
                     width: 0;
                     padding: 0;
                     */
                 }
 
                 &--is-open {
 
                   .or-workbench-navigation-content {
                     width:90%;
                   }
                   .or-workbench-navigation-filler {
                     flex: 1;
                   }
 
                   position: fixed;
                   width: 100%;
                   z-index: 1;
                   opacity: 1;
                   height:100%;
                 }
             }
 
 
             @media @wide {
                 overflow-y: auto;
             }
 
 
             .or-view {
                 height: 100%;
             }
 
         }
     }
 
 
     &--visible-on-mobile {
         display: none;
         @media @smartphones {
             display: inline;
         }
 
     }
     &--visible-on-desktop {
         //display: inline;
         @media @smartphones {
             display: none;
         }
     }
 
     &-toggle-nav-small {
         display: inline;
         @media @smartphones {
             display: none;
         }
     }
 
     &-toggle-nav-open-close {
         display: none;
         @media @smartphones {
             display: inline;
         }
     }
 
     &-toolbar-icon.or-search {
         //width: 8em;
         @media @smartphones {
             //width: 8em;
         }
 
         input {
             @media @smartphones {
                 //width: 3em;
             }
         }
     }
 
 
     /* Fortschrittsbalken, fuer alle Elemente verfuegbar. */
     &-loader
     {
       position: absolute;
       top: 30%;
       left: 0;
       right: 0;
       margin-left: auto;
       margin-right: auto;
 
       border-width: 0.5em;
       border-style: solid;
       border-radius: 50%;
       visibility: hidden;
       z-index: 6;
 
       &--is-active {
 
         visibility: visible;
         width: 5em;
         height: 5em;
         animation: spin 2s linear infinite;
 
         @keyframes spin {
             0% { transform: rotate(  0deg); }
           100% { transform: rotate(360deg); }
         }
 
         // Reduced Motion
         @media screen and (prefers-reduced-motion: reduce) {
           display: none;
         }
       }
     }
 
 
 
 }
 
 
 
 
 
 
 @media @smartphones {
     html {
         font-size: 1.1em;
     }
 }