Home | History | Annotate | Download | only in front_end 
      1 /*
      2  * Copyright (C) 2011 Google Inc. All rights reserved.
      3  *
      4  * Redistribution and use in source and binary forms, with or without
      5  * modification, are permitted provided that the following conditions are
      6  * met:
      7  *
      8  * 1. Redistributions of source code must retain the above copyright
      9  * notice, this list of conditions and the following disclaimer.
     10  *
     11  * 2. Redistributions in binary form must reproduce the above
     12  * copyright notice, this list of conditions and the following disclaimer
     13  * in the documentation and/or other materials provided with the
     14  * distribution.
     15  *
     16  * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
     17  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
     18  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
     19  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
     20  * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
     21  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
     22  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
     23  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
     24  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
     25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
     26  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     27  */
     28 
     29 .split-view {
     30     display: flex;
     31     overflow: hidden;
     32 }
     33 
     34 .split-view-contents {
     35     overflow: auto;
     36     display: flex;
     37     position: relative;
     38     flex-direction: column;
     39 }
     40 
     41 .split-view-sidebar {
     42     flex: none;
     43 }
     44 
     45 .split-view-main, .split-view-sidebar.maximized {
     46     flex: auto;
     47 }
     48 
     49 .split-view.hbox > .split-view-resizer {
     50     position: absolute;
     51     top: 0;
     52     bottom: 0;
     53     width: 6px;
     54     z-index: 500;
     55 }
     56 
     57 .split-view.vbox > .split-view-resizer {
     58     position: absolute;
     59     left: 0;
     60     right: 0;
     61     height: 6px;
     62     z-index: 500;
     63 }
     64 
     65 .split-view-resizer-border {
     66     pointer-events: none;
     67 }
     68 
     69 .split-view.vbox > .split-view-resizer > .split-view-resizer-border {
     70     width: 100%;
     71     margin-top: 3px;
     72     height: 1px;
     73     border-top: 1px solid rgb(64%, 64%, 64%);
     74 }
     75 
     76 .split-view.hbox > .split-view-resizer > .split-view-resizer-border {
     77     height: 100%;
     78     margin-left: 3px;
     79     width: 1px;
     80     border-left: 1px solid rgb(64%, 64%, 64%);
     81 }
     82 
     83 .split-view button.sidebar-show-hide-button {
     84     position: absolute;
     85     background-image: none;
     86     height: 16px;
     87     width: 16px;
     88     border: none;
     89     z-index: 10;
     90 }
     91 
     92 .split-view button.left-sidebar-show-hide-button,
     93 .split-view button.top-sidebar-show-hide-button {
     94     top: 4px;
     95     left: 4px;
     96 }
     97 
     98 .split-view button.left-sidebar-show-hide-button:active,
     99 .split-view button.top-sidebar-show-hide-button:active {
    100     top: 5px;
    101     left: 3px;
    102 }
    103 
    104 .split-view button.right-sidebar-show-hide-button {
    105     top: 4px;
    106     right:2px;
    107 }
    108 
    109 .split-view button.right-sidebar-show-hide-button:active {
    110     top: 5px;
    111     right: 1px;
    112 }
    113 
    114 .split-view button.bottom-sidebar-show-hide-button {
    115     bottom: 0px;
    116     right: 1px;
    117 }
    118 
    119 .split-view button.bottom-sidebar-show-hide-button:active {
    120     bottom: 0;
    121     right: 0;
    122 }
    123 
    124 .split-view button.left-sidebar-show-hide-button.toggled-show > .glyph {
    125     -webkit-mask-position: -168px -76px; /* |> */
    126 }
    127 
    128 .split-view button.left-sidebar-show-hide-button.toggled-hide > .glyph {
    129     -webkit-mask-position: -199px -76px; /* |< */
    130 }
    131 
    132 .split-view button.right-sidebar-show-hide-button.toggled-show > .glyph {
    133     -webkit-mask-position: -296px -76px; /* <| */
    134 }
    135 
    136 .split-view button.right-sidebar-show-hide-button.toggled-hide > .glyph {
    137     -webkit-mask-position: -264px -76px; /* >| */
    138 }
    139 
    140 .split-view button.top-sidebar-show-hide-button.toggled-show > .glyph {
    141     -webkit-mask-position: -168px -76px; /* |> */
    142     -webkit-transform: rotate(90deg);
    143 }
    144 
    145 .split-view button.top-sidebar-show-hide-button.toggled-hide > .glyph {
    146     -webkit-mask-position: -199px -76px; /* |< */
    147     -webkit-transform: rotate(90deg);
    148 }
    149 
    150 .split-view button.bottom-sidebar-show-hide-button.toggled-show > .glyph {
    151     -webkit-mask-position: -296px -76px; /* <| */
    152     -webkit-transform: rotate(90deg);
    153 }
    154 
    155 .split-view button.bottom-sidebar-show-hide-button.toggled-hide > .glyph {
    156     -webkit-mask-position: -264px -76px; /* >| */
    157     -webkit-transform: rotate(90deg);
    158 }
    159