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
|
/* CSS declarations go here */
normalize-css()
// Colors
black = #222
grey = #D8D8D8
purp = #524763
dark-purp = #373142
red = #E54B4B
teal = #82D8D8
dark-teal = #66A6A6
green = #CBE56C
blue = #16528E
bright-blue = #0082C8
maroon = #6A2140
light-red = #CA5765
pink = #CF256D
orange = #E8846B
// cisco brand Colors
brand-blue = #2196F3
spark-blue = #0A9AD7
spark-green = #73BE46
spark-grey = #D1D2D1
dk-blue = #303f9f
light-grey = #efefef
dk-gray1 = #58585b
// cisco brand status Colors
status-blue = #64bbe3
status-turq = #14a792
status-green = #6cc04a
status-yellow = #ffcc00
status-orange = #ff7300
status-red = #cf2030
// cisco accepteble colors
// Material Shadows
shadow-level(l = 1)
if l == -1
box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
if l == 0
box-shadow: none;
if l == 1
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
if l == 2
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
if l == 3
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
if l == 4
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
if l == 5
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
// Common Transition
trans($sec = 0.3s)
transition: all $sec ease
// Grid
$xsmall = 340px
$small = 500px
$med = 700px
$large = 960px
$wide = 1200px
z = {
neg: -7,
lowest: 1,
low: 4,
mid: 5,
video: 6,
header: 7,
nav: 8,
mini: 9,
modal: 10,
highest: 11
}
$side-nav = 100px
$side-nav-large = 200px
body{
background light-grey
}
@import 'css/*'
|
