diff --git a/helpers/sass_helpers.rb b/helpers/sass_helpers.rb index e471058..ffc8fe0 100644 --- a/helpers/sass_helpers.rb +++ b/helpers/sass_helpers.rb @@ -320,7 +320,7 @@ module SassHelpers ])) end - concat(content_tag :table, contents, class: 'impl-status') + concat(content_tag :table, contents, class: 'sl-c-table impl-status') end # Renders a single row for `impl_status`. diff --git a/source/assets/css/components/_callouts.scss b/source/assets/css/components/_callouts.scss index a1e8abd..3df5abf 100644 --- a/source/assets/css/components/_callouts.scss +++ b/source/assets/css/components/_callouts.scss @@ -1,7 +1,7 @@ .sl-c-callout { margin: 1.5rem 0; padding: .75rem 1rem; - background: $sl-color--nebula; + background: $sl-color--midnight-blue; color: $sl-color--white; a, diff --git a/source/assets/css/components/_code.scss b/source/assets/css/components/_code.scss deleted file mode 100644 index 31a41a7..0000000 --- a/source/assets/css/components/_code.scss +++ /dev/null @@ -1,19 +0,0 @@ -code, -pre { - font-family: $sl-font-family--code; - border-radius: sl-px-to-em(2px); - color: darken($sl-color--pale-sky, 25%); - - a & { color: inherit; } -} - -code { line-height: 1; } - -pre { - border: 1px solid #ebebeb; - padding: .75rem 1rem; - overflow: auto; - background: rgba($sl-color--midnight-blue, .0625); - - code { line-height: inherit; } -} diff --git a/source/assets/css/components/_icons.scss b/source/assets/css/components/_icons.scss deleted file mode 100644 index 85c22d3..0000000 --- a/source/assets/css/components/_icons.scss +++ /dev/null @@ -1,29 +0,0 @@ -$os-icons: 'icons/os-icons.png'; - -// TODO: Make these use a 16-base instead of 15. -%os-icons { - background: image-url($os-icons) 0 0 no-repeat; - background-size: auto sl-px-to-rem(15px); - display: inline-block; - width: sl-px-to-rem(15px); - height: sl-px-to-rem(15px); -} - -.mac-icon { - @extend %os-icons; - background-position: -(sl-px-to-rem(35px)) 0; -} - -.windows-icon { - @extend %os-icons; -} - -.linux-icon { - @extend %os-icons; - background-position: -(sl-px-to-rem(65px)) 0; -} - -.paid-icon { - @extend %os-icons; - background-position: -(sl-px-to-rem(100px)) 0; -} diff --git a/source/assets/css/components/_link-header.scss b/source/assets/css/components/_link-header.scss new file mode 100644 index 0000000..a4a9c1a --- /dev/null +++ b/source/assets/css/components/_link-header.scss @@ -0,0 +1,17 @@ +.sl-c-link-header { + + a { + display: flex; + justify-content: space-between; + align-items: center; + + &:after { + margin: { + right: .5rem; + left: 1rem; + }; + font-size: 1rem; + content: "\1F517"; + } + } +} diff --git a/source/assets/css/components/_media.scss b/source/assets/css/components/_media.scss deleted file mode 100644 index 96d0ae0..0000000 --- a/source/assets/css/components/_media.scss +++ /dev/null @@ -1,16 +0,0 @@ -img { - display: block; - margin: { - right: auto; - left: auto; - }; - max-width: 100%; - height: auto; -} - -hr { - margin: { - top: 3rem; - bottom: 3rem; - }; -} diff --git a/source/assets/css/components/_sass-syntax-switcher.scss b/source/assets/css/components/_sass-syntax-switcher.scss index b0b3939..f5ebf1f 100644 --- a/source/assets/css/components/_sass-syntax-switcher.scss +++ b/source/assets/css/components/_sass-syntax-switcher.scss @@ -11,7 +11,7 @@ top: 4.78rem; margin-right: -1em; - a { border: 0; } + a { border: 0; background: none; } a:focus { outline: 0px !important; diff --git a/source/assets/css/components/_tables.scss b/source/assets/css/components/_tables.scss index 9852daf..4c32a17 100644 --- a/source/assets/css/components/_tables.scss +++ b/source/assets/css/components/_tables.scss @@ -1,6 +1,6 @@ $table-cell-padding: 1rem / 2; -table { +.sl-c-table { margin: { right: -$table-cell-padding; left: -$table-cell-padding; @@ -8,31 +8,31 @@ table { border: 0; width: 100%; max-width: 100%; -} -td, -th { - border: 0; - padding: .75rem $table-cell-padding; - vertical-align: top; -} + td, + th { + border: 0; + padding: .75rem $table-cell-padding; + vertical-align: top; + } -th, -caption { - text-align: left; -} + th, + caption { + text-align: left; + } -@include sl-breakpoint--medium-max { - .sl-c-table-responsive { - margin-bottom: 1.5rem; - width: 100%; - overflow: { - x: auto; - y: hidden; + @include sl-breakpoint--medium-max { + &-responsive { + margin-bottom: 1.5rem; + width: 100%; + overflow: { + x: auto; + y: hidden; + } + + table { margin-bottom: 0; } + + td { white-space: nowrap; } } - - table { margin-bottom: 0; } - - td { white-space: nowrap; } } } diff --git a/source/assets/css/components/_banner.scss b/source/assets/css/regions/_banner.scss similarity index 97% rename from source/assets/css/components/_banner.scss rename to source/assets/css/regions/_banner.scss index 3713438..92b6d61 100644 --- a/source/assets/css/components/_banner.scss +++ b/source/assets/css/regions/_banner.scss @@ -1,4 +1,4 @@ -.sl-c-banner { +.sl-r-banner { position: relative; a { diff --git a/source/assets/css/sass.css.scss b/source/assets/css/sass.css.scss index 8a8b301..04bd109 100755 --- a/source/assets/css/sass.css.scss +++ b/source/assets/css/sass.css.scss @@ -23,14 +23,14 @@ 'layout/sections', 'components/alerts', - 'components/banner', 'components/buttons', 'components/callouts', - 'components/code', - 'components/icons', 'components/introduction', + 'components/link-header', 'components/lists', - 'components/media', 'components/pop-stripe', 'components/sass-syntax-switcher', - 'components/tables'; + 'components/tables', + + + 'regions/banner'; diff --git a/source/assets/css/visual-design/_theme.scss b/source/assets/css/visual-design/_theme.scss index c24567c..c52badd 100644 --- a/source/assets/css/visual-design/_theme.scss +++ b/source/assets/css/visual-design/_theme.scss @@ -348,3 +348,16 @@ a { &:active { border-bottom-color: $sl-color--iron; } } + +code, +pre { + border-radius: sl-px-to-em(2px); + color: darken($sl-color--pale-sky, 25%); + + a & { color: inherit; } +} + +pre { + border: 1px solid #ebebeb; + background: rgba($sl-color--midnight-blue, .0625); +} diff --git a/source/assets/css/visual-design/_typography.scss b/source/assets/css/visual-design/_typography.scss index 6f467ac..cffccd3 100644 --- a/source/assets/css/visual-design/_typography.scss +++ b/source/assets/css/visual-design/_typography.scss @@ -152,3 +152,32 @@ h4 { font-size: $sl-font-size--large; } letter-spacing: sl-px-to-em(1px); line-height: 0; } + +code, +pre { font-family: $sl-font-family--code; } + +code { line-height: 1; } + +pre { + padding: .75rem 1rem; + overflow: auto; + + code { line-height: inherit; } +} + +img { + display: block; + margin: { + right: auto; + left: auto; + }; + max-width: 100%; + height: auto; +} + +hr { + margin: { + top: 3rem; + bottom: 3rem; + }; +} diff --git a/source/assets/js/components/tables.js b/source/assets/js/components/tables.js index 0ae2e65..6cb4ff5 100644 --- a/source/assets/js/components/tables.js +++ b/source/assets/js/components/tables.js @@ -1 +1 @@ -$( "table" ).wrap( "
" ); +$( "sl-c-table" ).wrap( "
" ); diff --git a/source/install.html.haml b/source/install.html.haml index a9ebf71..627e406 100644 --- a/source/install.html.haml +++ b/source/install.html.haml @@ -15,56 +15,56 @@ no_container: true most of the applications for free but a few of them are paid apps (and totally worth it). - %ul.list-feature + %ul %li = link_to "CodeKit", "https://incident57.com/codekit/" - %span.info (Paid) - %span.mac-icon + (Paid) + Mac %li = link_to 'Compass.app', 'http://compass.kkbox.com/' - %span.info (Paid, Open Source) - %span.mac-icon - %span.windows-icon - %span.linux-icon + (Paid, Open Source) + Mac + Windows + Linux %li = link_to 'Ghostlab', 'http://www.vanamco.com/ghostlab/' - %span.info (Paid) - %span.mac-icon - %span.windows-icon + (Paid) + Mac + Windows %li = link_to 'Hammer', 'http://hammerformac.com/' - %span.info (Paid) - %span.mac-icon + (Paid) + Mac %li = link_to 'Koala', 'http://koala-app.com/' - %span.info (Open Source) - %span.mac-icon - %span.windows-icon - %span.linux-icon + (Open Source) + Mac + Windows + Linux %li = link_to 'LiveReload', 'http://livereload.com/' - %span.info (Paid, Open Source) - %span.mac-icon - %span.windows-icon + (Paid, Open Source) + Mac + Windows %li = link_to 'Prepros', 'https://prepros.io/' - %span.info (Paid) - %span.mac-icon - %span.windows-icon - %span.linux-icon + (Paid) + Mac + Windows + Linux %li = link_to 'Scout-App', 'http://scout-app.io/' - %span.info (Free, Open Source) - %span.windows-icon - %span.linux-icon - %span.mac-icon + (Free, Open Source) + Windows + Linux + Mac .sl-l-grid__column :markdown diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 5665586..ee77f15 100644 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -54,14 +54,14 @@ .sl-c-pop-stripe - %header.sl-c-banner(itemtype='http://schema.org/WPHeader' itemscope='itemscope' role='banner') + %header.sl-r-banner(itemtype='http://schema.org/WPHeader' itemscope='itemscope' role='banner') .sl-l-container .sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--center.sl-l-large-grid--gutters - %p.sl-l-grid__column.sl-c-banner__brand + %p.sl-l-grid__column.sl-r-banner__brand = link_to '/' do = image_tag 'logos/logo.svg', alt: 'Sass', height: '48' - %nav.sl-c-banner__navigation.sl-l-grid__column.sl-l-large-grid.sl-l-large-grid__column--auto-size.sl-c-list-horizontal-wrapper(itemtype='http://schema.org/SiteNavigationElement' itemscope='itemscope' role='navigation') + %nav.sl-r-banner__navigation.sl-l-grid__column.sl-l-large-grid.sl-l-large-grid__column--auto-size.sl-c-list-horizontal-wrapper(itemtype='http://schema.org/SiteNavigationElement' itemscope='itemscope' role='navigation') :markdown - [Install](/install) - [Learn Sass](/guide) diff --git a/source/layouts/section_styleguide.haml b/source/layouts/section_styleguide.haml index 4e86070..7ee8dc8 100644 --- a/source/layouts/section_styleguide.haml +++ b/source/layouts/section_styleguide.haml @@ -1,27 +1,7 @@ = wrap_layout :has_navigation do = yield - - if current_page.data.previous_page_url or current_page.data.next_page_url - %footer - %ul.pager - - if current_page.data.previous_page_url - %li.previous - - if current_page.data.previous_page_url == "index" - - previous = "" - - else - - previous = current_page.data.previous_page_url - = link_to "/styleguide/" + previous do - ← - = current_page.data.previous_page_name - - if current_page.data.next_page_url - %li.next - = link_to "/styleguide/" + current_page.data.next_page_url do - = current_page.data.next_page_name - → - - content_for :navigation do - - root_url = config[:host] - %nav.sl-c-list-navigation-wrapper :markdown ### [Style Guide](/styleguide) @@ -30,4 +10,5 @@ - [Color](/styleguide/color) - [Typography](/styleguide/typography) - [Layout](/styleguide/layout) + - [Components](/styleguide/components) - [Code](/styleguide/code) diff --git a/source/styleguide/components.html.haml b/source/styleguide/components.html.haml new file mode 100644 index 0000000..c4d02de --- /dev/null +++ b/source/styleguide/components.html.haml @@ -0,0 +1,69 @@ +--- +title: Components +--- + +.sl-c-alert + .sl-l-container + %p + %strong Alert + = lorem.sentence + +.sl-c-alert.sl-c-alert--info + .sl-l-container + %p + %strong Info Alert + = lorem.sentence + += link_to 'Link', '#', class: 'sl-c-button' +%button.sl-c-button(type='button') Button + += link_to 'Link', '#', class: 'sl-c-button sl-c-button--primary' +%button.sl-c-button.sl-c-button--primary(type='button') Button + +.sl-c-callout + %h3 Callout + %p= lorem.paragraph + +.sl-c-callout.sl-c-callout--warning + %h3 Warning + %p= lorem.paragraph + +.sl-c-callout.sl-c-callout--fun-fact + %h3 Fun Fact + %p= lorem.paragraph + +%p.sl-c-introduction= lorem.paragraph + +.sl-c-introduction + %p= lorem.paragraph + +%h2.sl-c-link-header + = link_to '#' do + %span Link Header 2 + +%h3.sl-c-link-header + = link_to '#' do + %span Link Header 3 + +%h4.sl-c-link-header + = link_to '#' do + %span Link Header 4 + +.sl-c-list-navigation-wrapper + :markdown + - [Vertical](#) + - [Navigation](#) + - [List](#) + +.sl-c-list-horizontal-wrapper + :markdown + - [Horizontal](#) + - [Navigation](#) + - [List](#) + +.sl-c-pop-stripe + +%table.sl-c-table + %tr + %td Table + %td Table