pip-webui/pip-webui-layouts/src/content.less

HTML5 UI for LOB applications

// @file CSS styles for layout content
// @copyright Digital Living Software Corp. 2014-2015

.pip-container {
    /*min-height: 100%;*/
    width: 100%;
    .flex-var;
    .flex-container;
    .flex-direction-column;
    .flex-vertical-center;
    .flex-vertical-center;
    max-height: 100%;
}

.pip-card, 
.pip-document {
    .pip-body{
      overflow-x: hidden !important;
      //!!z-index: 10;
    }
}
        
.pip-document {
    .pip-content-container {
      max-width: 100%;
      position: relative;

      .pip-body {
        //overflow-x: hidden !important;
        max-width: 100%;
        box-sizing: border-box;
      }
    }
}

.pip-card, 
.pip-document{
    .pip-header{
        .flex-direction-row;
    }
}

.pip-card, .pip-document, .pip-dialog {
    .pip-nav {
        .flex-fixed;
        // Expand to overlay document shadow
        //!!.box-sizing(content-box);
        //margin-left: -5px;
        //!!margin-top: -1px;
        //padding-left: 5px;
        //padding-right: 5px;
        //!!min-height: 48px;
        //!!height: 48px;
        min-height: 0px;

        md-tabs {
            //!!min-height: 48px;
            //!!height: 48px;
            //!!overflow: hidden;
        }
    }

    .pip-menu-container {
        position: relative;
        //!!z-index: 200;
        .flex-container;
        .flex-direction-row;
        .flex-var;
    }

    .pip-content-container {
        position: relative;
        .flex-container;
        .flex-direction-column;
        .flex-var;
    }
    
    .pip-menu {
        .flex-fixed;
        .scroll;

        padding-top: 0px;
        padding-bottom: 0px;

        width: 300px;
        //background-color: @color-content;
        border-right: @divider-border;
        //!!border-bottom-left-radius: @border-radius;
    }

    .pip-header {
        position: relative;
       // .flex-order(1);
        .flex-fixed;

        .flex-container;
        .flex-vertical-center;
        .flex-horizontal-start;

        //!!border-top-left-radius: @border-radius;
        //!!border-top-right-radius: @border-radius;

        //color: @color-primary;
        //background-color: @color-content;
        //font-family: @font-family;
        letter-spacing:   @font-letter-spacing-title; 

        //min-height: @dialog-padding-desktop + @dialog-padding-desktop;
        padding:  @padding-desktop @padding-desktop @padding-bottom-title @padding-desktop;
    }

    .pip-footer{
        position: relative;
        .flex-order(4);
        .flex-fixed;

        .flex-container;
        .flex-vertical-center;
        .flex-horizontal-end;
        .flex-direction-row;

        //!!border-bottom-left-radius: @border-radius;
        //!!border-bottom-right-radius: @border-radius;

        //background-color: @color-content;
        border-top: @divider-border;
        min-height: 56px; // от куда вообще эти цифры :  Леша, сказал поставить так.
        padding:  0px @padding-desktop 0px @padding-desktop;
    }

    .pip-footer-for-composite {
        .flex-direction-column;
        .flex-order(3);
        .flex-fixed;
    }

    .pip-body {
        position: relative;
        .flex-order(2);
        .flex-var();

        //background: rgb(250, 250, 250);
        //!!overflow-y: auto !important;
        .scroll-y;

        //color: @color-primary;
        letter-spacing: @font-letter-spacing-primary;
        padding: @padding-desktop;
        margin: 0;
    }

    .pip-header ~ .pip-body {
        padding-top: 0;
    }

    .pip-footer ~ .pip-body {
        padding-bottom: 0;
    }
}

.pip-document {

   .pip-menu-container{
     //max-height: ~"calc(100% - 24px)";
     @media(max-width: 1200px){
       max-height: 100%;
     }
   }
}


// On tablet
@media (max-width: 1200px) {
    .pip-card, 
    .pip-document {
        .pip-header {
            padding:  @padding-desktop @padding-mobile @padding-bottom-title @padding-mobile; 
        }

        .pip-footer{
            padding:  0px @padding-mobile 0px @padding-mobile;
            min-height: 56px !important;
        }

        .pip-body {
            padding: @padding-mobile;

        }

        .pip-header ~ .pip-body {
            padding-top: 0;
        }

        .pip-footer ~ .pip-body, 
        .pip-footer-for-composite ~ .pip-body {
            padding-bottom: 0;
        }
    }
}

// On phone
@media (max-width: 768px) {
    .pip-menu {
        width: 100% !important;
    }

    .pip-document {
        .pip-menu {
            .position-fill;
            //!!z-index: 300;
        }
    }

    .pip-dialog {
      .pip-header{
        padding:  @padding-mobile;
      }
    }
}