graphic_graphic_2d/default.scss

// Copyright (c) 2021 Huawei Device Co., Ltd.
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// WMLayout

// # window type {
//     // all mode attribute define
//     attr: value;
//     &:mode {
//         // special mode attribute define
//         attr: value;
//     }
// }

// layout_attribute: left, top, width, height
// align_attribute: horizon-align, vertical-align
// other_attribute: z-index, position

// z-index: {number}
// position: relative, fixed, static
// horizon-align: left, middle, right
// vertical-align: top, middle, bottom
// left, top, width, height: {number}%

// "&:mode": full, free, unset(default in type)

// relative layout in Relative Rectangle
// Relative Rectangle = FullScreen Rectangle - all of (Static Rectangle)
// fixed layout don't affect other layout

#WINDOW_TYPE_NORMAL {
    z-index: 0;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 100.0%;
    height: 100.0%;
    &:free {
        z-index: 51;
    }
}

#WINDOW_TYPE_SPLIT_LINE {
    z-index: 0;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 100.0%;
    height: 100.0%;
}

#WINDOW_TYPE_STATUS_BAR {
    z-index: 10;
    position: static;
    horizon-align: middle;
    vertical-align: top;
    width: 100%;
    height: 7%;
}

#WINDOW_TYPE_NAVI_BAR {
    z-index: 20;
    position: static;
    horizon-align: middle;
    vertical-align: bottom;
    width: 100%;
    height: 7%;
}

#WINDOW_TYPE_ALARM_SCREEN {
    z-index: 30;
    position: fixed;
    horizon-align: middle;
    vertical-align: middle;
    width: 80%;
    height: 30%;
}

#WINDOW_TYPE_SYSTEM_UI {
    z-index: 31;
    position: relative;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_LAUNCHER {
    z-index: 40;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 100.0%;
    height: 100.0%;
}

#WINDOW_TYPE_VIDEO {
    z-index: 41;
}

#WINDOW_TYPE_INPUT_METHOD {
    z-index: 50;
    position: relative;
    horizon-align: middle;
    vertical-align: bottom;
    width: 100.0%;
    height: 33.3%;
}

#WINDOW_TYPE_INPUT_METHOD_SELECTOR {
    z-index: 60;
    position: relative;
    horizon-align: middle;
    vertical-align: bottom;
    width: 90.0%;
    height: 33.3%;
}

#WINDOW_TYPE_VOLUME_OVERLAY {
    z-index: 70;
    position: fixed;
    horizon-align: middle;
    width: 95.0%;

    top: 2.5%;
    height: 40.0%;
}

#WINDOW_TYPE_NOTIFICATION_SHADE {
    z-index: 80;
    position: fixed;
    horizon-align: middle;
    vertical-align: top;
    width: 100%;
    height: 50%;
}

#WINDOW_TYPE_FLOAT {
    z-index: 90;
    position: relative;
    horizon-align: middle;
    width: 85%;

    top: 7.5%;
    height: 50%;
}

#WINDOW_TYPE_SCREENSAVER {
    z-index: 100;
    position: fixed;
    horizon-align: middle;
    vertical-align: middle;
    width: 100.0%;
    height: 100.0%;
}

#WINDOW_TYPE_SEARCHER {
    z-index: 110;
    position: relative;
    horizon-align: middle;
    vertical-align: bottom;
    width: 80.0%;
    height: 7%;
}

#WINDOW_TYPE_CALLING {
    z-index: 120;
    horizon-align: middle;
    top: 5%;
    width: 80.0%;
    height: 7%;
}

#WINDOW_TYPE_TOAST {
    z-index: 130;
    position: relative;
    horizon-align: middle;
    width: 80.0%;
    top: 86%;
    height: 7%;
}

#WINDOW_TYPE_SCREENSAVER_CALLING {
    z-index: 140;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 100.0%;
    height: 100.0%;
}

#WINDOW_TYPE_SCREENSAVER_DIALOG {
    z-index: 150;
    position: relative;
    horizon-align: middle;
    // vertical-align: top;
    top: 40%;
    width: 90.0%;
    height: 10.0%;
}

#WINDOW_TYPE_SYSTEM_ERROR {
    z-index: 160;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 80%;
    height: 30%;
}

#WINDOW_TYPE_WALLPAPER {
    z-index: 170;
    position: fixed;
    horizon-align: middle;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_STATUS_SCREEN {
    z-index: 180;
    position: fixed;
    horizon-align: middle;
    vertical-align: top;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_SAFE_OVERLAY {
    z-index: 190;
    position: fixed;
    horizon-align: middle;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_FULL_SCREEN {
    z-index: 200;
    position: fixed;
    horizon-align: middle;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_POPUP {
    z-index: 210;
    position: relative;
    horizon-align: middle;
    vertical-align: top;
    width: 80%;
    height: 18%;
}

#WINDOW_TYPE_ANIMATION {
    z-index: 990;
    position: fixed;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_LAUNCH_PAGE {
    z-index: 0;
    position: fixed;
    vertical-align: top;
    width: 100%;
    height: 93%;
}

#WINDOW_TYPE_CURSOR {
    z-index: 999;
    position: fixed;
    width: 1%;
    height: 1%;
}

#WINDOW_TYPE_APPLICATION_BASE {
    z-index: 1;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_APPLICATION_FIRST {
    z-index: 2;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#WINDOW_TYPE_APPLICATION_NORMAL {
    z-index: 3;
    position: relative;
    horizon-align: middle;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

//This Window is Toppest
#WINDOW_TYPE_TOP {
    z-index: 9999;
    position: fixed;
    horizon-align: middle;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}