forked from vmware-archive/clarity
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_layout.clarity.scss
91 lines (77 loc) · 2.35 KB
/
_layout.clarity.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.
@include exports('layout.clarity') {
.main-container {
display: flex;
flex-direction: column;
height: 100vh;
@include css-var(background, clr-global-app-background, $clr-global-app-background, $clr-use-custom-properties);
.alert.alert-app-level {
flex: 0 0 auto;
overflow-x: hidden;
}
header,
.header {
flex: 0 0 $clr-header-height;
}
.sub-nav,
.subnav {
flex: 0 0 $clr-subnav-height;
}
//This is a utility class which mimics the main-container class
//and occupies the remaining space inside of the main-container
//after the header just in case our users app layout requires
//that the .subnav and the .content-container be inside of an
//angular component
.u-main-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: hidden; //IE 10 doesn't like it if we don't use this
}
.content-container {
display: flex;
flex: 1 1 auto;
//needed for Firefox:
//http://stackoverflow.com/a/30580228/3538394
//http://stackoverflow.com/a/26916542/3538394
//min-height: 0px works in Firefox but not in IE. IE wants a positive value
//IE:
//http://stackoverflow.com/a/14964944/3538394
min-height: $clr_baselineRem_1px;
.content-area {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: $clr-content-area-padding-top $clr-content-area-padding-right $clr-content-area-padding-bottom
$clr-content-area-padding-left;
& > :first-child {
margin-top: 0;
}
}
.sidenav {
flex: 0 0 auto;
order: -1;
overflow: hidden; //overflow-y enabled in .sidenav-content
}
.clr-vertical-nav {
flex: 0 0 auto;
order: -1;
}
}
}
@media print {
.main-container {
height: auto;
}
}
body.no-scrolling,
body[cds-layout='no-scrolling'] {
overflow: hidden;
// The selector below targets Clarity-UI and is provided for compatibility
.main-container .content-container .content-area {
overflow: hidden;
}
}
}