Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(7113)

Unified Diff: chrome/common/extensions/docs/static/sass/_pillar.scss

Issue 113963003: added scss files (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: moved site.css to out subdirectory Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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");
+}
+
« no previous file with comments | « chrome/common/extensions/docs/static/sass/_normalize.scss ('k') | chrome/common/extensions/docs/static/sass/_typography.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698