Skip to content
This repository was archived by the owner on Dec 31, 2019. It is now read-only.

Commit 61ae7ac

Browse files
andrewconnellandrewconnell
committed
Convert CSS to SCSS
1 parent ee4c157 commit 61ae7ac

20 files changed

+346
-109
lines changed

‎_page-template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<script src="/js/azure-app-insights.js" type="text/javascript"></script>
3131

3232
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
33-
<link rel="stylesheet" href="/css/styles.css" />
33+
<link rel="stylesheet" href="/css/styles.min.css" />
3434
</head>
3535

3636
<body>

‎contribute.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<script src="/js/azure-app-insights.js" type="text/javascript"></script>
2626

2727
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
28-
<link rel="stylesheet" href="/css/styles.css" />
28+
<link rel="stylesheet" href="/css/styles.min.css" />
2929
</head>
3030

3131
<body>

‎css/_colors.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$ms-white: #fff;
2+
$ms-black: #000;
3+
4+
$ms-themePrimary: #0078d7;
5+
$ms-themeDark: #005a9e;
6+
$ms-themeDarker: #004578;

‎css/_reset.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
}

‎css/styles.css‎

Lines changed: 68 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,118 @@
1-
body{
2-
margin:0;
3-
padding:0;
4-
}
1+
body {
2+
margin: 0;
3+
padding: 0; }
54

65
/* >>>>> MAIN PAGE ELEMENTS <<<<< */
76
#page-header {
8-
background-color: #0078d7; /* ms-bgColor-themePrimary */
9-
color:white; /* ms-fontColor-white */
10-
padding-top: 15px;
11-
padding-bottom: 15px;
12-
text-align:center;
13-
width:100%;
14-
}
7+
background-color: #0078d7;
8+
color: #fff;
9+
padding-top: 15px;
10+
padding-bottom: 15px;
11+
text-align: center;
12+
width: 100%; }
1513

1614
#page-main {
1715
text-align: left;
18-
padding-right:25px;
19-
}
16+
padding-right: 25px; }
17+
2018
#page-footer {
21-
background-color: #005a9e; /* ms-bgColor-themeDark */
22-
margin-top:25px;
23-
margin-bottom:25px;
24-
padding-top:15px;
25-
padding-bottom:15px;
26-
text-align:center;
27-
}
28-
29-
#brand-logo{
30-
display:inline-block;
31-
}
19+
background-color: #005a9e;
20+
margin-top: 25px;
21+
margin-bottom: 25px;
22+
padding-top: 15px;
23+
padding-bottom: 15px;
24+
text-align: center; }
25+
26+
.header-element-base, #brand-logo, #brand-name, #site-tagline {
27+
display: inline-block; }
28+
3229
#brand-name {
33-
display:inline-block;
34-
margin-left:15px;
35-
}
30+
margin-left: 15px; }
31+
3632
#site-tagline {
37-
display:inline-block;
38-
margin-left:75px;
39-
width:360px;
40-
text-align: left;
41-
}
33+
margin-left: 75px;
34+
width: 360px;
35+
text-align: left; }
4236

4337
/* global navigation */
4438
nav {
4539
margin: 0;
46-
background: #005a9e; /* ms-bgColor-themeDark */
47-
text-align:right;
48-
}
40+
background: #005a9e;
41+
text-align: right; }
42+
4943
#global-nav {
5044
list-style: none;
51-
margin-right:50px;
52-
}
53-
#global-nav li {
54-
display: inline-block;
55-
}
56-
#global-nav a {
57-
text-decoration: none;
58-
display: block;
59-
text-align:center;
60-
padding: 10px;
61-
color: white; /* ms-fontColor-white */
62-
}
63-
#global-nav li a:hover {
64-
background: #004578; /* ms-bgColor-themeDarker */
65-
}
66-
#global-nav li:last-of-type a {
67-
border-bottom: none;
68-
}
45+
margin-right: 50px; }
46+
#global-nav li {
47+
display: inline-block; }
48+
#global-nav li a:hover {
49+
background: #004578; }
50+
#global-nav a {
51+
text-decoration: none;
52+
display: block;
53+
text-align: center;
54+
padding: 10px;
55+
color: #fff; }
56+
#global-nav li:last-of-type a {
57+
border-bottom: none; }
6958

7059
/* local navigation */
7160
#local-nav {
7261
margin: 15px 50px 0px 0px;
73-
text-align:right;
74-
}
75-
#local-nav ul {
76-
list-style: none;
77-
}
78-
#local-nav ul a {
79-
text-decoration: none;
80-
display:block;
81-
padding:0.5em;
82-
}
83-
#local-nav li:last-of-type a {
84-
border-bottom: none;
85-
}
62+
text-align: right; }
63+
#local-nav ul {
64+
list-style: none; }
65+
#local-nav ul a {
66+
text-decoration: none;
67+
display: block;
68+
padding: 0.5em; }
69+
#local-nav li:last-of-type a {
70+
border-bottom: none; }
8671

8772
/* table utils */
8873
.align-middle {
89-
vertical-align:middle;
90-
}
74+
vertical-align: middle; }
75+
9176
.no-wrap-cell {
92-
white-space: nowrap;
93-
}
77+
white-space: nowrap; }
9478

9579
/* icon page tweaks */
9680
.icon-list ul li {
9781
float: left;
9882
font-size: 11px;
9983
color: black;
100-
width:15%;
84+
width: 15%;
10185
text-align: center;
10286
height: 100px;
103-
padding:10px;
104-
overflow:hidden;
105-
}
106-
.icon-list ul li .ms-Icon {
107-
font-size:35px;
108-
display:block;
109-
margin:10px auto;
110-
}
87+
padding: 10px;
88+
overflow: hidden; }
89+
.icon-list ul li .ms-Icon {
90+
font-size: 35px;
91+
display: block;
92+
margin: 10px auto; }
11193

11294
/* animation page tweaks */
11395
.animation-container {
11496
position: relative;
11597
width: 100%;
11698
display: inline-block;
117-
overflow: hidden;
118-
}
99+
overflow: hidden; }
100+
119101
.animation-content {
120102
height: 100%;
121103
border: 1px solid gray;
122-
padding: 10px;
123-
}
104+
padding: 10px; }
105+
124106
.animation-panel-in {
125107
position: absolute;
126108
top: 0px;
127109
width: 60px;
128110
height: 100%;
129-
opacity: 0;
130-
}
111+
opacity: 0; }
112+
131113
.animation-panel-out {
132114
position: absolute;
133115
top: 0px;
134116
width: 60px;
135117
height: 100%;
136-
opacity: 1;
137-
}
118+
opacity: 1; }

‎css/styles.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/styles.scss‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
@import '_reset';
2+
@import '_colors';
3+
4+
/* >>>>> MAIN PAGE ELEMENTS <<<<< */
5+
#page-header {
6+
background-color: $ms-themePrimary;
7+
color: $ms-white;
8+
padding-top: 15px;
9+
padding-bottom: 15px;
10+
text-align: center;
11+
width: 100%;
12+
}
13+
14+
#page-main {
15+
text-align: left;
16+
padding-right: 25px;
17+
}
18+
#page-footer {
19+
background-color: $ms-themeDark;
20+
margin-top: 25px;
21+
margin-bottom: 25px;
22+
padding-top: 15px;
23+
padding-bottom: 15px;
24+
text-align: center;
25+
}
26+
27+
.header-element-base {
28+
display: inline-block;
29+
}
30+
#brand-logo{
31+
@extend .header-element-base;
32+
}
33+
#brand-name {
34+
@extend .header-element-base;
35+
margin-left: 15px;
36+
}
37+
#site-tagline {
38+
@extend .header-element-base;
39+
margin-left: 75px;
40+
width: 360px;
41+
text-align: left;
42+
}
43+
44+
/* global navigation */
45+
nav {
46+
margin: 0;
47+
background: $ms-themeDark;
48+
text-align:right;
49+
}
50+
#global-nav {
51+
list-style: none;
52+
margin-right: 50px;
53+
li {
54+
display: inline-block;
55+
56+
a:hover {
57+
background: $ms-themeDarker;
58+
}
59+
}
60+
a {
61+
text-decoration: none;
62+
display: block;
63+
text-align: center;
64+
padding: 10px;
65+
color: $ms-white;
66+
}
67+
li:last-of-type a {
68+
border-bottom: none;
69+
}
70+
}
71+
72+
/* local navigation */
73+
#local-nav {
74+
margin: 15px 50px 0px 0px;
75+
text-align: right;
76+
ul {
77+
list-style: none;
78+
a {
79+
text-decoration: none;
80+
display: block;
81+
padding: 0.5em;
82+
}
83+
}
84+
li:last-of-type a {
85+
border-bottom: none;
86+
}
87+
}
88+
89+
/* table utils */
90+
.align-middle {
91+
vertical-align: middle;
92+
}
93+
.no-wrap-cell {
94+
white-space: nowrap;
95+
}
96+
97+
/* icon page tweaks */
98+
.icon-list ul li {
99+
float: left;
100+
font-size: 11px;
101+
color: black;
102+
width: 15%;
103+
text-align: center;
104+
height: 100px;
105+
padding: 10px;
106+
overflow: hidden;
107+
108+
.ms-Icon {
109+
font-size: 35px;
110+
display: block;
111+
margin: 10px auto;
112+
}
113+
}
114+
115+
/* animation page tweaks */
116+
.animation-container {
117+
position: relative;
118+
width: 100%;
119+
display: inline-block;
120+
overflow: hidden;
121+
}
122+
.animation-content {
123+
height: 100%;
124+
border: 1px solid gray;
125+
padding: 10px;
126+
}
127+
.animation-panel-in {
128+
position: absolute;
129+
top: 0px;
130+
width: 60px;
131+
height: 100%;
132+
opacity: 0;
133+
}
134+
.animation-panel-out {
135+
position: absolute;
136+
top: 0px;
137+
width: 60px;
138+
height: 100%;
139+
opacity: 1;
140+
}

‎features/animations.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
3131
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" />
32-
<link rel="stylesheet" href="/css/styles.css" />
32+
<link rel="stylesheet" href="/css/styles.min.css" />
3333

3434
<!-- animation utils -->
3535
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js" type="text/javascript"></script>

0 commit comments

Comments
 (0)