From c9e51d99111e8569f27616d734e8fa02f0d15a5c Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Sat, 25 Mar 2017 07:21:40 -0700 Subject: [PATCH] feat(aio): add new classes, table and images styling (#15478) --- aio/src/styles/0-base/_typography.scss | 7 +++- aio/src/styles/1-layouts/_top-menu.scss | 8 +++- aio/src/styles/2-modules/_alert.scss | 21 ++++++++++ aio/src/styles/2-modules/_filetree.scss | 37 +++++++++++++++++ aio/src/styles/2-modules/_images.scss | 15 +++++++ aio/src/styles/2-modules/_modules-dir.scss | 6 ++- aio/src/styles/2-modules/_subsection.scss | 8 ++++ aio/src/styles/2-modules/_table.scss | 43 ++++++++++++++++++++ aio/src/styles/_constants.scss | 2 + aio/src/styles/{mixins.scss => _mixins.scss} | 2 +- aio/src/styles/_typography-theme.scss | 2 +- 11 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 aio/src/styles/2-modules/_alert.scss create mode 100644 aio/src/styles/2-modules/_filetree.scss create mode 100644 aio/src/styles/2-modules/_images.scss create mode 100644 aio/src/styles/2-modules/_subsection.scss create mode 100644 aio/src/styles/2-modules/_table.scss rename aio/src/styles/{mixins.scss => _mixins.scss} (92%) diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index 89f99c4071..12dd23069a 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -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; } diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index f7440af9a3..27101c3a63 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -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%; diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss new file mode 100644 index 0000000000..b0f01095b1 --- /dev/null +++ b/aio/src/styles/2-modules/_alert.scss @@ -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); + } +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss new file mode 100644 index 0000000000..99c39370f0 --- /dev/null +++ b/aio/src/styles/2-modules/_filetree.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss new file mode 100644 index 0000000000..5ec712fced --- /dev/null +++ b/aio/src/styles/2-modules/_images.scss @@ -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%; + } +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss index f81d264801..6d67a30979 100644 --- a/aio/src/styles/2-modules/_modules-dir.scss +++ b/aio/src/styles/2-modules/_modules-dir.scss @@ -3,4 +3,8 @@ ============================== */ @import 'hamburger'; - @import 'code'; \ No newline at end of file + @import 'code'; + @import 'alert'; + @import 'filetree'; + @import 'images'; + @import 'table'; \ No newline at end of file diff --git a/aio/src/styles/2-modules/_subsection.scss b/aio/src/styles/2-modules/_subsection.scss new file mode 100644 index 0000000000..ade6298fcf --- /dev/null +++ b/aio/src/styles/2-modules/_subsection.scss @@ -0,0 +1,8 @@ +.l-sub-section { + color: $darkgray; + border-width: 1px; + border-style: solid; + padding: 20px; + border-radius: 4px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss new file mode 100644 index 0000000000..13fd524ff5 --- /dev/null +++ b/aio/src/styles/2-modules/_table.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss index bb3a65b5fc..5718b7ea82 100755 --- a/aio/src/styles/_constants.scss +++ b/aio/src/styles/_constants.scss @@ -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); diff --git a/aio/src/styles/mixins.scss b/aio/src/styles/_mixins.scss similarity index 92% rename from aio/src/styles/mixins.scss rename to aio/src/styles/_mixins.scss index 91f213f135..b35ee3e22a 100644 --- a/aio/src/styles/mixins.scss +++ b/aio/src/styles/_mixins.scss @@ -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; } \ No newline at end of file diff --git a/aio/src/styles/_typography-theme.scss b/aio/src/styles/_typography-theme.scss index ea39016849..c1a468740b 100755 --- a/aio/src/styles/_typography-theme.scss +++ b/aio/src/styles/_typography-theme.scss @@ -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); }