codeclimate-styles 0.1.0

data/assets/stylesheets/cc/styles/modules/_tabs.scss

@@ -0,0 +1,80 @@
+/*doc
+---
+title: Tabs
+name: tabs
+category: misc
+---
+
+```slim_example
+ul.tabs
+  li.active
+    a href="#home" Home
+  li
+    a href="#ratings" Ratings
+  li
+    a href="#options" Options
+.tabs__content
+  #home.tabs__pane.active Home
+  #ratings.tabs__pane Ratings
+  #options.tabs__pane Options
+```
+*/
+
+$tabs-border-width: 3px;
+
+.tabs {
+  border-bottom: $tabs-border-width solid $grayscale-pearl;
+  font-size: 0;
+  line-height: 0;
+  margin-bottom: 36px;
+
+  li {
+    display: inline-block;
+    font-family: $sans-serif-semibold;
+    font-size: 14px;
+    line-height: 1;
+    margin-right: 24px;
+    position: relative;
+  }
+
+  .active {
+    a {
+      color: $green;
+    }
+
+    a::after {
+      background: $green;
+    }
+  }
+
+  a {
+    display: block;
+    padding: 24px 0;
+
+    &:hover {
+      color: $green;
+    }
+
+    &::after {
+      bottom: $tabs-border-width * -1;
+      content: "";
+      height: $tabs-border-width;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    &:hover::after {
+      background: $green;
+    }
+  }
+
+}
+
+.tabs__pane {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}

data/assets/stylesheets/cc/styles/modules/_typography.scss

@@ -0,0 +1,220 @@
+$sans-serif-light: "ProximaNova-Light", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+$sans-serif-light-italic: "ProximaNova-LightIt", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+$sans-serif-regular: "ProximaNova-Regular", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+$sans-serif-italic: "ProximaNova-RegularIt", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+$sans-serif-semibold: "ProximaNova-Semibold", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+$sans-serif-semibold-italic: "ProximaNova-SemiboldIt", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+$sans-serif-bold: "ProximaNova-Bold", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+$sans-serif-bold-italic: "ProximaNova-BoldIt", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
+
+$serif-light: "FFTisaWebLight", "Georgia", "Times New Roman", serif;
+$serif-regular: "FFTisaWeb", "Georgia", "Times New Roman", serif;
+$serif-italic: "FFTisaWebItalic", "Georgia", "Times New Roman", serif;
+$serif-bold: "FFTisaWebBold", "Georgia", "Times New Roman", serif;
+$serif-medium: "FFTisaWebMed", "Georgia", "Times New Roman", serif;
+
+$monospace: "Native", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
+
+body,
+button,
+input,
+select {
+  color: $grayscale-deep;
+  font-family: $sans-serif-regular;
+  -webkit-font-smoothing: antialiased;
+}
+
+/*doc
+---
+title: Link
+name: link
+category: typography
+---
+
+These are standard link styles. Default styling should be the most common case.
+Secondary links are intended for use in tables & secondary items. Muted links
+should be used sparingly, and only when other factors will help make it clear
+to a user that the link is interactable.
+
+```slim_example
+a href="#" This is a link
+```
+```slim_example
+a.link--secondary href="#" This is a secondary link
+```
+```slim_example
+a.link--muted href="#" This is a muted link
+```
+*/
+a {
+  color: $green-dark;
+  text-decoration: none;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $green-light;
+  }
+}
+
+.link--secondary {
+  color: $sky-dark;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $sky-light;
+  }
+}
+
+.link--muted {
+  color: $grayscale-storm;
+}
+
+strong {
+  font-family: $sans-serif-semibold;
+}
+
+/*doc
+---
+title: Headings
+name: headings
+category: typography
+---
+
+```slim_example
+h1 First-level heading
+h2 Second-level heading
+h3 Third-level heading
+h4 Fourth-level heading
+h5 Fifth-level heading
+h6 Sixth-level heading
+```
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: $sans-serif-regular;
+  word-wrap: break-word;
+
+  a {
+    color: $grayscale-deep;
+  }
+}
+
+h1 {
+  font-family: $sans-serif-light;
+  font-size: 60px;
+  line-height: 75px;
+}
+
+h2 {
+  font-size: 37px;
+  line-height: 60px;
+}
+
+h3 {
+  font-size: 30px;
+  line-height: 40px;
+}
+
+h4 {
+  font-family: $sans-serif-light;
+  font-size: 20px;
+  line-height: 30px;
+}
+
+h5 {
+  color: $grayscale-slate;
+  font-size: 18px;
+  letter-spacing: .02em;
+  line-height: 30px;
+  text-transform: uppercase;
+}
+
+h6 {
+  color: $grayscale-storm;
+  font-size: 12px;
+  letter-spacing: .2em;
+  line-height: 17px;
+  text-transform: uppercase;
+}
+
+/*doc
+---
+title: Paragraph
+name: p
+category: typography
+---
+
+```slim_example
+p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+```
+*/
+
+p,
+ul {
+  font-size: 18px;
+  line-height: 30px;
+}
+
+p {
+  margin-bottom: 20px;
+}
+
+/*doc
+---
+title: Block Quote
+name: blockquote
+category: typography
+---
+
+```slim_example
+blockquote Fly, you fools!
+```
+*/
+blockquote {
+  font-family: $serif-bold;
+  font-size: 36px;
+  line-height: 44px;
+
+  &::before {
+    background-color: $grayscale-deep;
+    content: "";
+    display: inline-block;
+    height: 28px;
+    margin-right: 15px;
+    width: 28px;
+  }
+}
+
+/*doc
+---
+title: Meta
+name: meta
+category: typography
+---
+
+```slim_example
+.meta Code Climate is free for open-source repositories.
+```
+*/
+
+.meta {
+  color: $grayscale-storm;
+  font-size: 11px;
+  line-height: 15px;
+
+  a {
+    border-bottom: 1px solid $box-border-color;
+    padding-bottom: .2em;
+  }
+
+  a:hover {
+    border-color: $green-dark;
+  }
+}

data/assets/stylesheets/cc/styles/modules/_util.scss

@@ -0,0 +1,27 @@
+/*doc
+---
+title: Push bottom
+name: push-bottom
+category: util
+---
+
+Needing to make vertical space between elements is a common need: several
+classes are available for the most common amounts desired, in steps of `10px`
+(one third of the grid's vertical baseline, `30px`).
+
+- `.push-bottom--s` - adds `10px` bottom margin
+- `.push-bottom--m` - adds `20px` bottom margin
+- `.push-bottom--x1` - adds `30px` bottom margin
+*/
+
+.push-bottom--s {
+  margin-bottom: 10px;
+}
+
+.push-bottom--m {
+  margin-bottom: 20px;
+}
+
+.push-bottom--x1 {
+  margin-bottom: 30px;
+}

data/assets/stylesheets/vendor/reset.scss

@@ -0,0 +1,2 @@
+/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

data/codeclimate-styles.gemspec

@@ -0,0 +1,18 @@
+# coding: utf-8
+lib = File.expand_path("../lib", __FILE__)
+$:.unshift(lib) unless $:.include?(lib)
+require "cc/styles/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "codeclimate-styles"
+  spec.version = CC::Styles::VERSION
+  spec.authors = ["Code Climate"]
+  spec.email = ["hello@codeclimate.com"]
+  spec.summary = "Code Climate stylesheets"
+  spec.description = "Foundational stylesheets for Code Climate properties"
+  spec.homepage = "https://styleguide.codeclimate.com"
+  spec.license = "MIT"
+
+  spec.files = `git ls-files`.split($/)
+  spec.require_paths = ["lib"]
+end

data/lib/cc/styles/engine.rb

@@ -0,0 +1,18 @@
+module CC
+  module Styles
+    class Engine < ::Rails::Engine
+      initializer "cc.styles.assets.precompile" do |app|
+        %w[stylesheets javascripts fonts images].each do |sub|
+          app.config.assets.paths << root.join("assets", sub).to_s
+          app.config.assets.precompile += ["cc/styles/logo/*", "cc/styles/icons/*"]
+        end
+
+        # sprockets-rails 3 tracks down the calls to `font_path` and `image_path`
+        # and automatically precompiles the referenced assets.
+        unless Sprockets::Rails::VERSION.split(".", 2)[0].to_i >= 3
+          app.config.assets.precompile << %r{bootstrap/glyphicons-halflings-regular\.(?:eot|svg|ttf|woff2?)$}
+        end
+      end
+    end
+  end
+end

data/lib/cc/styles/version.rb

@@ -0,0 +1,5 @@
+module CC
+  module Styles
+    VERSION = "0.1.0".freeze
+  end
+end

data/lib/cc/styles.rb

@@ -0,0 +1,13 @@
+require "cc/styles/version"
+
+if defined?(Rails)
+  require "cc/styles/engine"
+end
+
+module CC
+  module Styles
+    def self.assets_dir
+      File.expand_path("../../assets/", File.dirname(__FILE__))
+    end
+  end
+end

data/lib/codeclimate-styles.rb

@@ -0,0 +1,3 @@
+# rubocop:disable Style/FileName
+require "cc/styles"
+# rubocop:enable Style/FileName

metadata

@@ -0,0 +1,116 @@
+--- !ruby/object:Gem::Specification
+name: codeclimate-styles
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Code Climate
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-03-31 00:00:00.000000000 Z
+dependencies: []
+description: Foundational stylesheets for Code Climate properties
+email:
+- hello@codeclimate.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- Rakefile
+- assets/images/cc/styles/icons/add_collaborator_linear.svg
+- assets/images/cc/styles/icons/add_collaborator_solid.svg
+- assets/images/cc/styles/icons/add_linear.svg
+- assets/images/cc/styles/icons/add_solid.svg
+- assets/images/cc/styles/icons/alert_solid.svg
+- assets/images/cc/styles/icons/arrow_linear.svg
+- assets/images/cc/styles/icons/arrow_solid.svg
+- assets/images/cc/styles/icons/badge_linear.svg
+- assets/images/cc/styles/icons/badge_solid.svg
+- assets/images/cc/styles/icons/branch_solid.svg
+- assets/images/cc/styles/icons/checkmark.svg
+- assets/images/cc/styles/icons/code_badge.svg
+- assets/images/cc/styles/icons/docs_linear.svg
+- assets/images/cc/styles/icons/docs_solid.svg
+- assets/images/cc/styles/icons/error.svg
+- assets/images/cc/styles/icons/eye_disabled.svg
+- assets/images/cc/styles/icons/eye_enabled.svg
+- assets/images/cc/styles/icons/file_linear.svg
+- assets/images/cc/styles/icons/files_linear.svg
+- assets/images/cc/styles/icons/files_solid.svg
+- assets/images/cc/styles/icons/folder_linear.svg
+- assets/images/cc/styles/icons/folder_solid.svg
+- assets/images/cc/styles/icons/hourglass_badge.svg
+- assets/images/cc/styles/icons/info_linear.svg
+- assets/images/cc/styles/icons/info_solid.svg
+- assets/images/cc/styles/icons/link_arrow.svg
+- assets/images/cc/styles/icons/lock_linear.svg
+- assets/images/cc/styles/icons/lock_solid.svg
+- assets/images/cc/styles/icons/logout_linear.svg
+- assets/images/cc/styles/icons/new_alert.svg
+- assets/images/cc/styles/icons/nubbin_arrow.svg
+- assets/images/cc/styles/icons/post_entry.svg
+- assets/images/cc/styles/icons/post_entry_unread.svg
+- assets/images/cc/styles/icons/search_linear.svg
+- assets/images/cc/styles/icons/search_solid.svg
+- assets/images/cc/styles/icons/settings_linear.svg
+- assets/images/cc/styles/icons/settings_solid.svg
+- assets/images/cc/styles/icons/small_dismiss_x.svg
+- assets/images/cc/styles/icons/star_linear.svg
+- assets/images/cc/styles/icons/star_solid.svg
+- assets/images/cc/styles/icons/sucess.svg
+- assets/images/cc/styles/icons/sync.svg
+- assets/images/cc/styles/icons/ticket_linear.svg
+- assets/images/cc/styles/icons/trial_icon.svg
+- assets/images/cc/styles/icons/user_settings_linear.svg
+- assets/images/cc/styles/logo/ff_logo_white.svg
+- assets/images/cc/styles/logo/logo.svg
+- assets/images/cc/styles/logo/logo_with_wordmark.svg
+- assets/javascripts/cc/styles/grid_overlay.js
+- assets/stylesheets/cc/_styles.scss
+- assets/stylesheets/cc/styles/_colors.scss
+- assets/stylesheets/cc/styles/_mixins.scss
+- assets/stylesheets/cc/styles/_modules.scss
+- assets/stylesheets/cc/styles/mixins/_ff_mask_image.scss
+- assets/stylesheets/cc/styles/mixins/_transitions.scss
+- assets/stylesheets/cc/styles/modules/_buttons.scss
+- assets/stylesheets/cc/styles/modules/_code.scss
+- assets/stylesheets/cc/styles/modules/_forms.scss
+- assets/stylesheets/cc/styles/modules/_layout.scss
+- assets/stylesheets/cc/styles/modules/_lists.scss
+- assets/stylesheets/cc/styles/modules/_misc.scss
+- assets/stylesheets/cc/styles/modules/_tabs.scss
+- assets/stylesheets/cc/styles/modules/_typography.scss
+- assets/stylesheets/cc/styles/modules/_util.scss
+- assets/stylesheets/vendor/reset.scss
+- codeclimate-styles.gemspec
+- lib/cc/styles.rb
+- lib/cc/styles/engine.rb
+- lib/cc/styles/version.rb
+- lib/codeclimate-styles.rb
+homepage: https://styleguide.codeclimate.com
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.8
+signing_key: 
+specification_version: 4
+summary: Code Climate stylesheets
+test_files: []