feat(aio): add new classes, table and images styling (#15478)
This commit is contained in:
Stefanie Fluin
Pete Bacon Darwin
parent
b2830384f5
commit
c9e51d9911
@ -6,6 +6,7 @@
|
||||
font-family: $main-font;
|
||||
margin: 0;
|
||||
color: $darkgray;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -54,12 +55,16 @@
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
p, ol, ul, ol, input, a {
|
||||
p, ol, ul, ol, li, input, a {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.30px;
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin: 14px 0px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -44,7 +44,13 @@ aio-search-box input {
|
||||
margin-left: 8px;
|
||||
width:150px;
|
||||
height: 40%;
|
||||
@include bp(big){
|
||||
@include bp(big) {
|
||||
transition: width 0.4s ease-in-out;
|
||||
&:focus {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@include bp(medium) {
|
||||
transition: width 0.4s ease-in-out;
|
||||
&:focus {
|
||||
width: 50%;
|
||||
|
||||
21
aio/src/styles/2-modules/_alert.scss
Normal file
21
aio/src/styles/2-modules/_alert.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.alert {
|
||||
display: flex;
|
||||
padding: 0px 10px;
|
||||
margin: 20px 0px;
|
||||
font-size: 14px;
|
||||
color: $darkgray;
|
||||
&.is-critical {
|
||||
border-left: 10px solid $brightred;
|
||||
background-color: rgba($brightred, 0.05);
|
||||
}
|
||||
|
||||
&.is-important {
|
||||
border-left: 10px solid $orange;
|
||||
background-color: rgba($orange, 0.05);
|
||||
}
|
||||
|
||||
&.is-helpful {
|
||||
border-left: 10px solid $blue;
|
||||
background-color: rgba($blue, 0.05);
|
||||
}
|
||||
}
|
||||
37
aio/src/styles/2-modules/_filetree.scss
Normal file
37
aio/src/styles/2-modules/_filetree.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.filetree {
|
||||
background: $offwhite;
|
||||
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
|
||||
border: 4px solid $lightgray;
|
||||
margin: 0px 0px 5px 0px;
|
||||
padding: 10px;
|
||||
|
||||
.file {
|
||||
display: block;
|
||||
font-family: $main-font;
|
||||
line-height: 32px;
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
.children {
|
||||
padding-left: 5px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.file {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
left: -18px;
|
||||
bottom: 16px;
|
||||
width: 5px;
|
||||
height: 9999px;
|
||||
position: absolute;
|
||||
border-width: 0 0 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: $lightgray;
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
aio/src/styles/2-modules/_images.scss
Normal file
15
aio/src/styles/2-modules/_images.scss
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
.image-display {
|
||||
border-radius: 4px;
|
||||
background: $white;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
|
||||
margin: 0px 0px 10px 0px;
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -3,4 +3,8 @@
|
||||
============================== */
|
||||
|
||||
@import 'hamburger';
|
||||
@import 'code';
|
||||
@import 'code';
|
||||
@import 'alert';
|
||||
@import 'filetree';
|
||||
@import 'images';
|
||||
@import 'table';
|
||||
8
aio/src/styles/2-modules/_subsection.scss
Normal file
8
aio/src/styles/2-modules/_subsection.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.l-sub-section {
|
||||
color: $darkgray;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
43
aio/src/styles/2-modules/_table.scss
Normal file
43
aio/src/styles/2-modules/_table.scss
Normal file
@ -0,0 +1,43 @@
|
||||
table {
|
||||
margin: 24px 0px;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
border-radius: 2px;
|
||||
background: $offwhite;
|
||||
|
||||
&.is-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
background: $offwhite;
|
||||
border-bottom: 1px solid $lightgray;
|
||||
color: $darkgray;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 0px 24px;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background: $offwhite;
|
||||
border-right: 1px solid $lightgray;
|
||||
font-weight: 600;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,7 @@ $code-font: "Droid Sans Mono", monospace;
|
||||
$blue: #1976D2;
|
||||
$brightred: #DD0031;
|
||||
$darkred: #C3002F;
|
||||
$white: #FFFFFF;
|
||||
$offwhite: #FAFAFA;
|
||||
$backgroundgray: #F1F1F1;
|
||||
$lightgray: #DBDBDB;
|
||||
@ -15,6 +16,7 @@ $mediumgray: #7E7E7E;
|
||||
$darkgray: #333;
|
||||
$black: #0A1014;
|
||||
$codegreen: #17ff0b;
|
||||
$orange: #FF9800;
|
||||
|
||||
// GRADIENTS
|
||||
$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
|
||||
|
||||
@ -12,6 +12,6 @@
|
||||
background-color: $bgcolor;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
margin: 24px auto;
|
||||
margin: 0px auto; // was 24
|
||||
border: 0.5px solid $lightgray;
|
||||
}
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
.docs-component-viewer-tabbed-content,
|
||||
.docs-guide-content {
|
||||
h1 {
|
||||
h1 {
|
||||
color: mat-color($primary, 800);
|
||||
background: rgba(mat-color($foreground, secondary-text), .03);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user