From 81ff0914f118d431a838f6075ccd0089704ea91b Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Sun, 15 Mar 2015 17:07:20 -0600 Subject: [PATCH 01/16] Build: Initial typographic styles --- scss/atoms/typography/_typography.scss | 117 ++++++++++++++++++ scss/atoms/typography/_variables.scss | 2 +- typography.html | 158 +++++++++++++++++++++++++ 3 files changed, 276 insertions(+), 1 deletion(-) create mode 100644 typography.html diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 7fd9b32..f3e4a83 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -5,3 +5,120 @@ @import "variables", "functions"; + +// TODO probably should do the import in the `head` in case character sets need to change dynamically +@import url( http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic ); + +body { + font: $normal #{ map-get( $root-font, font-size ) }/1.5 $sans-serif; + + @media ( max-width: 800px ) { + font-size: 16px; + } + @media ( max-width: 500px ) { + font-size: 14px; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 600; + line-height: 1; +} + +h1 { + font-size: em( 67px ); // 54px works nicely, as well + font-weight: 700; +} + +h2 { + font-size: em( 36px ); +} + +h3 { + font-size: em( 30px ); +} + +h4 { + font-size: em( 24px ); +} + +h5 { + font-size: em( 20px ); +} + +h6 { + font-size: em( 16px ); + text-transform: uppercase; +} + +// ========================================================================== +// Block elements +// ========================================================================== + +hr { + border: 0; + border-bottom: 1px solid #999; +} + +blockquote { + margin: 0; + padding-left: 1em; + position: relative; + border-left: 4px solid #eee; + font-style: italic; +} + +pre { + padding: 16px 20px; + background: #f7f7f7; + font: normal 12px/1.4 $monospace; +} + +// ========================================================================== +// Lists +// ========================================================================== + +dt { + font-weight: 600; +} + +dd { + margin: 0; +} + +// ========================================================================== +// Inline elements +// ========================================================================== + +a { + color: inherit; + text-decoration: none; + background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 75%, #000 50% ); + background-repeat: repeat-x; + background-size: 2px 2px; + background-position: 0 em( 22px ); + outline: 0; + + &:hover, + &:active, + &:focus { + background-size: 2px 6px; + background-position: 0 em( 18px ); + } + @media not all, + only screen and ( min-resolution: 2dppx ), + only screen and ( -webkit-min-device-pixel-ratio: 2 ) { + background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 75%, #000 75% ); + background-repeat: repeat-x; + } +} + +b, +strong { + font-weight: $bold; +} diff --git a/scss/atoms/typography/_variables.scss b/scss/atoms/typography/_variables.scss index 19d3ad5..0c208aa 100644 --- a/scss/atoms/typography/_variables.scss +++ b/scss/atoms/typography/_variables.scss @@ -15,4 +15,4 @@ $root-font: ( // Typefaces $monospace: "courier new", monospace; $serif: Georgia, "Times New Roman", Times, serif; -$sans: Helvetica, Arial, sans-serif; +$sans-serif: "Source Sans Pro", Helvetica, Arial, sans-serif; diff --git a/typography.html b/typography.html new file mode 100644 index 0000000..f82a5c0 --- /dev/null +++ b/typography.html @@ -0,0 +1,158 @@ + + + + + + CSS Chasis - Typography + + + + + + + +

CSS Chassis

+ +
+ +

Heading 1 <h1>

+

Heading 2 <h2>

+

Heading 3 <h3>

+

Heading 4 <h4>

+
Heading 5 <h5>
+
Heading 6 <h6>
+ +
+ +

Heading 1 <h1>

+

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

+ +

Heading 2 <h2>

+

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.

+ +

Heading 3 <h3>

+

The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.

+ +

Heading 4 <h4>

+

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more?

+ +
Heading 5 <h5>
+

What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.

+ +
Heading 6 <h6>
+

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

+ +
+ +

Block-level elements

+ +

Here's a paragraph <p> filled with some Space Ipsum. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

+ +

There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.

+ +
Here's a div <div>. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her +
+ +
+

This is an article <article> with a paragraph

+

We want to explore. We’re curious people. Look back over history, people have put their lives at stake to go out and explore … We believe in what we’re doing. Now it’s time to go.

+

End of the article.

+
+ +
Let's light this fire one more time, Mike, and witness this great nation at its best. <blockquote> via Space Ipsum
+ +

We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.

+ +
+* {
+	 font-family: 'Comic Sans MS', 'Comic Sans', 'Marker Felt' !important;
+}
+<pre>
+
+ +

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

+ +
+ Sherlock Holmes
+ 221B Baker Street
+ London, United Kingdom <address> +
+ +
+ +

Lists <li>

+

The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.

+ + + +

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.

+ +
    +
  1. Ordered list <ol>
    2. +
  2. List element
    3. +
  3. The dreams of yesterday are the hopes of today and the reality of tomorrow.
    4. +
  4. Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.
    5. +
+ +

For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.

+ +
+
Definition term <dt>
+
Definition <dd>
+
Earth
+
A kick-ass planet.
+
Pluto
+
A kick-ass former planet.
+
Space Ipsum
+
NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.
+
+ +

Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.

+ +
+ +

Text-level elements

+ + +
+ + + From 76bfa647e06a355a0ca4caf7095a16e378b0b4f7 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Sun, 29 Mar 2015 17:34:40 -0600 Subject: [PATCH 02/16] Build: minor style tweaks --- typography.html => demos/typography.html | 5 ++-- scss/atoms/typography/_typography.scss | 33 ++++++++++++++---------- 2 files changed, 22 insertions(+), 16 deletions(-) rename typography.html => demos/typography.html (97%) diff --git a/typography.html b/demos/typography.html similarity index 97% rename from typography.html rename to demos/typography.html index f82a5c0..b66f6f2 100644 --- a/typography.html +++ b/demos/typography.html @@ -6,7 +6,8 @@ CSS Chasis - Typography - + + + + + + + @@ -35,7 +29,7 @@

Heading 1 <h1>

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

Heading 2 <h2>

-

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.

+

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn"t feel like a giant. I felt very, very small.

Heading 3 <h3>

The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.

@@ -53,11 +47,11 @@
Heading 6 <h6>

Block-level elements

-

Here's a paragraph <p> filled with some Space Ipsum. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

+

Here"s a paragraph <p> filled with some Space Ipsum. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman"s earth, if free men make it, will be truly round: a globe in practice, not in theory.

There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.

-
Here's a div <div>. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her +
Here"s a div <div>. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That"s how I felt seeing the Earth for the first time. I could not help but love and cherish her
@@ -66,13 +60,13 @@

This is an article <article> with a paragraph

End of the article.

-
Let's light this fire one more time, Mike, and witness this great nation at its best. <blockquote> via Space Ipsum
+
Let"s light this fire one more time, Mike, and witness this great nation at its best. <blockquote> via Space Ipsum

We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.

 * {
-	 font-family: 'Comic Sans MS', 'Comic Sans', 'Marker Felt' !important;
+	font-family: "Comic Sans MS", "Comic Sans", "Marker Felt" !important;
 }
 <pre>
@@ -94,10 +88,10 @@

Lists <li>

  • Unordered list <ul>
  • List element
  • Across the sea of space, the stars are other suns.
    • -
  • Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.
    • +
  • Science cuts two ways, of course; its products can be used for both good and evil. But there"s no turning back from science. The early warnings about technological dangers also come from science.
    • -

    It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.

    +

    It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn"t feel like a giant. I felt very, very small.

    1. Ordered list <ol>
      2. @@ -127,19 +121,17 @@

      Text-level elements

      • anchor link <a>
        • -
      • abbreviation: SASS <abbr>
        • -
      • bold <b>
        • +
      • abbreviation: SASS <abbr>
      • citation: A Study in Scarlet <cite>
        • -
      • Here's the <code> element
        • +
      • Here"s the <code> element
      • deleted text: Episodes I, II, III <del>
      • definition: The definition element is the element being defined inline. <dfn>
      • emphasis <em>
        • -
      • italic <i>
      • inserted text <ins>
      • keyboard input: control + space <kbd>
      • mark element <mark>
        • -
      • meter: awesomeness <meter>
        • -
      • progress: 70 % <progress>
        • +
      • meter: awesomeness <meter>
        • +
      • progress: 70 % <progress>
      • quotation (short): You just gotta believe! <q>
      • quotation within a quotation (short): Yo dawg, I heard you like quotes so I put this quote within this quote. <q>
      • strikethough: Lance Armstrong remains steroid-free. <s>
        • @@ -149,7 +141,7 @@

        Text-level elements

      • strong: The Hammer <strong>
      • subscript: Lower 0123 <sub>
      • superscript: I need a good superman joke to go here. 0123 <sup>
        • -
      • time: <time>
        • +
      • time: <time>
      • underline: Never underline anything. <u>
      • variable: cat + dog = catdog <var>
      diff --git a/package.json b/package.json index df4d1d6..426de72 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "grunt-csscomb": "3.0.0", "grunt-git-authors": "2.0.0", "grunt-html": "1.6.0", + "grunt-htmllint": "^0.2.7", "grunt-jscs": "0.6.2", "grunt-npmcopy": "0.1.0", "grunt-sass": "0.18.1", From 87d8f1df14e30e2f34eaf5784ed4c47afee2434b Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 13 Apr 2015 19:30:33 -0600 Subject: [PATCH 07/16] Build: string fix --- Gruntfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index c8eeaba..d1a3d2b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,7 +5,7 @@ var config = { htmllint: { dist: { options: {}, - src: [ 'demos/*.html' ] + src: [ "demos/*.html" ] } }, autoprefixer: { From 780fdf653b60bee6fa56a9395f70c2f41c28aeee Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 13 Apr 2015 21:29:43 -0600 Subject: [PATCH 08/16] Build: minor lint updates --- Gruntfile.js | 2 +- demos/typography.html | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index d1a3d2b..69c3890 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -50,7 +50,7 @@ var config = { } }, csslint: { - src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css" ] + src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css", "demos/demos.css" ] }, jscs: { all: [ "*.js", "performance/**/*.js" ] diff --git a/demos/typography.html b/demos/typography.html index dc60298..7868938 100644 --- a/demos/typography.html +++ b/demos/typography.html @@ -2,7 +2,7 @@ - + CSS Chasis - Typography diff --git a/package.json b/package.json index 426de72..f7f9534 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "grunt-csscomb": "3.0.0", "grunt-git-authors": "2.0.0", "grunt-html": "1.6.0", - "grunt-htmllint": "^0.2.7", + "grunt-htmllint": "0.2.7", "grunt-jscs": "0.6.2", "grunt-npmcopy": "0.1.0", "grunt-sass": "0.18.1", From 127f034359336a551d1685eb34992ad63a7bb8d3 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Tue, 21 Apr 2015 17:11:47 -0700 Subject: [PATCH 09/16] Build: removed ad fixed typo --- demos/typography.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/typography.html b/demos/typography.html index 7868938..5e7953e 100644 --- a/demos/typography.html +++ b/demos/typography.html @@ -3,12 +3,12 @@ - CSS Chasis - Typography + CSS Chassis - Typography - + From 9d945e343d3d55c5dc79ff4aad02c293bea0f232 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Sun, 3 May 2015 15:25:59 -0600 Subject: [PATCH 10/16] Build: removed ie meta info --- demos/typography.html | 1 - 1 file changed, 1 deletion(-) diff --git a/demos/typography.html b/demos/typography.html index 5e7953e..7d314ce 100644 --- a/demos/typography.html +++ b/demos/typography.html @@ -2,7 +2,6 @@ - CSS Chassis - Typography From 0e1bb15d71df6f1e2dd4dab3ea1b0c3143a6d86f Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 9 Apr 2015 19:25:43 -0600 Subject: [PATCH 11/16] Build: Initial table styles --- demos/tables.html | 122 ++++++++++++++++++++++++++++++++++++++++ scss/atoms/_tables.scss | 69 +++++++++++++++++++++++ scss/lint.scss | 3 +- 3 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 demos/tables.html create mode 100644 scss/atoms/_tables.scss diff --git a/demos/tables.html b/demos/tables.html new file mode 100644 index 0000000..45a0826 --- /dev/null +++ b/demos/tables.html @@ -0,0 +1,122 @@ + + + + + + CSS Chasis - Tables + + + + + + + + +

      CSS Chassis

      + +
      + +

      Tables

      + +

      Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #Table headingTable headingTable heading
      1Table cellTable cellTable cell
      2Table cellTable cellTable cell
      3Table cellTable cellTable cell
      + +

      Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #Table headingTable headingTable headingTable headingTable headingTable headingTable headingTable headingTable heading
      1Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
      2Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
      3Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
      +
      + +

      Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.

      + + + diff --git a/scss/atoms/_tables.scss b/scss/atoms/_tables.scss new file mode 100644 index 0000000..cd10702 --- /dev/null +++ b/scss/atoms/_tables.scss @@ -0,0 +1,69 @@ +// ========================================================================== +// Typography +// ========================================================================== + +table { + width: 100%; + margin-bottom: em( 20px, 16px ); + font-size: em( 16px ); + text-align: left; +} + +thead { + border-bottom: 1px solid #eee; + + > tr > th { + border-top: 0; + } +} + +td, +th { + border-top: 1px solid #eee; + padding: em( 12px, 16px ); + white-space: nowrap; +} + +th { + padding: em( 12px, 12px ); + color: #666; + font-weight: 400; + font-size: em( 12px, 16px ); + text-transform: uppercase; +} + +.table--responsive { + position: relative; + z-index: 1; + margin-bottom: em( 20px ); + border: 0; + background: #fff no-repeat; + background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent ); + background-position: 0 0, 100% 0; + background-size: 10px 100%; + overflow: auto; + + table { + position: relative; + margin-bottom: 0; + + &:before, + &:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: 0 -30px 0 0; + width: 30px; + background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) ); + } + &:after { + left: auto; + right: 0; + margin: 0 0 0 -30px; + background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff ); + } + } +} diff --git a/scss/lint.scss b/scss/lint.scss index 186712c..3f2a73e 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -12,7 +12,8 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/tables"; @import "views/main"; From 8e7df777bd56e8976dab0dfeaf525736f668ce05 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 13 Apr 2015 21:35:25 -0600 Subject: [PATCH 12/16] Build: Fixed some lint errors --- demos/tables.html | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/demos/tables.html b/demos/tables.html index 45a0826..955d380 100644 --- a/demos/tables.html +++ b/demos/tables.html @@ -1,20 +1,14 @@ - - + + CSS Chasis - Tables - - - - - + + + + + @@ -24,7 +18,7 @@

      CSS Chassis

      Tables

      -

      Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      +

      Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      @@ -57,9 +51,9 @@

      Tables

      -

      Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      +

      Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      -
      +
      @@ -116,7 +110,7 @@

      Tables

      -

      Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.

      +

      Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.

      From fe448eddc7c2fe9de17a756f415c98243095ed22 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Tue, 14 Apr 2015 11:12:06 -0600 Subject: [PATCH 13/16] Build: minor changes --- scss/atoms/_tables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/atoms/_tables.scss b/scss/atoms/_tables.scss index cd10702..1dc4ff2 100644 --- a/scss/atoms/_tables.scss +++ b/scss/atoms/_tables.scss @@ -17,19 +17,19 @@ thead { } } -td, -th { +td { border-top: 1px solid #eee; padding: em( 12px, 16px ); white-space: nowrap; } th { + border-top: 1px solid #eee; padding: em( 12px, 12px ); color: #666; font-weight: 400; font-size: em( 12px, 16px ); - text-transform: uppercase; + white-space: nowrap; } .table--responsive { From 0f70d1b3e317a7d400a7eccde443f6b45539263b Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Tue, 21 Apr 2015 17:07:06 -0700 Subject: [PATCH 14/16] Build: removed whitespace prop from td --- scss/atoms/_tables.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/atoms/_tables.scss b/scss/atoms/_tables.scss index 1dc4ff2..ef7d4e5 100644 --- a/scss/atoms/_tables.scss +++ b/scss/atoms/_tables.scss @@ -20,7 +20,6 @@ thead { td { border-top: 1px solid #eee; padding: em( 12px, 16px ); - white-space: nowrap; } th { From e387d559dd26fbb0fecef9267a454efa940fe82a Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Sun, 3 May 2015 15:30:19 -0600 Subject: [PATCH 15/16] Build: removed IE meta --- demos/tables.html | 1 - 1 file changed, 1 deletion(-) diff --git a/demos/tables.html b/demos/tables.html index 955d380..7688372 100644 --- a/demos/tables.html +++ b/demos/tables.html @@ -2,7 +2,6 @@ - CSS Chasis - Tables From bc096bfc72af85b0489298f3f6758c3ccae6147e Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Wed, 6 May 2015 20:35:02 -0700 Subject: [PATCH 16/16] Build: Separated out overflow styles into own component --- demos/tables.html | 10 +++---- scss/atoms/_overflow-indicator.scss | 46 +++++++++++++++++++++++++++++ scss/lint.scss | 3 +- 3 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 scss/atoms/_overflow-indicator.scss diff --git a/demos/tables.html b/demos/tables.html index 7688372..9192a1b 100644 --- a/demos/tables.html +++ b/demos/tables.html @@ -2,12 +2,12 @@ - CSS Chasis - Tables + CSS Chassis - Tables - + @@ -17,7 +17,7 @@

      CSS Chassis

      Tables

      -

      Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      +

      Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      @@ -52,8 +52,8 @@

      Tables

      Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

      -
      -
      +
      +
      diff --git a/scss/atoms/_overflow-indicator.scss b/scss/atoms/_overflow-indicator.scss new file mode 100644 index 0000000..9392141 --- /dev/null +++ b/scss/atoms/_overflow-indicator.scss @@ -0,0 +1,46 @@ +// ========================================================================== +// Overflow Indicator +// +// Shows indicator when there is more horizontal content. +// +// EXAMPLE +//
      +//
      ...
      +//
      +// ========================================================================== + +.overflow-indicator__wrapper { + position: relative; + z-index: 1; + margin-bottom: em( 20px ); + border: 0; + background: #fff no-repeat; + background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent ); + background-position: 0 0, 100% 0; + background-size: 10px 100%; + overflow: auto; +} + +.overflow-indicator__wrapper > .overflow-indicator__content { + position: relative; + margin-bottom: 0; + + &:before, + &:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: 0 -30px 0 0; + width: 30px; + background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) ); + } + &:after { + left: auto; + right: 0; + margin: 0 0 0 -30px; + background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff ); + } +} diff --git a/scss/lint.scss b/scss/lint.scss index 3f2a73e..116df25 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -12,8 +12,9 @@ @import "atoms/icons/icons", + "atoms/tables", "atoms/typography/typography", - "atoms/tables"; + "atoms/overflow-indicator"; @import "views/main";
      #