kentucky 2.2.2 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/LICENSE +2 -2
- data/app/assets/stylesheets/base/_normalize.scss +322 -0
- data/app/assets/stylesheets/base/_typography.scss +62 -0
- data/app/assets/stylesheets/components/README +9 -0
- data/app/assets/stylesheets/layout/README +10 -0
- data/app/assets/stylesheets/pages/README +6 -0
- data/app/assets/stylesheets/project.scss +18 -0
- data/app/assets/stylesheets/utilities/_functions.scss +37 -0
- data/app/assets/stylesheets/utilities/_mixins.scss +306 -0
- data/app/assets/stylesheets/utilities/_variables.scss +122 -0
- data/app/assets/stylesheets/vendors/README +12 -0
- data/kentucky.gemspec +3 -3
- data/lib/kentucky/generator.rb +1 -1
- data/lib/kentucky/version.rb +1 -1
- data/readme.md +23 -116
- metadata +21 -29
- data/app/assets/stylesheets/kentucky/_kentucky.scss +0 -52
- data/app/assets/stylesheets/kentucky/addons/_border.scss +0 -30
- data/app/assets/stylesheets/kentucky/addons/_clearfix.scss +0 -14
- data/app/assets/stylesheets/kentucky/addons/_easings.scss +0 -37
- data/app/assets/stylesheets/kentucky/addons/_hide-text.scss +0 -9
- data/app/assets/stylesheets/kentucky/addons/_input-types.scss +0 -82
- data/app/assets/stylesheets/kentucky/addons/_position.scss +0 -42
- data/app/assets/stylesheets/kentucky/addons/_size.scss +0 -47
- data/app/assets/stylesheets/kentucky/addons/_truncate.scss +0 -10
- data/app/assets/stylesheets/kentucky/base/_buttons.scss +0 -40
- data/app/assets/stylesheets/kentucky/base/_forms.scss +0 -86
- data/app/assets/stylesheets/kentucky/base/_layouts.scss +0 -13
- data/app/assets/stylesheets/kentucky/base/_lists.scss +0 -35
- data/app/assets/stylesheets/kentucky/base/_project-settings.scss +0 -112
- data/app/assets/stylesheets/kentucky/base/_tables.scss +0 -28
- data/app/assets/stylesheets/kentucky/base/_typography.scss +0 -84
- data/app/assets/stylesheets/kentucky/functions/_assign.scss +0 -17
- data/app/assets/stylesheets/kentucky/functions/_tint-shade.scss +0 -11
@@ -1,9 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// Image Replacement - Hide Text
|
3
|
-
// ------------------------------------------------------------------- //
|
4
|
-
|
5
|
-
@mixin hide-text {
|
6
|
-
text-indent: 101%;
|
7
|
-
overflow: hidden;
|
8
|
-
white-space: nowrap;
|
9
|
-
}
|
@@ -1,82 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// HTML 5 Input Types
|
3
|
-
//
|
4
|
-
// Generate a variable ($all-text-inputs) with a list of each HTML5
|
5
|
-
// input type with text-based input, excluding textarea.
|
6
|
-
//
|
7
|
-
// To use these you must use SCSS interpolation on the variable:
|
8
|
-
// #{$all-text-inputs}
|
9
|
-
// #{$all-text-inputs-hover}
|
10
|
-
// #{$all-text-inputs-focus}
|
11
|
-
// #{$all-text-inputs-active}
|
12
|
-
//
|
13
|
-
// Example:
|
14
|
-
// #{$all-text-inputs}, textarea {
|
15
|
-
// border: 1px solid red;
|
16
|
-
// }
|
17
|
-
// ------------------------------------------------------------------- //
|
18
|
-
|
19
|
-
$inputs-list: 'input[type="email"]',
|
20
|
-
'input[type="number"]',
|
21
|
-
'input[type="password"]',
|
22
|
-
'input[type="search"]',
|
23
|
-
'input[type="tel"]',
|
24
|
-
'input[type="text"]',
|
25
|
-
'input[type="url"]',
|
26
|
-
|
27
|
-
// Webkit & Gecko may change the display of these in the future
|
28
|
-
'input[type="color"]',
|
29
|
-
'input[type="date"]',
|
30
|
-
'input[type="datetime"]',
|
31
|
-
'input[type="datetime-local"]',
|
32
|
-
'input[type="month"]',
|
33
|
-
'input[type="time"]',
|
34
|
-
'input[type="week"]';
|
35
|
-
|
36
|
-
// Bare Inputs
|
37
|
-
$all-text-inputs: assign-inputs($inputs-list);
|
38
|
-
|
39
|
-
// Hover Pseudo-class
|
40
|
-
$all-text-inputs-hover: assign-inputs($inputs-list, hover);
|
41
|
-
|
42
|
-
// Focus Pseudo-class
|
43
|
-
$all-text-inputs-focus: assign-inputs($inputs-list, focus);
|
44
|
-
|
45
|
-
// Active Pseudo-class
|
46
|
-
$all-text-inputs-active: assign-inputs($inputs-list, active);
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
// ------------------------------------------------------------------- //
|
51
|
-
// HTML 5 Button Types
|
52
|
-
//
|
53
|
-
// Generate a variable ($all-button-inputs) with a list of each HTML5
|
54
|
-
// input type with button-based input, excluding button.
|
55
|
-
//
|
56
|
-
// To use these you must use SCSS interpolation on the variable:
|
57
|
-
// #{$all-button-inputs}
|
58
|
-
// #{$all-button-inputs-hover}
|
59
|
-
// #{$all-button-inputs-focus}
|
60
|
-
// #{$all-button-inputs-active}
|
61
|
-
//
|
62
|
-
// Example:
|
63
|
-
// #{$all-button-inputs}, button {
|
64
|
-
// border: 1px solid red;
|
65
|
-
// }
|
66
|
-
// ------------------------------------------------------------------- //
|
67
|
-
|
68
|
-
$inputs-button-list: 'input[type="button"]',
|
69
|
-
'input[type="reset"]',
|
70
|
-
'input[type="submit"]';
|
71
|
-
|
72
|
-
// Bare inputs
|
73
|
-
$all-button-inputs: assign-inputs($inputs-button-list);
|
74
|
-
|
75
|
-
// Hover Pseudo-class
|
76
|
-
$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
|
77
|
-
|
78
|
-
// Focus Pseudo-class
|
79
|
-
$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
|
80
|
-
|
81
|
-
// Active Pseudo-class
|
82
|
-
$all-button-inputs-active: assign-inputs($inputs-button-list, active);
|
@@ -1,42 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// Basic Positioning (Type + T/L/B/R Values)
|
3
|
-
//
|
4
|
-
// @include position(absolute, 10px 0 0 10px);
|
5
|
-
// ------------------------------------------------------------------- //
|
6
|
-
|
7
|
-
@mixin position($pos-type: relative, $pos-vals: 0 0 0 0) {
|
8
|
-
|
9
|
-
// If no position type designated, default to "relative"
|
10
|
-
@if type-of($pos-type) == list{
|
11
|
-
$pos-vals: $pos-type;
|
12
|
-
$pos-type: relative;
|
13
|
-
}
|
14
|
-
|
15
|
-
// Separate values into top, right, bottom, left
|
16
|
-
$top: nth($pos-vals, 1);
|
17
|
-
$right: nth($pos-vals, 2);
|
18
|
-
$bottom: nth($pos-vals, 3);
|
19
|
-
$left: nth($pos-vals, 4);
|
20
|
-
|
21
|
-
// Return position
|
22
|
-
position: $pos-type;
|
23
|
-
|
24
|
-
// Return values
|
25
|
-
// If value is a number and has a unit type, print value
|
26
|
-
// otherwise ignore
|
27
|
-
@if (type-of($top) == number and not unitless($top)){
|
28
|
-
top: $top;
|
29
|
-
}
|
30
|
-
|
31
|
-
@if (type-of($right) == number and not unitless($right)){
|
32
|
-
right: $right;
|
33
|
-
}
|
34
|
-
|
35
|
-
@if (type-of($bottom) == number and not unitless($bottom)){
|
36
|
-
bottom: $bottom;
|
37
|
-
}
|
38
|
-
|
39
|
-
@if (type-of($left) == number and not unitless($left)){
|
40
|
-
left: $left;
|
41
|
-
}
|
42
|
-
}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
// Sizing mixin
|
2
|
-
@mixin size($size) {
|
3
|
-
|
4
|
-
// If only one value is present
|
5
|
-
@if length($size) == 1 {
|
6
|
-
|
7
|
-
@if $size == auto{
|
8
|
-
width: auto;
|
9
|
-
height: auto;
|
10
|
-
}
|
11
|
-
@else if unitless($size) {
|
12
|
-
width: $size + px;
|
13
|
-
height: $size + px;
|
14
|
-
}
|
15
|
-
@else if not(unitless($size)) {
|
16
|
-
width: $size;
|
17
|
-
height: $size;
|
18
|
-
}
|
19
|
-
}
|
20
|
-
|
21
|
-
// If both values are present
|
22
|
-
@if length($size) == 2 {
|
23
|
-
|
24
|
-
$width: nth($size, 1);
|
25
|
-
$height: nth($size, 2);
|
26
|
-
|
27
|
-
@if $width == auto {
|
28
|
-
width: $width;
|
29
|
-
}
|
30
|
-
@else if unitless($width){
|
31
|
-
width: $width + px;
|
32
|
-
}
|
33
|
-
@else if not(unitless($width)) {
|
34
|
-
width: $width;
|
35
|
-
}
|
36
|
-
|
37
|
-
@if $height == auto{
|
38
|
-
height: $height;
|
39
|
-
}
|
40
|
-
@else if unitless($height) {
|
41
|
-
height: $height + px;
|
42
|
-
}
|
43
|
-
@else if not(unitless($height)) {
|
44
|
-
height: $height;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// Button Normalization
|
3
|
-
//
|
4
|
-
// General styles to better standardize / simplify default <button>
|
5
|
-
// elements.
|
6
|
-
// ------------------------------------------------------------------- //
|
7
|
-
|
8
|
-
#{$all-button-inputs} {
|
9
|
-
-webkit-font-smoothing: antialiased;
|
10
|
-
-webkit-appearance: none;
|
11
|
-
-moz-appearance: none;
|
12
|
-
-ms-appearance: none;
|
13
|
-
appearance: none;
|
14
|
-
display: inline-block;
|
15
|
-
padding: ($base-spacing / 2) $base-spacing;
|
16
|
-
background-color: $base-button-color;
|
17
|
-
border: 0;
|
18
|
-
border-radius: $base-border-radius;
|
19
|
-
color: white;
|
20
|
-
font-family: $base-font-family;
|
21
|
-
font-size: $base-font-size;
|
22
|
-
font-weight: bold;
|
23
|
-
line-height: 1;
|
24
|
-
text-decoration: none;
|
25
|
-
vertical-align: middle;
|
26
|
-
white-space: nowrap;
|
27
|
-
user-select: none;
|
28
|
-
cursor: pointer;
|
29
|
-
|
30
|
-
&:hover,
|
31
|
-
&:focus {
|
32
|
-
background-color: $hover-button-color;
|
33
|
-
color: white;
|
34
|
-
}
|
35
|
-
|
36
|
-
&:disabled {
|
37
|
-
cursor: not-allowed;
|
38
|
-
opacity: .5;
|
39
|
-
}
|
40
|
-
}
|
@@ -1,86 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// Form Element Normalization
|
3
|
-
//
|
4
|
-
// General styles to better standardize / simplify default form
|
5
|
-
// elements.
|
6
|
-
// ------------------------------------------------------------------- //
|
7
|
-
|
8
|
-
fieldset {
|
9
|
-
margin: 0 0 ($base-spacing / 2);
|
10
|
-
padding: $base-spacing;
|
11
|
-
background: lighten($base-border-color, 10);
|
12
|
-
border: $base-border;
|
13
|
-
}
|
14
|
-
|
15
|
-
input,
|
16
|
-
label,
|
17
|
-
select {
|
18
|
-
display: block;
|
19
|
-
font-family: $form-font-family;
|
20
|
-
font-size: $form-font-size;
|
21
|
-
}
|
22
|
-
|
23
|
-
label {
|
24
|
-
margin-bottom: $base-spacing / 4;
|
25
|
-
font-weight: bold;
|
26
|
-
|
27
|
-
&.required:after {
|
28
|
-
content: "*";
|
29
|
-
}
|
30
|
-
|
31
|
-
abbr {
|
32
|
-
display: none;
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
textarea,
|
37
|
-
#{$all-text-inputs},
|
38
|
-
select[multiple=multiple] {
|
39
|
-
width: 100%;
|
40
|
-
margin-bottom: $base-spacing / 2;
|
41
|
-
padding: ($base-spacing / 3);
|
42
|
-
background-color: white;
|
43
|
-
border: 1px solid $form-border-color;
|
44
|
-
border-radius: $form-border-radius;
|
45
|
-
font-family: $form-font-family;
|
46
|
-
font-size: $form-font-size;
|
47
|
-
box-shadow: $form-box-shadow;
|
48
|
-
transition: border-color, .3s;
|
49
|
-
|
50
|
-
&:hover {
|
51
|
-
border-color: $form-border-color-hover;
|
52
|
-
}
|
53
|
-
|
54
|
-
&:focus {
|
55
|
-
border-color: $form-border-color-focus;
|
56
|
-
box-shadow: $form-box-shadow-focus;
|
57
|
-
outline: none;
|
58
|
-
}
|
59
|
-
}
|
60
|
-
|
61
|
-
textarea {
|
62
|
-
resize: vertical;
|
63
|
-
}
|
64
|
-
|
65
|
-
input[type="search"] {
|
66
|
-
-webkit-appearance: none;
|
67
|
-
-moz-appearance: none;
|
68
|
-
-ms-appearance: none;
|
69
|
-
}
|
70
|
-
|
71
|
-
input[type="checkbox"],
|
72
|
-
input[type="radio"] {
|
73
|
-
display: inline;
|
74
|
-
margin-right: $base-spacing / 4;
|
75
|
-
}
|
76
|
-
|
77
|
-
input[type="file"] {
|
78
|
-
width: 100%;
|
79
|
-
padding-bottom: $base-spacing / 2;
|
80
|
-
}
|
81
|
-
|
82
|
-
select {
|
83
|
-
width: auto;
|
84
|
-
max-width: 100%;
|
85
|
-
margin-bottom: $base-spacing;
|
86
|
-
}
|
@@ -1,13 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// Layouts Normalization
|
3
|
-
// ------------------------------------------------------------------- //
|
4
|
-
|
5
|
-
* {
|
6
|
-
box-sizing: border-box;
|
7
|
-
}
|
8
|
-
|
9
|
-
html,
|
10
|
-
body {
|
11
|
-
margin: 0;
|
12
|
-
padding: 0;
|
13
|
-
}
|
@@ -1,35 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// List Normalization
|
3
|
-
// ------------------------------------------------------------------- //
|
4
|
-
|
5
|
-
ul,
|
6
|
-
ol {
|
7
|
-
margin: 0;
|
8
|
-
padding: 0;
|
9
|
-
list-style-type: none;
|
10
|
-
|
11
|
-
&%default-ul {
|
12
|
-
margin-bottom: $base-spacing / 2;
|
13
|
-
padding-left: $base-spacing;
|
14
|
-
list-style-type: disc;
|
15
|
-
}
|
16
|
-
|
17
|
-
&%default-ol {
|
18
|
-
margin-bottom: $base-spacing / 2;
|
19
|
-
padding-left: $base-spacing;
|
20
|
-
list-style-type: decimal;
|
21
|
-
}
|
22
|
-
}
|
23
|
-
|
24
|
-
dl {
|
25
|
-
margin-bottom: $base-spacing / 2;
|
26
|
-
|
27
|
-
dt {
|
28
|
-
margin-top: $base-spacing / 2;
|
29
|
-
font-weight: bold;
|
30
|
-
}
|
31
|
-
|
32
|
-
dd {
|
33
|
-
margin: 0;
|
34
|
-
}
|
35
|
-
}
|
@@ -1,112 +0,0 @@
|
|
1
|
-
// ------------------------------------------------------------------- //
|
2
|
-
// Project Settings
|
3
|
-
//
|
4
|
-
// This file houses variables related to brand and overall stylistic
|
5
|
-
// elements (fonts, sizes, colors, etc.) that should be used across
|
6
|
-
// the site.
|
7
|
-
//
|
8
|
-
// This is a basic set for initial functionality but any project-
|
9
|
-
// related variables that need to be global should exist in this file.
|
10
|
-
//
|
11
|
-
// Local variables should still exist in the file in which they are
|
12
|
-
// required.
|
13
|
-
// ------------------------------------------------------------------- //
|
14
|
-
|
15
|
-
|
16
|
-
// ------------------------------------------------------------------- //
|
17
|
-
// Typography
|
18
|
-
|
19
|
-
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
20
|
-
$header-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
// ------------------------------------------------------------------- //
|
25
|
-
// Font Sizes
|
26
|
-
|
27
|
-
$base-font-size: 16px;
|
28
|
-
|
29
|
-
$h1-font-size: 42px;
|
30
|
-
$h2-font-size: 36px;
|
31
|
-
$h3-font-size: 24px;
|
32
|
-
$h4-font-size: 20px;
|
33
|
-
$h5-font-size: 18px;
|
34
|
-
$h6-font-size: 16px;
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
// ------------------------------------------------------------------- //
|
39
|
-
// Line Height
|
40
|
-
|
41
|
-
$base-line-height: 1.5;
|
42
|
-
$header-line-height: 1.2;
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
// ------------------------------------------------------------------- //
|
47
|
-
// Other Sizes
|
48
|
-
|
49
|
-
$base-border-radius: 3px;
|
50
|
-
|
51
|
-
$base-spacing: 20px;
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
// ------------------------------------------------------------------- //
|
56
|
-
// Colors
|
57
|
-
|
58
|
-
// Background Color
|
59
|
-
$base-background-color: white;
|
60
|
-
|
61
|
-
// Font Colors
|
62
|
-
$base-font-color: #333;
|
63
|
-
$base-accent-color: #b4d455;
|
64
|
-
|
65
|
-
// Link Colors
|
66
|
-
$base-link-color: $base-accent-color;
|
67
|
-
$hover-link-color: shade($base-link-color, 15%);
|
68
|
-
|
69
|
-
// Button Colors
|
70
|
-
$base-button-color: $base-link-color;
|
71
|
-
$hover-button-color: $hover-link-color;
|
72
|
-
|
73
|
-
// Border Colors
|
74
|
-
$base-border-color: #ddd;
|
75
|
-
$base-border: 1px solid $base-border-color;
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
// ------------------------------------------------------------------- //
|
80
|
-
// Forms
|
81
|
-
|
82
|
-
$form-border-color: $base-border-color;
|
83
|
-
$form-border-color-hover: shade($base-border-color, 10%);
|
84
|
-
$form-border-color-focus: $base-accent-color;
|
85
|
-
$form-border-radius: $base-border-radius;
|
86
|
-
|
87
|
-
$form-box-shadow: inset 0 1px 3px rgba(black, .1);
|
88
|
-
$form-box-shadow-focus: $form-box-shadow,
|
89
|
-
0 0 5px rgba($form-border-color-focus, .5);
|
90
|
-
|
91
|
-
$form-font-family: $base-font-family;
|
92
|
-
$form-font-size: $base-font-size;
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
// ------------------------------------------------------------------- //
|
97
|
-
// Media Queries
|
98
|
-
|
99
|
-
$mobile: 480px;
|
100
|
-
$tablet: 990px;
|
101
|
-
$laptop: 1440px;
|
102
|
-
$desktop: 1920px;
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
// ------------------------------------------------------------------- //
|
107
|
-
// Z-Index Map
|
108
|
-
|
109
|
-
$z-map: ("base": 0,
|
110
|
-
"nav": 10,
|
111
|
-
"overlay": 20,
|
112
|
-
"modal": 30);
|