Index: chrome/common/extensions/docs/static/sass/_pillar.scss |
diff --git a/chrome/common/extensions/docs/static/sass/_pillar.scss b/chrome/common/extensions/docs/static/sass/_pillar.scss |
new file mode 100644 |
index 0000000000000000000000000000000000000000..258bd5099da43f55030acc3c37f28b7d44b1309d |
--- /dev/null |
+++ b/chrome/common/extensions/docs/static/sass/_pillar.scss |
@@ -0,0 +1,165 @@ |
+$panel-margin-right: 1.5em; |
+ |
+.pillar-content { |
+ h1 { |
+ font-size: $h1-font-size; |
+ } |
+ > .g-section { |
+ padding: 3em 0; |
+ |
+ &:not(:last-of-type) { |
+ border-bottom: $default-border; |
+ } |
+ > h2 { |
+ font-size: $h2-font-size; |
+ margin-bottom: 1.5em !important; |
+ } |
+ } |
+ .article-list { |
+ article { |
+ position: relative; |
+ overflow: hidden; |
+ width: 100%; |
+ padding: 1.9em; |
+ background-color: $gray-light; |
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15); |
+ line-height: 1.5em; |
+ margin-bottom: $panel-margin-right; |
+ &.new::after { |
+ content: 'new'; |
+ background: #2e82c9; |
+ position: absolute; |
+ @include transform(rotate(45deg)); |
+ top: -4px; |
+ right: -20px; |
+ color: white; |
+ font-size: 0.9em; |
+ width: 60px; |
+ text-align: center; |
+ padding-top: 8px; |
+ } |
+ p { |
+ font-weight: 300; |
+ } |
+ } |
+ } |
+ |
+#further-resources .g-content { |
+ h2 { |
+ &::before { |
+ display: inline-block; |
+ content: ''; |
+ background: url("../images/further-resources-icons.svg") 0 50% no-repeat; |
+ width: 50px; |
+ height: 43px; |
+ background-size: cover; |
+ margin: auto; |
+ margin-bottom: 5px; |
+ vertical-align: middle; |
+ } |
+ &.school { |
+ &::before { |
+ background-position: 0 50%; |
+ } |
+ } |
+ &.chat { |
+ &::before { |
+ background-position: -54px 50%; |
+ } |
+ } |
+ &.puzzle { |
+ &::before { |
+ background-position: -108px 50%; |
+ } |
+ } |
+ } |
+} |
+ |
+ // Phone |
+ @media only screen and (max-width: $break-small) { |
+ > .g-section { |
+ padding: 2em 0; |
+ } |
+ } |
+ |
+ @media only screen and (min-width: $break-small) { |
+ .article-list { |
+ @include display-flex(); |
+ @include flex-wrap(wrap); |
+ @include justify-content(space-between); |
+ @include align-items(stretch); |
+ article { |
+ @include flex(auto); |
+ margin-right: $panel-margin-right; |
+ width: 45%; |
+ &:nth-child(2n), |
+ &:last-of-type { |
+ margin-right: 0; |
+ //max-width: 45%; |
+ } |
+ } |
+ } |
+ } |
+ @media only screen and (min-width: $break-large) { |
+ .article-list { |
+ article { |
+ width: 30%; |
+ &:nth-child(2n) { |
+ margin-right: $panel-margin-right; |
+ } |
+ &:nth-child(3n), |
+ &:last-of-type { |
+ margin-right: 0; |
+ } |
+ } |
+ } |
+ } |
+} |
+ |
+// Layout overrides for browsers who don't support Flexbox flex wrap, namely, Firefox 25 to 28. |
+// Flexbox flex wrap might get support in Firefox 29. https://bugzilla.mozilla.org/show_bug.cgi?id=702508 |
+@supports (not (flex-wrap: wrap)) { |
+ .pillar-content { |
+ .article-list { |
+ display: block; |
+ article { |
+ @media only screen and (min-width: $break-small) { |
+ flex: none; |
+ float: left; |
+ width: 48%; |
+ } |
+ @media only screen and (min-width: $break-large) { |
+ width: 31.8058%; |
+ } |
+ } |
+ } |
+ } |
+} |
+ |
+// The following CSS (and matching HTML) was modified from what's on chrome.com: https://www.google.com/intl/en/chrome/devices/features/ |
+.load-more-articles { |
+ @include clearfix; |
+ margin: 2em auto 0.3em; |
+ text-align: center; |
+ width: 100%; |
+ a, |
+ a:hover { |
+ color: $black; |
+ transition: opacity 0.3s ease 0s; |
+ } |
+} |
+.nav-arrow { |
+ background-size: 48px 48px; |
+ background: top center no-repeat; |
+ display: inline-block; |
+ opacity: 0.5; |
+ transition: opacity 0.3s ease 0s; |
+ padding-top: 50px; |
+} |
+.nav-arrow:hover { |
+ opacity: 1; |
+} |
+.down-arrow { |
+ background-image: url("../images/down-arrow.png"); |
+} |
+ |