O. css / shape.css

1
/*
2
 Copyright 2016 Google Inc. All rights reserved.
3
4
 Licensed under the Apache License, Version 2.0 (the "License");
5
 you may not use this file except in compliance with the License.
6
 You may obtain a copy of the License at
7
8
     http://www.apache.org/licenses/LICENSE-2.0
9
10
 Unless required by applicable law or agreed to in writing, software
11
 distributed under the License is distributed on an "AS IS" BASIS,
12
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
 See the License for the specific language governing permissions and
14
 limitations under the License.
15
*/
16

  
17
:root {

  
18
  /* Fully rounded */

  
19
  --md-sys-shape-corner-full-family: 3px;

  
20
  /* Extra large top rounding */

  
21
  --md-sys-shape-corner-extra-large-top-family: 1px;

  
22
  --md-sys-shape-corner-extra-large-top-default-size: 0px;

  
23
  --md-sys-shape-corner-extra-large-top-top-left: 28px;

  
24
  --md-sys-shape-corner-extra-large-top-top-right-unit: 1px;

  
25
  --md-sys-shape-corner-extra-large-top-top-right: 28px;

  
26
  /* Extra large rounding */

  
27
  --md-sys-shape-corner-extra-large-family: 1px;

  
28
  --md-sys-shape-corner-extra-large-default-size-unit: 1px;

  
29
  --md-sys-shape-corner-extra-large-default-size: 28px;

  
30
  /* Large top rounding */

  
31
  --md-sys-shape-corner-large-top-family: 1px;

  
32
  --md-sys-shape-corner-large-top-default-size-unit: 1px;

  
33
  --md-sys-shape-corner-large-top-default-size: 0px;

  
34
  --md-sys-shape-corner-large-top-top-left-unit: 1px;

  
35
  --md-sys-shape-corner-large-top-top-left: 16px;

  
36
  --md-sys-shape-corner-large-top-top-right-unit: 1px;

  
37
  --md-sys-shape-corner-large-top-top-right: 16px;

  
38
  /* Large end rounding */

  
39
  --md-sys-shape-corner-large-end-family: 1px;

  
40
  --md-sys-shape-corner-large-end-default-size-unit: 1px;

  
41
  --md-sys-shape-corner-large-end-default-size: 0px;

  
42
  --md-sys-shape-corner-large-end-top-right-unit: 1px;

  
43
  --md-sys-shape-corner-large-end-top-right: 16px;

  
44
  --md-sys-shape-corner-large-end-bottom-right-unit: 1px;

  
45
  --md-sys-shape-corner-large-end-bottom-right: 16px;

  
46
  /* Large rounding */

  
47
  --md-sys-shape-corner-large-family: 1px;

  
48
  --md-sys-shape-corner-large-default-size-unit: 1px;

  
49
  --md-sys-shape-corner-large-default-size: 16px;

  
50
  /* Medium rounding */

  
51
  --md-sys-shape-corner-medium-family: 1px;

  
52
  --md-sys-shape-corner-medium-default-size-unit: 1px;

  
53
  --md-sys-shape-corner-medium-default-size: 12px;

  
54
  /* Small rounding */

  
55
  --md-sys-shape-corner-small-family: 1px;

  
56
  --md-sys-shape-corner-small-default-size-unit: 1px;

  
57
  --md-sys-shape-corner-small-default-size: 8px;

  
58
  /* Extra small top rounding */

  
59
  --md-sys-shape-corner-extra-small-top-family: 1px;

  
60
  --md-sys-shape-corner-extra-small-top-default-size-unit: 1px;

  
61
  --md-sys-shape-corner-extra-small-top-default-size: 0px;

  
62
  --md-sys-shape-corner-extra-small-top-top-left-unit: 1px;

  
63
  --md-sys-shape-corner-extra-small-top-top-left: 4px;

  
64
  --md-sys-shape-corner-extra-small-top-top-right-unit: 1px;

  
65
  --md-sys-shape-corner-extra-small-top-top-right: 4px;

  
66
  /* Extra small rounding */

  
67
  --md-sys-shape-corner-extra-small-family: 1px;

  
68
  --md-sys-shape-corner-extra-small-default-size-unit: 1px;

  
69
  --md-sys-shape-corner-extra-small-default-size: 4px;

  
70
  /* No rounding */

  
71
  --md-sys-shape-corner-none-family: 1px;

  
72
  --md-sys-shape-corner-none-default-size-unit: 1px;

  
73
  --md-sys-shape-corner-none-default-size: 0px;

  
74

  
75
  --md-sys-shape-small: var(--md-sys-shape-corner-small-default-size);

  
76
  --md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size);

  
77
  --md-sys-shape-large: var(--md-sys-shape-corner-large-default-size);

  
78
}

  
79

  
80
.shape-none {

  
81
  border-radius: var(--md-sys-shape-corner-none-default-size);

  
82
}

  
83
.shape-extra-small {

  
84
  border-radius: var(--md-sys-shape-corner-extra-small-default-size);

  
85
}

  
86
.shape-small {

  
87
  border-radius: var(--md-sys-shape-corner-small-default-size);

  
88
}

  
89
.shape-medium {

  
90
  border-radius: var(--md-sys-shape-corner-medium-default-size);

  
91
}

  
92
.shape-large {

  
93
  border-radius: var(--md-sys-shape-corner-large-default-size);

  
94
}

  
95
.shape-extra-large {

  
96
  border-radius: var(--md-sys-shape-corner-extra-large-default-size);

  
97
}

  
98
.extra-small-top {

  
99
  border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);

  
100
  border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);

  
101
}

  
102
.large-end {

  
103
  border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right);

  
104
  border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right);

  
105
}

  
106
.large-top {

  
107
  border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left);

  
108
  border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right);

  
109
}

  
110
.extra-large-top {

  
111
  border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left);

  
112
  border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right);

  
113
}

  
114

 


 
 
 
     skip_previous
    
 
     skip_next