english_tea 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6dbed523b260d51208c3fdabe5e76c970e3bc44e
+  data.tar.gz: 3582c0f46cd06803d5b4d8fdacdce7e8cc887816
+SHA512:
+  metadata.gz: 3581bc56912ee39d75946b2a90f73dde9d6ebd43f9010583f4c5c4d1c79dcd78fdc32515e4e2e864af3b0ad52a498ea5aae8146e568a291cee64f1a9a5a0c246
+  data.tar.gz: 95861c76e69e367a654f8fd83f9147142f4493326a99b058fec17cf169a143ae38e521bd01f8804d46afe2a2a93211605d3f405307ba12e668a76a865ff5d76a

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in english_tea.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Rob Cameron
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,37 @@
+# EnglishTea
+
+Atomic CSS from WorkingNotWorking.com
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'english_tea'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install english_tea
+
+Include in your application.css file:
+
+    *= require english_tea/all
+
+Alternatively you can include individual modules by directory/name:
+
+    *= require_tree english_tea/setup
+    *= require_tree english_tea/typography
+    *= require english_tea/buttons/index
+
+## Documentation
+
+See https://workingnotworking.com/styleguide for tons of usage examples (coming soon).
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,10 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+end
+
+task :default => :test

data/app/assets/stylesheets/english_tea/all.scss

@@ -0,0 +1,154 @@
+// ==========================================================================
+// WNW Styling
+// @joelparr
+// ==========================================================================
+
+// ---
+// VENDOR
+// 3rd-party libraries (mixins etc)
+// ---
+
+@import 'bourbon';
+@import 'snapper';
+
+// ---
+// SETUP
+// Normalization, defaults, configuration & utilities
+// ---
+
+@import 'setup/config';
+@import 'setup/functions';
+@import 'setup/mixins';
+@import 'setup/normalize';
+@import 'setup/default';
+
+// ---
+// MEDIA
+// Images, videos & icons
+// ---
+
+@import 'media/icons';
+
+// ---
+// BUTTONS
+// Shorthand for buttons
+// ---
+
+@import 'buttons/index';
+
+// ---
+// FORMS
+// Shorthand for form fields & inputs
+// ---
+
+@import 'forms/index';
+@import 'forms/text';
+@import 'forms/numeric';
+@import 'forms/select';
+@import 'forms/autocomplete';
+@import 'forms/choices';
+//@import 'forms/range';
+@import 'forms/datepicker';
+@import 'forms/uploader';
+@import 'forms/media';
+
+//@import 'forms/modules';
+
+// ---
+// MODULES
+// Shorthands for modules & other patterns
+// ---
+
+@import 'modules/index';
+
+@import 'modules/avatars';
+@import 'modules/box-shadow';
+@import 'modules/bubbles';
+@import 'modules/celebrate';
+@import 'modules/cursors';
+@import 'modules/tooltips';
+
+@import 'modules/navigation';
+@import 'modules/tiles';
+@import 'modules/listings';
+@import 'modules/profile';
+@import 'modules/projects';
+@import 'modules/job_posts';
+@import 'modules/notifications_stream';
+
+@import 'modules/menu';
+@import 'modules/overlay';
+@import 'modules/notification';
+@import 'modules/modal';
+@import 'modules/fadein';
+@import 'modules/stickybanner';
+@import 'modules/tabs';
+@import 'modules/billing';
+
+// ---
+// TYPOGRAPHY
+// Fonts, type styles, type hierarchy & vertical rhythm
+// ---
+
+@import 'typography/fonts';
+@import 'typography/style';
+@import 'typography/hierarchy';
+
+// ---
+// LAYOUT
+// Display types, positioning, horizontal + vertical alignment & visibility
+// ---
+
+@import 'layout/display';
+@import 'layout/alignment';
+@import 'layout/sizing';
+@import 'layout/float';
+@import 'layout/position';
+@import 'layout/layers';
+@import 'layout/clearfix';
+@import 'layout/flex';
+@import 'layout/visibility';
+@import 'layout/grid';
+
+// ---
+// DIMENSION
+// Hierarcical margins & padding
+// ---
+
+@import 'dimension/margin';
+@import 'dimension/padding';
+@import 'dimension/position';
+
+// ---
+// BORDER
+// Borders (per-side) widths, colors & styles
+// ---
+
+@import 'border/index';
+
+// ---
+// COLOR
+// All UI color classes
+// ---
+
+@import 'color/index';
+@import 'color/border';
+@import 'color/status';
+@import 'color/jobs';
+@import 'color/social';
+@import 'color/buttons';
+
+// ---
+// TRANSITIONS + EFFECTS
+// Transitions & animations on interaction
+// ---
+
+@import 'transition/index';
+
+// ---
+// MARKETING PAGES
+// Special stying for marketing page components
+// ---
+
+@import 'marketing/index';
+@import 'marketing/double_login';

data/app/assets/stylesheets/english_tea/border/_index.scss

@@ -0,0 +1,77 @@
+// ==========================================================================
+// Border widths & style declaration classes
+// ==========================================================================
+
+// ---
+// RADIUS
+// ---
+
+.b-rad-rnd
+{
+	border-radius: $border-radius-rounded;
+}
+
+.b-rad-pill
+{
+	border-radius: $border-radius-pill;
+}
+
+.b-rad-circ
+{
+	border-radius: $border-radius-circle;
+}
+
+.b-rad-none
+{
+	border-radius: $border-radius-base;
+}
+
+// ---
+// 1PX SIDED + ALL BORDERS
+// ---
+
+@include _bp-prefixer(b)
+{
+	&
+	{
+		border: $border-width $border-style $color-border-base !important;
+	}
+
+	&0
+	{
+		border: none !important;
+	}
+
+	@each $key, $val in (t: top, r: right, b: bottom, l: left)
+	{
+		// ---
+		// PER-SIDE BORDERS
+		// ---
+
+		&#{$key}
+		{
+			border-#{$val}: $border-width $border-style $color-border-base !important;
+		}
+
+		// ---
+		// REMOVE PER-SIDE BORDERS
+		// ---
+
+		&#{$key}0
+		{
+			border-#{$val}: none !important;
+		}
+	}
+}
+
+// ---
+// BORDERS WIDTHS
+// ---
+
+@for $i from 0 through 10
+{
+	.bw#{$i}
+	{
+		border-width: #{$i}px !important;
+	}
+}

data/app/assets/stylesheets/english_tea/buttons/_index.scss

@@ -0,0 +1,44 @@
+// ==========================================================================
+// Shorthand button styling classes
+// ==========================================================================
+
+.btn
+{
+	$_type: map-get($type-scale, 1);
+
+	@each $key, $val in $button-scale
+	{
+		&#{$key}
+		{
+			display: block;
+
+			cursor: pointer;
+			font-size: _rem(map-get($_type, size));
+			font-weight: $type-weight-medium;
+			line-height: _rem(map-get($_type, line-height));
+			text-align: center;
+
+			@include transition(all $transition-timing-button $transition-easing-button);
+		}
+	}
+}
+
+	// Inner element to lay out icons etc within buttons
+	.btn-layout
+	{
+		@include display(flex);
+		@include align-items(center);
+		width: 100%;
+	}
+
+// Tweak padding across breakpoints
+@include _bp-prefixer(btn)
+{
+	@each $key, $val in $button-scale
+	{
+		&#{$key}
+		{
+			padding: _rem(map-get($val, padding-y)) _rem(map-get($val, padding-x));
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/color/_border.scss

@@ -0,0 +1,32 @@
+// ==========================================================================
+// Border color declaration classes
+// Pulled from $colors
+// ==========================================================================
+
+@each $key, $val in $colors
+{
+	.c-b#{$key}
+	{
+		border-color: $val !important;
+	}
+
+	@each $_key, $_val in (top: t, right: r, bottom: b, left: l)
+	{
+		.c-b#{$_val}#{$key}
+		{
+			border-#{$_key}-color: $val !important;
+		}
+	}
+}
+
+// ---
+// Border color utility classes
+// ---
+
+@each $_key, $_val in (top: t, right: r, bottom: b, left: l)
+{
+	.c-b#{$_val}-trans
+	{
+		border-#{$_key}-color: transparent !important;
+	}
+}

data/app/assets/stylesheets/english_tea/color/_buttons.scss

@@ -0,0 +1,182 @@
+// ==========================================================================
+// Button color declaration classes
+// - Button colors for all our global monochrome colors in $colors
+// - Status button colors for all colors in $colors-status
+// - Job button colors for all colors in $colors-job-statuses/types
+// ==========================================================================
+
+// BUTTON BASE COLORS
+
+@for $i from 1 through length($colors)
+{
+  $_iterator: nth($colors, $i);
+  $_key: nth($_iterator, 1);
+  $_val: nth($_iterator, 2);
+
+  // Default text + text hover colors are LIGHTEST
+  $_txt: map-get($colors, 1);
+  $_txt-hover: map-get($colors, 1);
+
+  $_fill: $_val;
+  $_fill-hover: map-get($colors, 1);
+
+  // If color LIGHTER than color #4, set text hover as DARKEST color
+  // i.e. Light fills have dark text
+	@if $i < 4
+	{
+		$_txt: map-get($colors, 10);
+	}
+
+	// If color is LIGHTEST, set text hover to DARKEST color
+	// (text hover otherwise always LIGHTEST color)
+	@if $i == 1
+	{
+		$_txt-hover: map-get($colors, 10);
+	}
+
+	// If color lighter than color #6, set fill hover one step DARKER,
+	// otherwise set color one step LIGHTER
+	@if $i < 6
+	{
+		$_fill-hover: map-get($colors, $i + 1);
+	}
+	@else
+	{
+		$_fill-hover: map-get($colors, $i - 1);
+	}
+
+	// If color is DARKEST, set fill hover two steps DARKER instead of one
+	@if $i == 10
+	{
+		$_fill-hover: map-get($colors, $i - 2);
+	}
+
+	.c-btn#{$_key}
+	{
+		background-color: $_fill;
+		border: $border-width $border-style $_fill;
+		color: $_txt;
+
+		&:not(:disabled):active,
+		&:not(:disabled):focus,
+		&:not(:disabled):hover
+		{
+			background-color: $_fill-hover;
+			border-color: $_fill-hover;
+			color: $_txt-hover;
+			opacity: 1;
+		}
+	}
+}
+
+// BUTTON STATUS COLORS
+
+@each $key, $val in $colors-status
+{
+	.c-btn-#{$key}
+	{
+		background-color: map-get($val, 3);
+		border: $border-width $border-style map-get($val, 3);
+		color: map-get($colors, 1);
+
+		&:not(:disabled):active,
+		&:not(:disabled):focus,
+		&:not(:disabled):hover
+		{
+			background-color: map-get($val, 4);
+			border-color: map-get($val, 4);
+			color: map-get($colors, 1);
+			opacity: 1;
+		}
+	}
+}
+
+// BUTTON JOB COLORS
+
+// Job Statuses
+@each $key, $val in $colors-job-statuses
+{
+	.c-btn-job-#{$key}
+	{
+		background-color: map-get($val, 3);
+		border: $border-width $border-style map-get($val, 3);
+		color: map-get($colors, 1);
+
+		&:not(:disabled):active,
+		&:not(:disabled):focus,
+		&:not(:disabled):hover,
+		{
+			background-color: map-get($val, 4);
+			border-color: map-get($val, 4);
+			color: map-get($colors, 1);
+		}
+	}
+}
+
+// Job Types
+@each $key, $val in $colors-job-types
+{
+	.c-btn-job-#{$key}
+	{
+		background-color: map-get($val, 3);
+		border: $border-width $border-style map-get($val, 3);
+		color: map-get($colors, 1);
+
+		&:not(:disabled):active,
+		&:not(:disabled):focus,
+		&:not(:disabled):hover,
+		{
+			background-color: map-get($val, 4);
+			border-color: map-get($val, 4);
+			color: map-get($colors, 1);
+		}
+	}
+}
+
+// GLOBAL INACTIVE + DISABLED BUTTONS
+
+.c-btn-inactive
+{
+	background-color: map-get($colors, 2);
+	border: $border-width $border-style map-get($colors, 2);
+	color: map-get($colors, 4);
+
+	&:not(:disabled):active,
+	&:not(:disabled):focus,
+	&:not(:disabled):hover
+	{
+		background-color: map-get($colors, 2);
+		border-color: map-get($colors, 2);
+		color: map-get($colors, 10);
+		opacity: 1;
+	}
+}
+
+.c-btn-disabled,
+.c-btn-disabled:not(:disabled):active,
+.c-btn-disabled:not(:disabled):focus,
+.c-btn-disabled:not(:disabled):hover
+{
+	background-color: map-get($colors, 2);
+	border: $border-width $border-style map-get($colors, 2);
+	color: map-get($colors, 3);
+	cursor: not-allowed;
+	opacity: 1;
+}
+
+// TRANSPARENT BG BUTTONS
+
+.c-btn-trans
+{
+	background-color: transparent;
+	border: $border-width $border-style transparent;
+	color: map-get($colors, 10);
+
+	&:active,
+	&:focus,
+	&:hover
+	{
+		background-color: map-get($colors, 2);
+		opacity: 1;
+	}
+}

data/app/assets/stylesheets/english_tea/color/_index.scss

@@ -0,0 +1,57 @@
+// ==========================================================================
+// Text, Fill, Shade and Effects color declaration classes
+// ==========================================================================
+
+// ---
+// TEXT COLORS
+// Pulled from $colors
+// ---
+
+@each $key, $val in $colors
+{
+	.c-txt#{$key}
+	{
+		color: $val !important;
+	}
+}
+
+// ---
+// FILL (BG) COLORS
+// Pulled from $colors
+// ---
+
+@each $key, $val in $colors
+{
+	.c-fill#{$key}
+	{
+		background-color: $val !important;
+	}
+}
+
+// ---
+// UNIQUE SHADE COLOR
+// ---
+
+.c-fill-shade
+{
+	background-color: $color-fill-shade !important;
+}
+
+.c-txt-shade
+{
+	color: $color-fill-shade !important;
+}
+
+.c-b-shade
+{
+	border-color: $color-fill-shade !important;
+}
+
+// ---
+// EFFECTS
+// ---
+
+.bw
+{
+	@include prefixer(filter, grayscale(100%), webkit spec);
+}

data/app/assets/stylesheets/english_tea/color/_jobs.scss

@@ -0,0 +1,46 @@
+// ==========================================================================
+// Job color declaration classes
+// Pulled from $colors-job-statuses/types
+// ==========================================================================
+
+@each $key, $val in $colors-job-statuses
+{
+	.c-b-job-#{$key}
+	{
+		border-color: map-get($val, 3) !important;
+	}
+
+	.c-fill-job-#{$key}
+	{
+		background-color: map-get($val, 3) !important;
+	}
+
+	.c-txt-job-#{$key}
+	{
+		color: map-get($val, 3) !important;
+	}
+}
+
+// Just dealing with job types (fulltime, freelance, etc)
+@each $key, $val in $colors-job-types
+{
+	.c-b-job-#{$key}
+	{
+		border-color: map-get($val, 2) !important;
+	}
+
+	.c-fill-job-#{$key}
+	{
+		background-color: map-get($val, 2) !important;
+	}
+
+	.c-txt-job-#{$key}
+	{
+		color: map-get($val, 2) !important;
+	}
+
+	.c-txt-job-#{$key}-light
+	{
+		color: map-get($val, 1) !important;
+	}
+}