From b73f261c98e539114a9786843607f9a1884b5286 Mon Sep 17 00:00:00 2001 From: Dennis Thompson Date: Sun, 8 Jan 2017 23:36:09 -0800 Subject: [PATCH] New theme --- README.md | 4 +- skeleton/themes/wing/_base.scss | 339 ++++++++++++++++++++++++++++ skeleton/themes/wing/_skeleton.scss | 1 + skeleton/themes/wing/_vars.scss | 11 + 4 files changed, 354 insertions(+), 1 deletion(-) create mode 100644 skeleton/themes/wing/_base.scss create mode 100644 skeleton/themes/wing/_skeleton.scss create mode 100644 skeleton/themes/wing/_vars.scss diff --git a/README.md b/README.md index e1c4c4c..0cf40c9 100644 --- a/README.md +++ b/README.md @@ -172,7 +172,7 @@ Skeleton # Where all of the magic happens └── themes # Where all of the themes live ├── fresh │   ├── _base.scss contains # All of the base styles for Skeleton Sass with the exception of the reset styles - │   ├── _skeleton.scss + │   ├── _skeleton.scss │   ├── _vars.scss # Project-scoped configuration options and variables │   └── marrow # Stores all project-level functions and mixins │   └── _mixins.scss # loads the default theme mixins and functions from sphenoid @@ -376,3 +376,5 @@ Contributors * **Note:** as a result of his work we can finally close [issue #16](https://github.com/atomicpages/skeleton-sass/issues/16) * [seshaljain](https://github.com/seshaljain) * [Issue #22](https://github.com/atomicpages/skeleton-sass/issues/22) +* [pcbulai](https://github.com/pcbulai) + * [Issue #24](https://github.com/atomicpages/skeleton-sass/issues/24) diff --git a/skeleton/themes/wing/_base.scss b/skeleton/themes/wing/_base.scss new file mode 100644 index 0000000..be18fca --- /dev/null +++ b/skeleton/themes/wing/_base.scss @@ -0,0 +1,339 @@ +// The foundation of Skeleton which includes all base styles +// that come bundled by default. +// See skeleton/core/_config.scss for default variable values. +// See _vars.scss for theme-scoped default values. + +/* Normalize + * ------------------------------------------------ */ + @include normalize(); + +/* BASIC STYLES + * ------------------------------------------------ */ +html { + font-size: percentage(strip-units($base-font-size) / 16); + box-sizing: border-box; + margin: 0; + padding: 0; +} +@if($use-global-border-box) { + *, + *:before, + *:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } +} +body { + letter-spacing: 0.01em; + background: $background-color; + font: { + family: $font-family; + weight: $font-weight; + style: normal; + } + @include font-size($font-size); + line-height: 1.6; + color: $font-color; +} + +/* TYPOGRAPHY + * ------------------------------------------------ */ +h1, h2, h3, h4, h5, h6 { + color: $heading-color; + font: { + family: $heading-family; + weight: $heading-weight; + } + margin-top: 0; + margin-bottom: relative(20px); +} +h1, h2, h3 { letter-spacing: -0.1rem; } +h1 { + font-size: relative(40px); + line-height: 1.2; +} +h2 { + font-size: relative(36px); + line-height: 1.25; +} +h3 { + font-size: relative(30px); + line-height: 1.3; +} +h4 { + font-size: relative(24px); + line-height: 1.35; + letter-spacing: -0.08rem; +} +h5 { + font-size: relative(18px); + line-height: 1.5; + letter-spacing: -0.05rem; +} +h6 { + font-size: relative(15px); + line-height: 1.6; + letter-spacing: 0; +} + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { font-size: relative(50px); } + h2 { font-size: relative(42px); } + h3 { font-size: relative(36px); } + h4 { font-size: relative(30px); } + h5 { font-size: relative(24px); } + h6 { font-size: relative(15px); } +} + +p { margin-top: 0; } + +/* LINKS + * ------------------------------------------------ */ +a, a:visited { + color: $link-color; + text-decoration: $link-decoration; +} +a:hover, a:focus, a:active { color: $link-hover; } + +/* LISTS + * ------------------------------------------------ */ +ul { list-style: circle inside; } +ol { list-style: decimal inside; } +ol, ul { + padding-left: 0; + margin-top: 0; +} +ul ul, +ul ol, +ol ol, +ol ul { + margin: relative(15px) 0 relative(15px) relative(30px); + font-size: 90%; +} +li { margin-bottom: relative(10px); } + +/* CODE + * ------------------------------------------------ */ +code { + padding: relative(2px) relative(5px); + margin: 0 relative(2px); + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; +} +pre > code { + display: block; + padding: relative(10px) relative(15px); + white-space: pre; +} + +/* TABLES + * ------------------------------------------------ */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; + &:first-child { padding-left: 0; } + &:last-child { padding-right: 0; } +} + +/* UTILITIES + * ------------------------------------------------ */ +.u-full-width { + width: 100%; + box-sizing: border-box; +} +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; +} +.u-pull-right { float: right; } +.u-pull-left { float: left; } + +/* IMAGES + * ------------------------------------------------ */ +img.scale-with-grid { + max-width: 100%; + height: auto; +} + +/* BUTTONS + * ------------------------------------------------ */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + overflow: hidden; + display: inline-block; + margin: relative(10px); + padding: relative(12px) relative(12px); + -webkit-user-select: none; + user-select: none; + -webkit-transition: all 60ms ease-in-out; + transition: all 60ms ease-in-out; + color: $button-color; + text-align: center; + font-family: inherit; + line-height: 1.3; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-weight: $button-weight; + text-transform: if($button-font-uppercase, uppercase, none); + text-decoration: none; + white-space: nowrap; + background-color: $button-bg-color; + border-radius: 4px; + border: 0 none; + cursor: pointer; + &:hover { + -webkit-transition: all 60ms ease; + transition: all 60ms ease; + opacity: 0.85; + } + &:disabled { + opacity: 0.8; + cursor: not-allowed; + } + &:focus { outline: 0 none; } + &:active { + -webkit-transition: all 60ms ease; + transition: all 60ms ease; + -webkit-transform: scale(0.97); + transform: scale(0.97); + opacity: 0.75; + } + &.outline { + border: 3px solid $button-outline-border-color; + color: $button-color; + background: transparent; + transition: all 0.5s ease; + &:hover, &:active { + color: #000; + background: #fff; + } + } + &.outline-inverted { + border: 3px solid #000; + color: #000; + background: transparent; + transition: all 0.5s ease; + &:hover, &:active { + color: #fff; + background: #000; + } + } + &.clear { + background: transparent; + color: gray; + } +} + +/* Fix for odd Mozilla border & padding issues */ +button, +input { + &::-moz-focus-inner { + border: 0; + padding: 0; + } +} + +/* FORMS + * ------------------------------------------------ */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; +} +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; +} +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; +} +label, +legend { + display: block; + margin-bottom: relative(5px); + font-weight: 600; +} +fieldset { + padding: 0; + border-width: 0; +} +input[type="checkbox"], +input[type="radio"] { display: inline; } +label > .label-body { + display: inline-block; + margin-left: relative(5px); + font-weight: normal; +} + +/* SPACING + * ------------------------------------------------ */ +button, +.button { margin-bottom: relative(10px); } +input, +textarea, +select, +fieldset { margin-bottom: relative(15px); } +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { margin-bottom: relative(25px); } + +/* MISC + * ------------------------------------------------ */ +hr { + margin-top: relative(30px); + margin-bottom: relative(35px); + border-width: 0; + border-top: 1px solid #E1E1E1; +} diff --git a/skeleton/themes/wing/_skeleton.scss b/skeleton/themes/wing/_skeleton.scss new file mode 100644 index 0000000..db802a1 --- /dev/null +++ b/skeleton/themes/wing/_skeleton.scss @@ -0,0 +1 @@ +@import "../fresh/skeleton"; diff --git a/skeleton/themes/wing/_vars.scss b/skeleton/themes/wing/_vars.scss new file mode 100644 index 0000000..aee88f7 --- /dev/null +++ b/skeleton/themes/wing/_vars.scss @@ -0,0 +1,11 @@ +$font-size: 1.5rem; +$font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; +$heading-weight: 300; +$heading-family: "Quicksand", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + +// Buttons +$button-color: #fff; +$button-font-uppercase: true; +$button-bg-color: #333030; +$button-weight: 500; +$button-outline-border-color: $button-color;