Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit e72fd89

Browse files
author
Marcy Sutton
committed
fix(): refactor global CSS styles
Includes new typography stylesheet, flex styles for layout.scss in Safari Closes #1442, #1561, #1718
1 parent 61245b7 commit e72fd89

File tree

14 files changed

+190
-157
lines changed

14 files changed

+190
-157
lines changed

‎docs/app/css/style.css

+11-30
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,7 @@ body {
44
overflow: hidden;
55
max-width: 100%;
66
max-height: 100%;
7-
font-size: 16px;
87
}
9-
10-
a {
11-
color: #3f51b5;
12-
text-decoration: none;
13-
}
14-
a:hover, a:focus {
15-
text-decoration: underline;
16-
}
17-
188
table {
199
margin-bottom: 20px;
2010
max-width: 100%;
@@ -37,20 +27,6 @@ th {
3727
background-color: #f5f5f5;
3828
}
3929

40-
ul {
41-
margin: 0;
42-
padding: 0;
43-
}
44-
ul li {
45-
margin-left: 16px;
46-
padding: 0;
47-
margin-top: 3px;
48-
list-style-position: inside;
49-
}
50-
ul li:first-child {
51-
margin-top: 0;
52-
}
53-
5430
ul.skip-links li {
5531
list-style: none;
5632
margin: 0;
@@ -238,10 +214,13 @@ code:not(.highlight) {
238214
}
239215
/* End Docs Menu */
240216

241-
.docs-logotype {
242-
line-height:40px;
243-
text-indent: 15px;
217+
.docs-logo:focus {
218+
outline: none;
244219
}
220+
.docs-logotype {
221+
line-height: 40px;
222+
text-indent: 15px;
223+
}
245224
.docs-menu-icon {
246225
background: none;
247226
border: none;
@@ -264,7 +243,10 @@ code:not(.highlight) {
264243
display: none;
265244
}
266245
}
267-
246+
[role=main]:focus,
247+
.docs-toolbar-tools:focus {
248+
outline: none;
249+
}
268250
docs-demo {
269251
display: block;
270252
margin-top: 16px;
@@ -480,7 +462,6 @@ code.api-type {
480462
}
481463

482464
.layout-title {
483-
color: #999999;
484465
font-size: 14px;
485466
font-weight: bold;
486467
text-transform: uppercase;
@@ -539,5 +520,5 @@ md-content.demo-source-container > hljs > pre > code.highlight {
539520
}
540521

541522
.api-section h3 {
542-
padding-top:20px;
523+
padding-top: 20px;
543524
}

‎docs/config/template/index.template.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<md-toolbar>
2424
<h1 class="md-toolbar-tools">
25-
<a ng-href="/" layout="row" flex>
25+
<a ng-href="/" layout="row" flex class="docs-logo">
2626
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" style="
2727
width: 40px; height: 40px;">
2828
<path d="M 50 0 L 100 14 L 92 80 L 50 100 L 8 80 L 0 14 Z" fill="#b2b2b2"></path>
@@ -65,7 +65,7 @@ <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ secti
6565
<div layout="column" tabIndex="-1" role="main" flex>
6666
<md-toolbar>
6767

68-
<div class="md-toolbar-tools" ng-click="openMenu()">
68+
<div class="md-toolbar-tools docs-toolbar-tools" ng-click="openMenu()" tabIndex="-1">
6969
<button class="docs-menu-icon" hide-gt-sm aria-label="Toggle Menu">
7070
<md-icon md-svg-src="img/icons/ic_menu_24px.svg"></md-icon>
7171
</button>

‎gulpfile.js

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ var config = {
6666
'src/core/style/variables.scss',
6767
'src/core/style/mixins.scss',
6868
'src/core/style/structure.scss',
69+
'src/core/style/typography.scss',
6970
'src/core/style/layout.scss'
7071
],
7172
scssStandaloneFiles: [

‎src/components/checkbox/checkbox.scss

+7
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@ $checkbox-width: 18px !default;
22
$checkbox-height: $checkbox-width !default;
33

44
md-checkbox {
5+
box-sizing: border-box;
56
display: block;
67
margin: 15px;
78
white-space: nowrap;
89
cursor: pointer;
910
outline: none;
1011
user-select: none;
1112

13+
*,
14+
*:before,
15+
*:after {
16+
box-sizing: border-box;
17+
}
18+
1219
.md-container {
1320
position: relative;
1421
top: 4px;

‎src/components/gridList/gridList.scss

+7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
md-grid-list {
2+
box-sizing: border-box;
23
display: block;
34
position: relative;
45

6+
*,
7+
*:before,
8+
*:after {
9+
box-sizing: border-box;
10+
}
11+
512
md-grid-tile {
613
display: block;
714
position: absolute;

‎src/components/icon/demoFontIcons/style.css

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
padding:25px;
44
width: 100%;
55
}
6+
.appDemoFontIcons,
7+
.appDemoFontIcons *:before,
8+
.appDemoFontIcons *:after {
9+
box-sizing: border-box;
10+
}
611

712
/* Bootstrap Overrides */
813
[class^="icon-"]:before,

‎src/components/radioButton/radio-button.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,18 @@ $radio-height: $radio-width !default;
33

44
md-radio-button,
55
.md-switch-thumb { // Used in switch
6+
box-sizing: border-box;
67
display: block;
78
margin: 15px;
89
white-space: nowrap;
910
cursor: pointer;
1011

12+
*,
13+
*:before,
14+
*:after {
15+
box-sizing: border-box;
16+
}
17+
1118
input {
1219
display: none;
1320
}
@@ -23,7 +30,7 @@ md-radio-button,
2330
.md-ripple-container {
2431
position: absolute;
2532
display: block;
26-
width: $radio-width * 3;
33+
width: $radio-width * 3;
2734
height: $radio-width * 3;
2835
left: -$radio-width;
2936
top: -$radio-width;

‎src/components/sidenav/sidenav.scss

+15
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ $sidenav-default-width: 304px !default;
22
$sidenav-min-space: 56px !default;
33

44
md-sidenav {
5+
box-sizing: border-box;
56
position: absolute;
67

78
width: $sidenav-default-width;
@@ -13,6 +14,20 @@ md-sidenav {
1314
overflow: auto;
1415
flex-direction: column;
1516

17+
*,
18+
*:before,
19+
*:after {
20+
box-sizing: border-box;
21+
}
22+
23+
ul {
24+
list-style: none;
25+
}
26+
27+
&:focus {
28+
outline: none;
29+
}
30+
1631
&.md-closed {
1732
display: none;
1833
}

‎src/components/tabs/tabs.scss

+7
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,17 @@ $tabs-tab-width: $baseline-grid * 12 !default;
44
$tabs-header-height: 48px !default;
55

66
md-tabs {
7+
box-sizing: border-box;
78
display: block;
89
width: 100%;
910
font-weight: 500;
1011
overflow: auto;
12+
13+
*,
14+
*:before,
15+
*:after {
16+
box-sizing: border-box;
17+
}
1118
}
1219

1320
.md-header {

‎src/components/toolbar/toolbar.scss

+7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ $toolbar-indent-margin: 64px !default;
66
$toolbar-padding: 16px !default;
77

88
md-toolbar {
9+
box-sizing: border-box;
910
display: flex;
1011
flex-direction: column;
1112

@@ -18,6 +19,12 @@ md-toolbar {
1819

1920
box-shadow: $whiteframe-shadow-z1;
2021

22+
*,
23+
*:before,
24+
*:after {
25+
box-sizing: border-box;
26+
}
27+
2128
&.md-tall {
2229
height: $toolbar-tall-height;
2330
min-height: $toolbar-tall-height;

‎src/core/style/layout.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111

1212
[layout] {
1313
box-sizing: border-box;
14+
display: -webkit-box;
15+
display: -webkit-flex;
16+
display: -moz-box;
17+
display: -moz-flex;
18+
display: -ms-flexbox;
1419
display: flex;
1520
}
1621

@@ -40,7 +45,7 @@
4045
min-height: 100%;
4146
width: 100%;
4247
}
43-
@-moz-document url-prefix() {
48+
@-moz-document url-prefix() {
4449
[layout-fill] {
4550
margin: 0;
4651
width: 100%;
@@ -69,6 +74,11 @@
6974
@mixin layout-for-name($name) {
7075
[layout-#{$name}] {
7176
box-sizing: border-box;
77+
display: -webkit-box;
78+
display: -webkit-flex;
79+
display: -moz-box;
80+
display: -moz-flex;
81+
display: -ms-flexbox;
7282
display: flex;
7383
}
7484
[layout-#{$name}=column] {
@@ -86,6 +96,7 @@
8696
}
8797

8898
[#{$flexName}] {
99+
box-sizing: border-box;
89100
flex: 1;
90101
}
91102

‎src/core/style/mixins.scss

+14
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,17 @@
1717
color: $color;
1818
}
1919
}
20+
@function map-to-string($map) {
21+
$map-str: '{';
22+
$keys: map-keys($map);
23+
$len: length($keys);
24+
@for $i from 1 through $len {
25+
$key: nth($keys, $i);
26+
$value: map-get($map, $key);
27+
$map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
28+
@if $i != $len {
29+
$map-str: $map-str + ',';
30+
}
31+
}
32+
@return $map-str + '}';
33+
}

0 commit comments

Comments
 (0)