From 868e9dcdc14faff121731a0226e8d2ad660a1121 Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 02:59:41 +0000 Subject: [PATCH 01/10] Added Sass converted files --- sass/accordion.scss | 71 ++++++ sass/autocomplete.scss | 28 +++ sass/blocks-responsive.scss | 42 ++++ sass/blocks.scss | 39 +++ sass/buttons.scss | 173 +++++++++++++ sass/dropdown.scss | 62 +++++ sass/filterbox.scss | 57 +++++ sass/forms-responsive.scss | 9 + sass/forms.scss | 266 ++++++++++++++++++++ sass/grid-responsive.scss | 88 +++++++ sass/grid.scss | 174 +++++++++++++ sass/helpers.scss | 132 ++++++++++ sass/kube.scss | 42 ++++ sass/labels.scss | 101 ++++++++ sass/livesearch.scss | 47 ++++ sass/mixins.scss | 248 +++++++++++++++++++ sass/modal.scss | 66 +++++ sass/navigation-responsive.scss | 32 +++ sass/navigation.scss | 348 ++++++++++++++++++++++++++ sass/notifications.scss | 64 +++++ sass/prettyprint.scss | 86 +++++++ sass/print.scss | 72 ++++++ sass/progress.scss | 32 +++ sass/reset.scss | 254 +++++++++++++++++++ sass/tables.scss | 49 ++++ sass/tooltip.scss | 35 +++ sass/typography-responsive.scss | 70 ++++++ sass/typography.scss | 415 ++++++++++++++++++++++++++++++++ sass/upload.scss | 19 ++ sass/variables.scss | 134 +++++++++++ 30 files changed, 3255 insertions(+) create mode 100644 sass/accordion.scss create mode 100644 sass/autocomplete.scss create mode 100644 sass/blocks-responsive.scss create mode 100644 sass/blocks.scss create mode 100644 sass/buttons.scss create mode 100644 sass/dropdown.scss create mode 100644 sass/filterbox.scss create mode 100644 sass/forms-responsive.scss create mode 100644 sass/forms.scss create mode 100644 sass/grid-responsive.scss create mode 100644 sass/grid.scss create mode 100644 sass/helpers.scss create mode 100644 sass/kube.scss create mode 100644 sass/labels.scss create mode 100644 sass/livesearch.scss create mode 100644 sass/mixins.scss create mode 100644 sass/modal.scss create mode 100644 sass/navigation-responsive.scss create mode 100644 sass/navigation.scss create mode 100644 sass/notifications.scss create mode 100644 sass/prettyprint.scss create mode 100644 sass/print.scss create mode 100644 sass/progress.scss create mode 100644 sass/reset.scss create mode 100644 sass/tables.scss create mode 100644 sass/tooltip.scss create mode 100644 sass/typography-responsive.scss create mode 100644 sass/typography.scss create mode 100644 sass/upload.scss create mode 100644 sass/variables.scss diff --git a/sass/accordion.scss b/sass/accordion.scss new file mode 100644 index 0000000..5f28949 --- /dev/null +++ b/sass/accordion.scss @@ -0,0 +1,71 @@ +/* =Accordion +-----------------------------------------------------------------------------*/ +.accordion-title { + position: relative; + display: block; + margin: 0; + margin-bottom: 2px; + padding: 12px 50px 12px 18px; + color: #000; + text-decoration: none; + font-weight: normal; + font-size: $font-size-base; + line-height: 1,4em; + background: $color-gray-pastel; + cursor: pointer; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + &.accordion-title-opened { + margin-bottom: 0; + font-weight: bold; + background: $color-gray-light; + } + & a, + &:hover { + color: #000; + text-decoration: none; + } +} +.accordion-panel { + padding: $base-line; + margin-bottom: 10px; +} +.accordion-toggle { + position: absolute; + top: 50%; + margin-top: -8px; + right: 20px; + padding: 0; + font-size: 0; + line-height: 1; +} +.accordion-toggle-closed { + background: #000; + width: 1px; + height: 15px; + margin-left: 1px; + &:before { + position: absolute; + top: 7px; + left: -7px; + content: ""; + width: 15px; + height: 1px; + background: #000; + } +} +.accordion-toggle-opened:before { + position: absolute; + top: 7px; + left: -8px; + content: ""; + width: 15px; + height: 1px; + background: #000; +} diff --git a/sass/autocomplete.scss b/sass/autocomplete.scss new file mode 100644 index 0000000..4df10a2 --- /dev/null +++ b/sass/autocomplete.scss @@ -0,0 +1,28 @@ +/* =Autocomplete +-----------------------------------------------------------------------------*/ +.autocomplete { + position: absolute; + z-index: 1000; + left: 0; + display: none; + margin: 0; + list-style: none; + background: #fff; + width: 250px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .2); + max-height: 250px; + overflow: auto; + & a { + padding: 4px 10px; + color: #000; + display: block; + text-decoration: none; + &:hover { + background: $color-gray-light; + } + &.active { + background: $color-blue; + color: #fff; + } + } +} \ No newline at end of file diff --git a/sass/blocks-responsive.scss b/sass/blocks-responsive.scss new file mode 100644 index 0000000..1c7b7de --- /dev/null +++ b/sass/blocks-responsive.scss @@ -0,0 +1,42 @@ +/* =Blocks Responsive +-----------------------------------------------------------------------------*/ +@media only screen and (max-width: 767px) { + + .blocks-2, + .blocks-3, + .blocks-4, + .blocks-5, + .blocks-6 { + margin-left: 0; + margin-bottom: $base-line; + } + + .blocks-2 > li, + .blocks-3 > li, + .blocks-4 > li, + .blocks-5 > li, + .blocks-6 > li { + float: none; + margin-left: 0; + width: 100%; + } + + .blocks-mobile-50 > li, + .blocks-mobile-33 > li { + float: left; + margin-left: $grid-gutter-width/($grid-width/100)*1%; + } + .blocks-mobile-33, + .blocks-mobile-50 { + margin-left: -$grid-gutter-width/($grid-width/100)*1%; + } + + .blocks-mobile-50 > li { + @include block(2); + } + .blocks-mobile-33 > li { + @include block(3); + } + + +} \ No newline at end of file diff --git a/sass/blocks.scss b/sass/blocks.scss new file mode 100644 index 0000000..4d133a5 --- /dev/null +++ b/sass/blocks.scss @@ -0,0 +1,39 @@ +/* =Blocks +-----------------------------------------------------------------------------*/ +.blocks-2, +.blocks-3, +.blocks-4, +.blocks-5, +.blocks-6 { + padding-left: 0; + list-style: none; + margin-left: -$grid-gutter-width / ($grid-width / 100) * 1%; + @include clearfix; + & > li { + height: auto; + float: left; + margin-bottom: $base-line; + margin-left: $grid-gutter-width / ($grid-width / 100) * 1%; + & ul { + list-style-type: disc; + } + & ul ul { + list-style-type: circle; + } + & li { + float: none; + margin: 0; + } + } + +} + +.blocks-2 > li { @include block(2); } +.blocks-3 > li { @include block(3); } +.blocks-4 > li { @include block(4); } +.blocks-5 > li { @include block(5); } +.blocks-6 > li { @include block(6); } + +.block-first { + clear: both; +} \ No newline at end of file diff --git a/sass/buttons.scss b/sass/buttons.scss new file mode 100644 index 0000000..5c5591d --- /dev/null +++ b/sass/buttons.scss @@ -0,0 +1,173 @@ +/* =Buttons +-----------------------------------------------------------------------------*/ +.btn, +input[type="submit"].btn { + display: inline-block; + vertical-align: top; + + font-family: $font-family-controls; + font-size: 1em; + font-weight: 400; + + line-height: $base-line; + + text-align: center; + text-decoration: none; + color: $color-body; + + -webkit-appearance: none; + + outline: none; + margin: 0; + border: none; + border-radius: 2px; + box-shadow: none; + cursor: pointer; + background: $color-gray; + padding: $padding-btn; + + &:hover { + color: rgba(0, 0, 0, .5); + background: $color-gray-dark; + } +} +.btn::-moz-focus-inner { + border: 0; + padding: 0; +} +.btn-big, +input[type="submit"].btn-big { + font-size: $font-size-big; +} +.btn-small, +input[type="submit"].btn-small { + font-size: $font-size-small; +} +.btn-smaller, +input[type="submit"].btn-smaller { + font-size: $font-size-smaller; + vertical-align: baseline; +} +.btn-round { + border-radius: 15px; +} +.btn-outline, +input[type="submit"].btn-outline { + background: none; + padding: $padding-btn-outline; + border: 1px solid $color-black; + &:hover { + border-color: $color-gray-dark; + } +} +.btn-outline.btn-active { + padding: $padding-btn; +} +.btn-outline.bold { + border-width: 2px; + padding: $padding-btn-outline-bold; +} +.btn-active, +.btn[disabled], +.btn-disabled { + background: none; + background: $color-gray-dark; + color: rgba(0, 0, 0, .5); + &:hover { + color: rgba(0, 0, 0, .5); + background: $color-gray-dark; + } +} +.btn-active { + box-shadow: 0 1px 3px rgba(0, 0, 0, .4) inset; +} +.btn-outline.btn[disabled], +.btn-outline.btn-disabled { + background: none; + box-shadow: none; + color: rgba(0, 0, 0, .3); + border: 1px solid rgba(0, 0, 0, .1); +} +.btn-outline.btn-active { + background: none; + color: rgba(0, 0, 0, .4); + border: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset; +} +.btn[disabled], +.btn-disabled { + cursor: default; + box-shadow: none; +} + + +.btn-blue, +input[type="submit"].btn-blue { + @include make-color-btn($color-blue, $color-blue-dark, #fff); +} +.btn-red, +input[type="submit"].btn-red { + @include make-color-btn($color-red, $color-red-dark, #fff); +} +.btn-green, +input[type="submit"].btn-green { + @include make-color-btn($color-green, $color-green-dark, #fff); +} +.btn-black, +input[type="submit"].btn-black { + @include make-color-btn($color-black, $color-black-light, #fff, .7); +} +.btn-yellow, +input[type="submit"].btn-yellow { + @include make-color-btn($color-yellow, $color-yellow-dark, #000); +} +.btn-white, +input[type="submit"].btn-white { + @include make-color-btn($color-white, darken(#fff, 7%), #000, .2); +} + +.btn-white { + &.btn-outline.btn-active { + box-shadow: none; + border: 1px solid rgba(255, 255, 255, .3); + padding: $padding-btn-outline; + } +} + + +/* + Buttons Group +*/ +.btn-single, +.btn-group { + display: inline-block; + margin-right: 2px; + @include clearfix; + vertical-align: bottom; +} +.btn-single > .btn, +.btn-single > input, +.btn-group > .btn, +.btn-group > input { + float: left; + border-radius: 0; + margin-left: -1px; +} +.btn-single > .btn { + border-radius: 2px; +} +.btn-group > .btn:first-child { + border-radius: 2px 0 0 2px; +} +.btn-group > .btn:last-child { + border-radius: 0 2px 2px 0; +} +.btn-group > .btn.btn-round:first-child, +.btn-group > .input-search:first-child { + border-radius: 15px 0 0 15px; +} +.btn-group > .btn.btn-round:last-child, +.btn-group > .input-search:last-child { + border-radius: 0 15px 15px 0; +} + diff --git a/sass/dropdown.scss b/sass/dropdown.scss new file mode 100644 index 0000000..ef80b78 --- /dev/null +++ b/sass/dropdown.scss @@ -0,0 +1,62 @@ +/* =Dropdown +-----------------------------------------------------------------------------*/ +.dropdown { + display: none; + position: absolute; + z-index: 102; + top: 0; + right: 0; + width: 250px; + color: $color-black; + background: $color-white; + box-shadow: 0 1px 5px rgba(0, 0, 0, .3); + overflow: auto; + + & section { + max-height: 250px; + overflow: auto; + padding: 20px; + } + & footer { + padding: 20px; + } + +} +ul.dropdown { + + max-height: 300px; + list-style: none; + margin: 0; + line-height: 1.5; + font-size: 95%; + padding: 0; + + & a { + display: block; + padding: 7px 15px; + text-decoration: none; + color: $color-black; + &:hover { + background: #eee; + } + } + + & li.divider { + border-bottom: 1px solid #e2e2e2; + } + +} +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: .3em; + vertical-align: middle; + border-top: 5px solid; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + &.caret-up { + border-top: 0; + border-bottom: 4px solid; + } +} diff --git a/sass/filterbox.scss b/sass/filterbox.scss new file mode 100644 index 0000000..e272082 --- /dev/null +++ b/sass/filterbox.scss @@ -0,0 +1,57 @@ +/* =Filterbox +-----------------------------------------------------------------------------*/ +.filterbox { + position: relative; + & input { + padding-right: 30px; + } + & span { + position: absolute; + z-index: 2; + top: 0; + right: 1px; + width: 26px; + height: 100%; + cursor: pointer; + &:after { + content: ""; + display: inline-block; + position: relative; + top: 50%; + margin-left: 8px; + margin-top: -21px; + width: 0; + height: 0; + vertical-align: middle; + border-top: 5px solid rgba(0, 0, 0, .6); + border-right: 5px solid transparent; + border-left: 5px solid transparent; + } + } +} +.filterbox-list { + z-index: 1000; + position: absolute; + left: 0; + display: none; + margin: 0; + list-style: none; + background: #fff; + width: 100%; + box-shadow: 0 1px 3px rgba(0, 0, 0, .2); + max-height: 250px; + overflow: auto; + & li { + padding: 4px 10px; + color: #000; + cursor: pointer; + &:hover { + background: $color-gray-light; + } + &.active { + background: $color-blue; + color: #fff; + } + } +} + diff --git a/sass/forms-responsive.scss b/sass/forms-responsive.scss new file mode 100644 index 0000000..f7d71ab --- /dev/null +++ b/sass/forms-responsive.scss @@ -0,0 +1,9 @@ +/* =Forms Responsive +-----------------------------------------------------------------------------*/ +@media only screen and (max-width: 767px) { + + .forms-list label { + display: inline-block; + } + +} \ No newline at end of file diff --git a/sass/forms.scss b/sass/forms.scss new file mode 100644 index 0000000..333ed8e --- /dev/null +++ b/sass/forms.scss @@ -0,0 +1,266 @@ +/* =Forms +-----------------------------------------------------------------------------*/ +.forms { + & .btn, + & input[type="submit"].btn, + & button, + & input[type="submit"], + & input[type="reset"] { + padding: $padding-btn-in-forms; + } + & .btn-outline, { + padding: $padding-btn-outline-in-forms; + } + & .btn-outline.bold { + padding: $padding-btn-outline-bold-in-forms; + } +} + + +.forms { + & label { + display: block; + margin-bottom: $base-line / 1.5; + } + + & input[type="text"], + & input[type="password"], + & input[type="email"], + & input[type="url"], + & input[type="phone"], + & input[type="tel"], + & input[type="number"], + & input[type="datetime"], + & input[type="date"], + & input[type="month"], + & input[type="color"], + & input[type="time"], + & input[type="search"], + & input[type="range"], + & input[type="file"], + & input[type="datetime-local"], + & textarea, + & select { + display: block; + } +} +.forms-inline, +.forms-inline-list { + & input[type="text"], + & input[type="password"], + & input[type="email"], + & input[type="url"], + & input[type="phone"], + & input[type="tel"], + & input[type="number"], + & input[type="datetime"], + & input[type="date"], + & input[type="month"], + & input[type="color"], + & input[type="time"], + & input[type="search"], + & input[type="range"], + & input[type="file"], + & input[type="datetime-local"], + & textarea, + & select { + display: inline-block; + } +} + +.forms-list, +.forms-inline, +.forms-inline-list { + margin: 0; + padding: 0; + margin-bottom: $base-line / 1.5; + list-style: none; +} +.forms-list label, +.forms-inline label, +.forms-inline-list li, +.forms-inline-list li label { + display: inline-block; + margin-bottom: 0; +} +.forms-inline-list li label { + margin-right: $base-line / 2; +} +.forms-inline-list li { + margin-bottom: 3px; +} +.forms-list li { + margin-bottom: 6px; +} +.forms-desc { + margin-top: 4px; + color: rgba(0, 0, 0, .4); + font-size: $font-size-small; + line-height: 1.4em; +} + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="phone"], +input[type="tel"], +input[type="number"], +input[type="datetime"], +input[type="date"], +input[type="month"], +input[type="color"], +input[type="time"], +input[type="search"], +input[type="datetime-local"], +textarea { + @include transition(border ease .5s); +} + + +/* States */ +.error, +.success { + font-weight: normal; + font-size: $font-size-small; +} +input.input-error, +textarea.input-error, +select.input-error, +.input-error { + border-color: $color-red; + box-shadow: 0 0 0 2px rgba(red($color-red), green($color-red), blue($color-red), .3),0 1px 2px rgba(0, 0, 0, .2) inset; +} +input.input-success, +textarea.input-success, +select.input-success, +.input-success { + border-color: $color-green; + box-shadow: 0 0 0 2px rgba(red($color-green), green($color-green), blue($color-green), .3),0 1px 2px rgba(0, 0, 0, .2) inset; + +} +input.input-gray, +textarea.input-gray, +select.input-gray, +.input-gray { + border-color: $color-gray-dark; + box-shadow: 0 0 0 2px rgba(red($color-gray-dark), green($color-gray-dark), blue($color-gray-dark), .4), 0 1px 2px rgba(0, 0, 0, .2) inset; +} + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="phone"], +input[type="tel"], +input[type="number"], +input[type="datetime"], +input[type="date"], +input[type="month"], +input[type="color"], +input[type="time"], +input[type="search"], +input[type="datetime-local"], +textarea { + &:focus { + outline: none; + border-color: $color-blue; + box-shadow: 0 0 0 2px rgba(red($color-blue), green($color-blue), blue($color-blue), .3), 0 1px 2px rgba(0, 0, 0, .2) inset; + } +} + +/* + Search +*/ +input.input-search, +input[type="search"] { + padding-right: .5em; + padding-left: .5em; + margin-bottom: 0; + border-radius: 15px; +} + +input.input-on-black { + border: 1px solid rgba(255, 255, 255, .1); + background: rgba(255, 255, 255, .35); + &::-webkit-input-placeholder { + color: rgba(255, 255, 255, .6); + } + &::-moz-placeholder { + color: rgba(255, 255, 255, .6); + } + &:focus, + &.active { + border: 1px solid #fff; + background: #fff; + box-shadow: none; + &::-webkit-input-placeholder { + color: #aaa; + } + &::-moz-placeholder { + color: #aaa; + } + } +} + +/* Sizes */ +input.input-big { + font-size: $font-size-big; +} +input.input-small { + font-size: $font-size-small; +} +input.input-smaller { + font-size: $font-size-smaller; +} + +/* Append & Prepend */ +.input-groups { + display: table !important; + + & input { + width: 100%; + } + + & input, + & .input-append, + & .input-prepend, + & .btn-append { + display: table-cell !important; + } + + & .btn-append, + & .input-append, + & .input-prepend { + width: 1%; + vertical-align: middle; + } + + & .input-append, + & .input-prepend { + background-color: $color-input-append-background; + border: 1px solid $color-input-append-border; + margin: 0; + padding: .45em .75em .15em .75em; + color: rgba(0, 0, 0, .6); + line-height: $base-line; + font-size: $font-size-small; + white-space: nowrap; + } + + & .input-prepend { + border-right: none; + } + + & .input-append { + position: relative; + z-index: 1; + border-left: none; + } + + & .btn-append .btn { + display: block; + height: auto; + border-radius: 0 2px 2px 0; + } +} \ No newline at end of file diff --git a/sass/grid-responsive.scss b/sass/grid-responsive.scss new file mode 100644 index 0000000..9b2e0be --- /dev/null +++ b/sass/grid-responsive.scss @@ -0,0 +1,88 @@ +/* =Grid Responsive +-----------------------------------------------------------------------------*/ +@media only screen and (max-width: 767px) { + + .mobile-width-100 { + width: 100%; + } + + .units-row .unit-90, + .units-row .unit-80, + .units-row .unit-75, + .units-row .unit-70, + .units-row .unit-66, + .units-row .unit-65, + .units-row .unit-60, + .units-row .unit-50, + .units-row .unit-40, + .units-row .unit-35, + .units-row .unit-33, + .units-row .unit-30, + .units-row .unit-25, + .units-row .unit-20, + .units-row .unit-10 { + width: 100%; + float: none; + margin-left: 0; + margin-bottom: $base-line; + } + + .unit-push-90, + .unit-push-80, + .unit-push-75, + .unit-push-70, + .unit-push-66, + .unit-push-65, + .unit-push-60, + .unit-push-50, + .unit-push-40, + .unit-push-35, + .unit-push-33, + .unit-push-30, + .unit-push-25, + .unit-push-20, + .unit-push-10 { + left: 0; + } + + .units-row .unit-push-right { + float: none; + } + + .units-mobile-50 .unit-90, + .units-mobile-50 .unit-80, + .units-mobile-50 .unit-75, + .units-mobile-50 .unit-70, + .units-mobile-50 .unit-66, + .units-mobile-50 .unit-65, + .units-mobile-50 .unit-60, + .units-mobile-50 .unit-40, + .units-mobile-50 .unit-30, + .units-mobile-50 .unit-35, + .units-mobile-50 .unit-33, + .units-mobile-50 .unit-25, + .units-mobile-50 .unit-20, + .units-mobile-50 .unit-10 { + float: left; + margin-left: $grid-gutter-width/($grid-width/100)*1%; + @include column(2); + } + .units-mobile-50 .unit-90:first-child, + .units-mobile-50 .unit-80:first-child, + .units-mobile-50 .unit-75:first-child, + .units-mobile-50 .unit-70:first-child, + .units-mobile-50 .unit-66:first-child, + .units-mobile-50 .unit-65:first-child, + .units-mobile-50 .unit-60:first-child, + .units-mobile-50 .unit-40:first-child, + .units-mobile-50 .unit-35:first-child, + .units-mobile-50 .unit-30:first-child, + .units-mobile-50 .unit-33:first-child, + .units-mobile-50 .unit-25:first-child, + .units-mobile-50 .unit-20:first-child, + .units-mobile-50 .unit-10:first-child { + margin-left: 0; + } + + +} diff --git a/sass/grid.scss b/sass/grid.scss new file mode 100644 index 0000000..5083cae --- /dev/null +++ b/sass/grid.scss @@ -0,0 +1,174 @@ +/* =Grid +-----------------------------------------------------------------------------*/ +.units-container, +.units-row { + .clearfix; +} +.units-container { /* it's the trick to not collapse padding-top in the child element */ + padding-top: 1px; + margin-top: -1px; +} +.units-row { + margin-bottom: $base-line; +} + +.width-100, .unit-100 { width: 100%; } +.width-90, .unit-90 { width: 90%; } +.width-80, .unit-80 { width: 80%; } +.width-75, .unit-75 { width: 75%; } +.width-70, .unit-70 { width: 70%; } +.width-66, .unit-66 { width: 66.6%; } +.width-65, .unit-65 { width: 65%; } +.width-60, .unit-60 { width: 60%; } +.width-50, .unit-50 { width: 50%; } +.width-40, .unit-40 { width: 40%; } +.width-35, .unit-35 { width: 35%; } +.width-33, .unit-33 { width: 33.3%; } +.width-30, .unit-30 { width: 30%; } +.width-25, .unit-25 { width: 25%; } +.width-20, .unit-20 { width: 20%; } +.width-10, .unit-10 { width: 10%; } + +.units-row .unit-90, +.units-row .unit-80, +.units-row .unit-75, +.units-row .unit-70, +.units-row .unit-66, +.units-row .unit-65, +.units-row .unit-60, +.units-row .unit-50, +.units-row .unit-40, +.units-row .unit-35, +.units-row .unit-33, +.units-row .unit-30, +.units-row .unit-25, +.units-row .unit-20, +.units-row .unit-10 { + float: left; + margin-left: $grid-gutter-width/($grid-width/100)*1%; + &:first-child { + margin-left: 0; + } +} +.units-row .unit-90 { @include columns(9, 10); } +.units-row .unit-80 { @include columns(4, 5); } +.units-row .unit-75 { @include columns(3, 4); } +.units-row .unit-70 { @include columns(7, 10); } +.units-row .unit-66 { @include columns(2, 3); } +.units-row .unit-65 { @include columns(2, 3); } +.units-row .unit-60 { @include columns(3, 5); } +.units-row .unit-50 { @include column(2); } +.units-row .unit-40 { @include columns(2, 5); } +.units-row .unit-35 { @include column(3); } +.units-row .unit-33 { @include column(3); } +.units-row .unit-30 { @include columns(3, 10); } +.units-row .unit-25 { @include column(4); } +.units-row .unit-20 { @include column(5); } +.units-row .unit-10 { @include columns(1, 10); } + +.unit-push-90, +.unit-push-80, +.unit-push-75, +.unit-push-70, +.unit-push-66, +.unit-push-65, +.unit-push-60, +.unit-push-50, +.unit-push-40, +.unit-push-35, +.unit-push-33, +.unit-push-30, +.unit-push-25, +.unit-push-20, +.unit-push-10 { + position: relative; +} +.unit-push-90 { @include columns-push(9, 10); } +.unit-push-80 { @include columns-push(4, 5); } +.unit-push-75 { @include columns-push(3, 4); } +.unit-push-70 { @include columns-push(7, 10); } +.unit-push-66 { @include columns-push(2, 3); } +.unit-push-65 { @include columns-push(2, 3); } +.unit-push-60 { @include columns-push(3, 5); } +.unit-push-50 { @include column-push(2); } +.unit-push-40 { @include columns-push(2, 5); } +.unit-push-35 { @include column-push(3); } +.unit-push-33 { @include column-push(3); } +.unit-push-30 { @include columns-push(3, 10); } +.unit-push-25 { @include column-push(4); } +.unit-push-20 { @include column-push(5); } +.unit-push-10 { @include columns-push(1, 10); } + +.units-row .unit-push-right { + float: right; +} +.units-row { + & .unit-role-right { + margin-left: $grid-gutter-width/($grid-width/100)*1%; + float: right; + } + & .unit-role-left { + margin-left: 0; + } +} + +.centered, +.unit-centered { + float: none !important; + margin: 0 auto !important; +} + +.unit-padding { + padding: $base-line; +} +.units-padding .unit-100, +.units-padding .unit-90, +.units-padding .unit-80, +.units-padding .unit-75, +.units-padding .unit-70, +.units-padding .unit-66, +.units-padding .unit-65, +.units-padding .unit-60, +.units-padding .unit-50, +.units-padding .unit-40, +.units-padding .unit-35, +.units-padding .unit-33, +.units-padding .unit-30, +.units-padding .unit-25, +.units-padding .unit-20, +.units-padding .unit-10 { + padding: $base-line; +} + +.units-split .unit-90, +.units-split .unit-80, +.units-split .unit-75, +.units-split .unit-70, +.units-split .unit-66, +.units-split .unit-65, +.units-split .unit-60, +.units-split .unit-50, +.units-split .unit-40, +.units-split .unit-35, +.units-split .unit-33, +.units-split .unit-30, +.units-split .unit-25, +.units-split .unit-20, +.units-split .unit-10 { + margin-left: 0; +} +.units-split .unit-90 { width: 90%; } +.units-split .unit-80 { width: 80%; } +.units-split .unit-75 { width: 75%; } +.units-split .unit-70 { width: 70%; } +.units-split .unit-66 { width: 66.6%; } +.units-split .unit-65 { width: 65%; } +.units-split .unit-60 { width: 60%; } +.units-split .unit-50 { width: 50%; } +.units-split .unit-40 { width: 40%; } +.units-split .unit-35 { width: 35%; } +.units-split .unit-33 { width: 33.3%; } +.units-split .unit-30 { width: 30%; } +.units-split .unit-25 { width: 25%; } +.units-split .unit-20 { width: 20%; } +.units-split .unit-10 { width: 10%; } \ No newline at end of file diff --git a/sass/helpers.scss b/sass/helpers.scss new file mode 100644 index 0000000..334acda --- /dev/null +++ b/sass/helpers.scss @@ -0,0 +1,132 @@ +/* =Helpers +-----------------------------------------------------------------------------*/ +.group { + @include clearfix; +} +.hide { + display: none; +} +.highlight { + background-color: #f7f3e2; +} +.big { + font-size: $font-size-big; +} +.small { + font-size: $font-size-small; +} +.smaller { + font-size: $font-size-smaller; +} +.nowrap, +.nowrap td { + white-space: nowrap; +} +.req, +.required { + font-weight: normal; + color: $color-red; +} +.error { + color: $color-red; +} +.success { + color: $color-green; +} +.text-centered { + text-align: center; +} +.text-right { + text-align: right; +} +.last { + margin-right: 0 !important; +} +.pause { + margin-bottom: $base-line / 2 !important; +} +.end { + margin-bottom: 0 !important; +} +.normal { + font-weight: normal; +} +.light { + font-weight: 300; +} +.bold { + font-weight: bold; +} +.italic { + font-style: italic; +} +.left { + float: left; +} +.right { + float: right; +} +.upper { + text-transform: uppercase; +} +.list-flat { + margin-left: 0; + list-style: none; +} +.color-black { + color: $color-black; +} +.color-white { + color: $color-white; +} + +/* Colors */ +.color-gray-10 { color: rgba(0, 0, 0, .1); } +.color-gray-20 { color: rgba(0, 0, 0, .2); } +.color-gray-30 { color: rgba(0, 0, 0, .3); } +.color-gray-40 { color: rgba(0, 0, 0, .4); } +.color-gray-50 { color: rgba(0, 0, 0, .5); } +.color-gray-60 { color: rgba(0, 0, 0, .6); } +.color-gray-70 { color: rgba(0, 0, 0, .7); } +.color-gray-80 { color: rgba(0, 0, 0, .8); } +.color-gray-90 { color: rgba(0, 0, 0, .9); } + +.color-white-10 { color: rgba(255, 255, 255, .1); } +.color-white-20 { color: rgba(255, 255, 255, .2); } +.color-white-30 { color: rgba(255, 255, 255, .3); } +.color-white-40 { color: rgba(255, 255, 255, .4); } +.color-white-50 { color: rgba(255, 255, 255, .5); } +.color-white-60 { color: rgba(255, 255, 255, .6); } +.color-white-70 { color: rgba(255, 255, 255, .7); } +.color-white-80 { color: rgba(255, 255, 255, .8); } +.color-white-90 { color: rgba(255, 255, 255, .9); } + +/* Responsive embedded objects */ +.video-wrapper { + height: 0; + padding-bottom: 56.25%; // ratio 16:9 + position: relative; + margin-bottom: $base-line; + & iframe, + & object, + & embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + + +/* =Responsive +-----------------------------------------------------------------------------*/ +@media only screen and (max-width: 767px) { + .left, + .right { + float: none; + } + .hide-on-mobile { + display: none; + } +} diff --git a/sass/kube.scss b/sass/kube.scss new file mode 100644 index 0000000..2d183e7 --- /dev/null +++ b/sass/kube.scss @@ -0,0 +1,42 @@ +/* + Kube Framework 4 +*/ + +@import "mixins"; +@import "variables"; + +@import "reset"; +@import "typography"; + +@import "grid"; +@import "blocks"; + +@import "tables"; +@import "forms"; + +@import "navigation"; +@import "buttons"; + +@import "notifications"; +@import "labels"; + +@import "progress"; +@import "accordion"; +@import "filterbox"; +@import "tooltip"; +@import "dropdown"; +@import "livesearch"; +@import "upload"; +@import "autocomplete"; +@import "modal"; + +@import "helpers"; +@import "prettyprint"; + +@import "grid-responsive"; +@import "blocks-responsive"; +@import "typography-responsive"; +@import "navigation-responsive"; +@import "forms-responsive"; + +@import "print"; \ No newline at end of file diff --git a/sass/labels.scss b/sass/labels.scss new file mode 100644 index 0000000..5b5cd57 --- /dev/null +++ b/sass/labels.scss @@ -0,0 +1,101 @@ +/* =Labels +-----------------------------------------------------------------------------*/ +.label, +.badge { + background: $color-gray; + font-size: $font-size-small; + display: inline-block; + line-height: 1; + padding: 4px 7px 3px 7px; + color: $color-black; + text-align: center; + font-weight: normal; + text-transform: uppercase; +} +.label-outline { + background: none; + border: 1px solid $color-black; + padding: 3px 6px 2px 6px; +} +.badge { + border-radius: 15px; +} +.badge-small { + font-size: $font-size-smaller; + padding: 3px 5px; +} +.label-black, +.label-blue, +.label-red, +.label-green, +.badge-black, +.badge-blue, +.badge-red, +.badge-green { + color: $color-white; +} +.label-black, +.badge-black { + background: $color-black; +} +.label-blue, +.badge-blue { + background: $color-blue; +} +.label-red, +.badge-red { + background: $color-red; +} +.label-green, +.badge-green { + background: $color-green; +} +.label-yellow, +.badge-yellow { + background: $color-yellow; +} +.label-white, +.badge-white { + background: $color-white; +} +.label-black, +.label-blue, +.label-red, +.label-green, +.label-yellow, +.label-white { + &.label-outline { + background: none; + color: $color-black; + } +} +.label-blue { + &.label-outline { + border-color: $color-blue; + color: $color-blue; + } +} +.label-red { + &.label-outline { + border-color: $color-red; + color: $color-red; + } +} +.label-green { + &.label-outline { + border-color: $color-green; + color: $color-green; + } +} +.label-yellow { + &.label-outline { + border-color: $color-yellow; + color: $color-yellow; + } +} +.label-white { + &.label-outline { + border-color: $color-white; + color: $color-white; + } +} \ No newline at end of file diff --git a/sass/livesearch.scss b/sass/livesearch.scss new file mode 100644 index 0000000..7214dce --- /dev/null +++ b/sass/livesearch.scss @@ -0,0 +1,47 @@ +/* =Livesearch +-----------------------------------------------------------------------------*/ +.livesearch-box { + position: relative; + display: inline-block; + width: 100%; + + & input { + padding-left: 30px; + } + & .close { + position: absolute; + top: .2em; + right: 5px; + z-index: 2; + @include close(); + } +} +.livesearch-icon { + position: absolute; + top: 53%; + left: 10px; + z-index: 2; + &:before, + &:after { + content: ""; + position: absolute; + top: 50%; + left: 0; + margin: -8px 0 0; + background: rgba(0, 0, 0, .5); + } + &:before { + width: 10px; + height: 10px; + border: 2px solid rgba(0, 0, 0, .5); + background: transparent; + border-radius: 12px; + } + &:after { + left: 10px; + width: 2px; + height: 7px; + margin-top: 0; + @include rotate(-45deg); + } +} diff --git a/sass/mixins.scss b/sass/mixins.scss new file mode 100644 index 0000000..4ab2ce2 --- /dev/null +++ b/sass/mixins.scss @@ -0,0 +1,248 @@ +@mixin clearfix() { + &:after { + content: ""; + display: table; + clear: both; + } + +} +@mixin opacity($opacity: 100) { + filter: e(%("alpha(opacity=%d)", $opacity)); + -moz-opacity: $opacity / 100; + opacity: $opacity / 100; +} +@mixin selection($r, $g, $b) { + ::selection { background: rgb($r, $g, $b); } + ::-moz-selection { background: rgb($r, $g, $b); } + img::selection { background: transparent; } + img::-moz-selection { background: transparent; } +} +@mixin box-sizing($box-model) { + -webkit-box-sizing: $box-model; + -moz-box-sizing: $box-model; + box-sizing: $box-model; +} +@mixin vertical-align() { + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +@mixin gradient($start: #555, $end: #333) { + background-color: mix($start, $end, 60%); + background-image: -moz-linear-gradient(top, $start, $end); // FF 3.6+ + background-image: -ms-linear-gradient(top, $start, $end); // IE10 + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start), to($end)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, $start, $end); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, $start, $end); // Opera 11.10 + background-image: linear-gradient(top, $start, $end); // The standard + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",$start,$end)); // IE9 and down +} +@mixin border-top-radius($radius) { + border-top-right-radius: $radius; + border-top-left-radius: $radius; +} +@mixin border-right-radius($radius) { + border-bottom-right-radius: $radius; + border-top-right-radius: $radius; +} +@mixin border-bottom-radius($radius) { + border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; +} +@mixin border-left-radius($radius) { + border-bottom-left-radius: $radius; + border-top-left-radius: $radius; +} +@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { + border-top: 1px solid $top-color; + border-right: 1px solid $right-color; + border-bottom: 1px solid $bottom-color; + border-left: 1px solid $left-color; +} +@mixin retina-image($path, $w: auto, $h: auto) { + background-image: url($path); + $at2x_path: ~`${path}.replace(/\.\w+$/, function(match) { return "$2x" + match; })`; + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url($at2x_path); + background-size: $w $h; + } +} +@mixin transition($transition: all linear .2s) { + -moz-transition: $transition; + transition: $transition; +} +@mixin blur($radius) { + -webkit-filter: blur($radius); + -moz-filter: blur($radius); + -ms-filter: blur($radius); + filter: blur($radius); +} +@mixin rotate($deg) { + -webkit-transform: rotate($deg); + -moz-transform: rotate($deg); + -ms-transform: rotate($deg); + -o-transform: rotate($deg); + transform: rotate($deg); +} +@mixin arrow-top($color: #fff, $size: 5px, $left: 5px) { + &:after { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: $color; + border-width: $size; + left: $left; + } +} +@mixin arrow-bottom($color: #fff, $size: 5px, $left: 5px) { + &:after { + top: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-top-color: $color; + border-width: $size; + left: $left; + } +} +@mixin arrow-left($color: #fff, $size: 5px, $top: 5px) { + &:after { + right: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-right-color: $color; + border-width: $size; + top: $top; + } +} +@mixin arrow-right($color: #fff, $size: 5px, $top: 5px) { + &:after { + left: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-left-color: $color; + border-width: $size; + top: $top; + } +} +@mixin close($r: 0, $g: 0, $b: 0) { + padding: 4px 6px; + line-height: 1; + font-size: 20px; + cursor: pointer; + color: rgba($r, $g, $b, 1); + text-decoration: none; + @include opacity(50); + &:before { + content: '\00D7'; + } + &:hover { + @include opacity(100); + } +} +@mixin striped($color: rgba(255, 255, 255, .2); $angle: 45deg) { + background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); + background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); + background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); +} +@mixin animation($animation) { + -webkit-animation: $animation; + -o-animation: $animation; + animation: $animation; +} + +// Grid +@mixin block($num) { + width: (($grid-width - ($grid-gutter-width * $num)) / $num / ($grid-width / 100)) * 1%; +} + +@mixin column($num) { + width: (($grid-width - ($grid-gutter-width * ($num - 1))) / $num / ($grid-width / 100)) * 1%; +} + +@mixin columns($factor, $num) { + width: ((($grid-width - ($grid-gutter-width * ($num - 1))) / $num / ($grid-width / 100)) * $factor) + (($grid-gutter-width / ($grid-width / 100)) * ($factor - 1)) * 1%; +} + +@mixin column-push($num) { + left: ((($grid-width - ($grid-gutter-width * ($num - 1))) / $num / ($grid-width / 100)) + $grid-gutter-width/($grid-width/100)) * 1%; +} + +@mixin columns-push($factor, $num) { + left: (((($grid-width - ($grid-gutter-width * ($num - 1))) / $num / ($grid-width / 100)) * $factor) + (($grid-gutter-width / ($grid-width / 100)) * ($factor - 1)) + $grid-gutter-width/($grid-width/100)) * 1%; +} + +// Buttons +@mixin make-color-btn($color, $color-dark, $color-text, $active-shadow: .5) { + + color: rgba(red($color-text), green($color-text), blue($color-text), .9); + background: $color; + + &:hover { + color: rgba(red($color-text), green($color-text), blue($color-text), .6); + background: $color-dark; + } + + + &.btn-active { + box-shadow: 0 1px 4px rgba(0, 0, 0, $active-shadow) inset; + } + + &.btn-active, + &.btn-disabled, + &.btn[disabled] { + color: rgba(red($color-text), green($color-text), blue($color-text), .5); + background: $color-dark; + &:hover { + color: rgba(red($color-text), green($color-text), blue($color-text), .5); + } + } + + &.btn-outline { + background: none; + border-color: $color; + color: $color; + &:hover { + color: rgba(red($color-text), green($color-text), blue($color-text), .9); + background: $color; + } + } + + &.btn-outline.btn[disabled], + &.btn-outline.btn-disabled { + background: none; + box-shadow: none; + color: rgba(red($color), green($color), blue($color), .4); + border: 1px solid rgba(red($color), green($color), blue($color), .3); + } + &.btn-outline.btn-active { + background: none; + color: rgba(red($color), green($color), blue($color), .6); + border: none; + box-shadow: 0 1px 3px rgba(red($color-dark), green($color-dark), blue($color-dark), .6) inset; + } +} \ No newline at end of file diff --git a/sass/modal.scss b/sass/modal.scss new file mode 100644 index 0000000..e155159 --- /dev/null +++ b/sass/modal.scss @@ -0,0 +1,66 @@ +/* =Modal +-----------------------------------------------------------------------------*/ +#modal-overlay { + position: fixed; + top: 0; + left: 0; + margin: auto; + overflow: auto; + width: 100%; + height: 100%; + background-color: #000 !important; + @include opacity(30); + z-index: 100; +} +.modal-blur { + @include blur(3px); +} +.modal-box { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + overflow-x: hidden; + overflow-y: auto; + z-index: 101; +} +.modal { + position: relative; + margin: auto; + margin-bottom: 20px; + padding: 0; + background: #fff; + color: #000; + box-shadow: 0 1px 70px rgba(0, 0, 0, .5); + + & header { + padding: 30px 40px 5px 40px; + font-size: 18px; + font-weight: bold; + } + & section { + padding: 30px 40px 50px 40px; + } + & footer { + & button { + width: 100%; + border-radius: 0; + } + } +} +.modal-close { + position: absolute; + top: 8px; + right: 12px; + width: 30px; + height: 30px; + text-align: right; + color: #bbb; + font-size: 30px; + font-weight: 300; + cursor: pointer; + &:hover { + color: #000; + } +} \ No newline at end of file diff --git a/sass/navigation-responsive.scss b/sass/navigation-responsive.scss new file mode 100644 index 0000000..c72bdbc --- /dev/null +++ b/sass/navigation-responsive.scss @@ -0,0 +1,32 @@ +/* =Navigation Responsive +-----------------------------------------------------------------------------*/ +@media only screen and (max-width: 767px) { + + .navbar { + &.navbar-left, + &.navbar-right, + & li, + &.navbar-left li, + &.navbar-right li { + float: none; + text-align: left; + width: auto; + } + } + .navbar { + & li, + &.navbar-right li { + margin-left: 0; + margin-right: 0; + } + } + .fullwidth { + & ul, + & li { + width: auto; + } + & li { + display: block; + } + } +} \ No newline at end of file diff --git a/sass/navigation.scss b/sass/navigation.scss new file mode 100644 index 0000000..a2ab241 --- /dev/null +++ b/sass/navigation.scss @@ -0,0 +1,348 @@ +/* =Navs +-----------------------------------------------------------------------------*/ + +/* NavBar */ +.navbar { + font-size: 105%; + margin-bottom: $base-line; + @include clearfix; + + &.navbar-left { + float: left; + } + &.navbar-right { + float: right; + } + & ul { + list-style: none; + margin: 0; + @include clearfix; + } + & li { + float: left; + margin-right: $base-line; + } + &.navbar-right li { + margin-right: 0; + margin-left: $base-line; + } + & a, + & span { + display: block; + text-decoration: none; + } + & a:hover { + color: $color-link-hover; + text-decoration: underline; + } + & li.active a, + & span { + text-decoration: none; + cursor: text; + color: rgba(0, 0, 0, .4); + } +} + +.navigation-toggle { + display: none; + text-transform: uppercase; + position: relative; + + color: $color-black; + background-color: $color-white; + + &:after { + position: absolute; + z-index: 1; + top: 50%; + margin-top: -12px; + left: 10px; + content: "\2630"; + font-size: 24px; + line-height: 1; + } + &.navigation-toggle-black { + background-color: $color-black; + color: $color-white; + } + &.navigation-toggle-show { + margin-bottom: $base-line; + } + & span { + position: relative; + z-index: 2; + cursor: pointer; + display: block; + padding: 10px 20px 10px 40px; + } +} +.navigation-fixed { + position: fixed; + top: 0; + left: 0; + z-index: 101; +} + + +/* Pills */ +.navbar-pills { + & a, + & span { + padding: $base-line/2 $base-line; + } + & a:hover { + color: $color-black; + background: #eee; + } + & li.active a, + & span { + text-decoration: none; + cursor: text; + color: rgba(0, 0, 0, .4); + background: #eee; + } + & li { + margin-right: 1px; + } + &.navbar-right li { + margin-left: 1px; + } +} + + +/* Fullwidth */ +.fullwidth { + & ul { + width: 100%; + } + & li { + float: none !important; + margin: 0; + display: table-cell; + width: 1%; + text-align: center; + } + & li a, + & li span { + display: block; + } +} + + +/* Vertical */ +.nav { + margin-bottom: $base-line; + & ul { + list-style: none; + margin: 0; + } + & ul li ul { + margin-left: 2em; + font-size: .95em; + } + & a, + & span { + display: block; + padding: .5em 0; + } + & a { + color: $color-black; + text-decoration: none; + &:hover { + color: $color-link-hover; + text-decoration: underline; + } + } + & li.active a, + & span { + text-decoration: none; + cursor: text; + color: rgba(0, 0, 0, .4); + } + & i.fa { + width: $base-line; + } +} + + +/* Stacked */ +.nav-stacked { + & li { + margin-bottom: 1px; + } + & a, + & span { + padding: .6em .7em; + } + & a { + background: #f6f6f6; + &:hover { + color: #000; + background: #eee; + } + } + & li.active a, + & span { + background: $color-white; + text-decoration: none; + cursor: text; + color: rgba(0, 0, 0, .3); + } +} + +/* Stats */ +.nav-stats { + & li { + position: relative; + } + & a, + & span { + padding-right: 50px; + } + & sup, + & .badge { + position: absolute; + top: 50%; + right: 0; + } + & sup { + color: rgba(0, 0, 0, .4); + } + & .badge { + margin-top: -8px; + } +} + + +/* =Tabs +-----------------------------------------------------------------------------*/ +.nav-tabs { + border-bottom: 1px solid #e3e3e3; + margin-bottom: $base-line; + @include clearfix; + + & ul { + list-style: none; + margin: 0; + } + & li { + float: left; + margin-right: 2px; + } + & a, + & span { + display: block; + line-height: 1; + padding: $base-line/2 $base-line; + border: 1px solid transparent; + } + & a { + color: rgba(0, 0, 0, .5); + text-decoration: none; + &:focus, + &:hover { + color: $color-black; + text-decoration: underline; + background-color: #eee; + } + } + & li.active a, + & span { + color: $color-black; + background: #fff; + position: relative; + border: 1px solid #ddd; + border-bottom: 1px solid #fff; + bottom: -1px; + cursor: default; + text-decoration: none; + } +} + + +/* =Breadcrumbs +-----------------------------------------------------------------------------*/ +.breadcrumbs { + margin-bottom: $base-line; + @include clearfix; + + & ul { + font-size: .9em; + color: rgba(0, 0, 0, .4); + list-style: none; + margin: 0; + @include clearfix; + } + & li { + float: left; + margin-right: 5px; + } + & li + li:before { + content: " > "; + color: #aaa; + font-size: 12px; + margin: 0 7px 0 5px; + position: relative; + top: -1px; + } + &.breadcrumbs-path li + li:before { + content: " / "; + top: 0; + } + & a { + color: $color-black; + text-decoration: none; + &:hover { + color: $color-black; + text-decoration: underline; + } + } + & li.active a, + & span, + & li.active a:hover { + text-decoration: none; + cursor: text; + color: rgba(0, 0, 0, .4); + } + +} + + + +/* =Pagination +-----------------------------------------------------------------------------*/ +.pagination { + position: relative; + left: -9px; + margin-left: 0; + list-style: none; + @include clearfix; + + & li { + float: left; + margin-right: 2px; + } + & a, + & span { + display: block; + padding: 7px 9px; + line-height: 1; + border-radius: 2px; + color: $color-black; + text-decoration: none; + } + & span, + & li.active a, + & li.active a:hover { + color: $color-white; + background-color: $color-black; + cursor: text; + } + & a:focus, + & a:hover { + text-decoration: none; + background-color: $color-black; + color: #fff; + } + +} \ No newline at end of file diff --git a/sass/notifications.scss b/sass/notifications.scss new file mode 100644 index 0000000..5ba90a7 --- /dev/null +++ b/sass/notifications.scss @@ -0,0 +1,64 @@ +/* =Notifications +-----------------------------------------------------------------------------*/ +.tools-alert { + padding: 12px 15px; + background: $color-gray-pastel; + color: $color-black; + margin-bottom: $base-line; +} +.tools-message { + display: none; + position: fixed; + z-index: 100; + top: 10px; + right: 10px; + max-width: 350px; + line-height: 1.5; + font-size: 95%; + padding: 12px 15px; + color: $color-black; + background: $color-gray; +} +.tools-message ul { + margin: 0; + list-style: none; +} +.tools-message-black, +.tools-message-blue, +.tools-message-red, +.tools-message-green { + color: rgba(255, 255, 255, .95); +} +.tools-message-black { + background: $color-black; +} +.tools-message-blue { + background: $color-blue; +} +.tools-message-red { + background: $color-red; +} +.tools-message-yellow { + background: $color-yellow; +} +.tools-message-green { + background: $color-green; +} + + +// Alerts +.tools-alert-black { + background: $color-black-pastel; +} +.tools-alert-blue { + background: $color-blue-pastel; +} +.tools-alert-red { + background: $color-red-pastel; +} +.tools-alert-yellow { + background: $color-yellow-pastel; +} +.tools-alert-green { + background: $color-green-pastel; +} \ No newline at end of file diff --git a/sass/prettyprint.scss b/sass/prettyprint.scss new file mode 100644 index 0000000..097302e --- /dev/null +++ b/sass/prettyprint.scss @@ -0,0 +1,86 @@ +/* string content */ +.str { + color: #dd1144; +} + +/* a keyword */ +.kwd { + color: #333333; +} + +/* a comment */ +.com { + color: #999988; +} + +/* a type name */ +.typ { + color: #445588; +} + +/* a literal value */ +.lit { + color: #445588; +} + +/* punctuation */ +.pun { + color: #888; +} + +/* lisp open bracket */ +.opn { + color: #333333; +} + +/* lisp close bracket */ +.clo { + color: #333333; +} + +/* a markup tag name */ +.tag { + color: #367ac3; +} + +/* a markup attribute name */ +.atn { + color: #51a7c9; +} + +/* a markup attribute value */ +.atv { + color: #709c1a; +} + +/* a declaration */ +.dec { + color: #666; +} + +/* a variable name */ +.var { + color: teal; +} + +/* a function name */ +.fun { + color: #990000; +} +.linenums ol li { + list-style-type: none; + counter-increment: list; + position: relative; +} + +.linenums ol li:after { + content: counter(list); + position: absolute; + left: -3.3em; + border-right: 1px solid #e5e5e5; + padding-right: 9px; + width: 2.45em; + text-align: right; + color: rgba(0, 0, 0, .3); + font-size: 12px; +} \ No newline at end of file diff --git a/sass/print.scss b/sass/print.scss new file mode 100644 index 0000000..5c59150 --- /dev/null +++ b/sass/print.scss @@ -0,0 +1,72 @@ +@media print { + + * { + text-shadow: none !important; + color: #000 !important; + background: transparent !important; + box-shadow: none !important; + font-size: $font-size-print; + } + + .h1, + h1 { + font-size: $font-size-h1-print; + } + .h2, + h2 { + font-size: $font-size-h2-print; + } + .h3, + h3 { + font-size: $font-size-h3-print; + } + .h4, + h4 { + font-size: $font-size-h4-print; + } + .h5, + h5 { + font-size: $font-size-h5-print; + } + .h6, + h6 { + font-size: $font-size-h6-print; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after + { + content: " (" attr(title) ")"; + } + + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + page-break-inside: avoid; + } + + blockquote { + border: none; + font-style: italic; + } + + img { + max-width: 100% !important; + } + + select { + background: #fff !important; + } +} \ No newline at end of file diff --git a/sass/progress.scss b/sass/progress.scss new file mode 100644 index 0000000..e6082a2 --- /dev/null +++ b/sass/progress.scss @@ -0,0 +1,32 @@ +/* =Progress +-----------------------------------------------------------------------------*/ +#tools-progress { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000000; + height: 10px; + & span { + display: block; + width: 100%; + height: 100%; + background-color: $color-blue-dark; + @include striped(); + @include animation(progress-bar-stripes 2s linear infinite); + background-size: 40px 40px; + } +} + +$-webkit-keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} +$-o-keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} +$keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} \ No newline at end of file diff --git a/sass/reset.scss b/sass/reset.scss new file mode 100644 index 0000000..3ac18fe --- /dev/null +++ b/sass/reset.scss @@ -0,0 +1,254 @@ +@import "mixins.scss"; + +/* =Reset +-----------------------------------------------------------------------------*/ +*, +*:before, +*:after { + @include box-sizing(border-box); +} + +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +html, +body, +div, +span, +object, +iframe, +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, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +a:active, +a:hover { + outline: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +embed, +object, +iframe, +audio, +video, +canvas, +progress, +meter, +output, +textarea { + display: block; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +/* To prevent some browsers from inserting quotes on q and p */ +blockquote, +q { + quotes: none; +} +blockquote p:before, +blockquote p:after, +q:before, +q:after { + content: ''; + content: none; +} + +/* Table reset */ +table { + border-collapse: collapse; + border-spacing: 0; +} +caption, +th, +td { + text-align: left; + vertical-align: top; +} +thead th, +thead td { + font-weight: bold; + vertical-align: bottom; +} + +/* Image inside */ +a img, +th img, +td img { + vertical-align: top; +} + +button, +input, +select, +textarea { + margin: 0; +} +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; +} + +/* Normalize buttons in IE */ +button { + width: auto; + overflow: visible; +} + +/* Hand cursor on clickable controls */ +input[type="reset"], +input[type="submit"], +input[type="file"], +input[type="radio"], +input[type="checkbox"], +select, +button { + cursor: pointer; +} + + +/* Trick with vertical align for radio and checkbox */ +input[type="radio"], +input[type="checkbox"] { + font-size: 110%; + position: relative; + top: -1px; + margin-right: 3px; +} + +/* Normalize search fields */ +input[type="search"] { + -webkit-appearance: textfield; +} +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +/* Normalize horizontal line */ +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ddd; +} + +/* Responsive media */ +img, +video, +audio, +embed, +object { + max-width: 100%; +} +img, +video, +embed, +object { + height: auto; +} +embed, +object { + height: 100%; +} +img { + vertical-align: middle; + -ms-interpolation-mode: bicubic; +} \ No newline at end of file diff --git a/sass/tables.scss b/sass/tables.scss new file mode 100644 index 0000000..56d3069 --- /dev/null +++ b/sass/tables.scss @@ -0,0 +1,49 @@ +/* =Tables +-----------------------------------------------------------------------------*/ +table.table-bordered td, +table.table-bordered th { + border: 1px solid $color-table-border; +} +table.table-simple td, +table.table-simple th, +table.table-simple caption { + border: none; + padding-left: 0; +} +table.table-flat td, +table.table-flat th, +table.table-flat caption { + border: none; + padding: 0; +} +table.table-stroked td, +table.table-stroked th { + border-bottom: 1px solid $color-table-border; +} +table.table-stripped tbody tr:nth-child(odd) td { + background: $color-table-stripped; +} +table.table-hovered tbody tr:hover td { + background-color: $color-table-hovered; +} + +/* Responsive Tables */ +.table-container { + width: 100%; + overflow: auto; + margin-bottom: $base-line; + & table { + margin-bottom: 0; + } + &::-webkit-scrollbar { + -webkit-appearance: none; + width: 14px; + height: 14px; + } + &::-webkit-scrollbar-thumb { + border-radius: 8px; + border: 3px solid #fff; + background-color: rgba(0, 0, 0, .3); + } +} + diff --git a/sass/tooltip.scss b/sass/tooltip.scss new file mode 100644 index 0000000..a10ba40 --- /dev/null +++ b/sass/tooltip.scss @@ -0,0 +1,35 @@ +/* =Tooltip +-----------------------------------------------------------------------------*/ +.tooltip { + position: absolute; + z-index: 10000; + display: inline-block; + color: #fff; + padding: 2px 10px; + font-size: $font-size-small; + line-height: 1.5em; + max-width: 250px; + background: $color-black; +} +.tooltip-theme-red { + background: $color-red; +} +.tooltip-theme-blue { + background: $color-blue; +} +.tooltip-theme-green { + background: $color-green; +} +.tooltip-theme-yellow { + background: $color-yellow; +} +.tooltip-theme-white { + background: $color-white; +} +.tooltip-theme-yellow, +.tooltip-theme-white { + color: #000; +} + + + diff --git a/sass/typography-responsive.scss b/sass/typography-responsive.scss new file mode 100644 index 0000000..773c835 --- /dev/null +++ b/sass/typography-responsive.scss @@ -0,0 +1,70 @@ +/* =Typography Responsive +-----------------------------------------------------------------------------*/ + +/* Portrait tablet to landscape and desktop */ +@media (min-width: 768px) and (max-width: 979px) { + h1 { + font-size: $font-size-h1-md; + line-height: 1.125; + } + h2 { + font-size: $font-size-h2-md; + line-height: 1.25; + } + h3 { + font-size: $font-size-h3-md; + line-height: 1.25; + } + h4 { + font-size: $font-size-h4-md; + line-height: 1.22222222; + } + h5 { + font-size: $font-size-h5-md; + } + h6 { + font-size: $font-size-h6-md; + } +} + +/* Landscape phone to portrait tablet */ +@media (max-width: 767px) { + h1 { + font-size: $font-size-h1-sm; + line-height: 1.25; + } + h2 { + font-size: $font-size-h2-sm; + line-height: 1.15384615; + } + h3 { + font-size: $font-size-h3-sm; + line-height: 1.13636364; + } + h4 { + font-size: $font-size-h4-sm; + line-height: 1.11111111; + } + h5 { + font-size: $font-size-h5-sm; + } + h6 { + font-size: $font-size-h6-sm; + } + .lead { + font-size: 1.2em; + } + ul, + ol, + ul ul, + ol ol, + ul ol, + ol ul { + margin-left: $base-line; + } + blockquote { + margin-left: 0; + } +} + + diff --git a/sass/typography.scss b/sass/typography.scss new file mode 100644 index 0000000..a32ce67 --- /dev/null +++ b/sass/typography.scss @@ -0,0 +1,415 @@ +/* =Typography +-----------------------------------------------------------------------------*/ +body { + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $base-line; + background: $background-body; + color: $color-body; +} + +/* =Links +-----------------------------------------------------------------------------*/ +a { + color: $color-link; + &:focus, + &:hover { + color: $color-link-hover; + } +} + +/* =Headings +-----------------------------------------------------------------------------*/ +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: $font-family-headings; + font-weight: bold; + color: $color-headings; + text-rendering: optimizeLegibility; + margin: 0 0 .5em 0; +} +h1, +.h1, +h2, +.h2 { + line-height: 1.1; +} +h3, +.h3, +h4, +.h4 { + line-height: 1.3; +} +h1, +.h1 { + font-size: $font-size-h1-lg; +} +h2, +.h2 { + font-size: $font-size-h2-lg; + margin-bottom: .7em; +} +h3, +.h3 { + font-size: $font-size-h3-lg; +} +h4, +.h4 { + font-size: $font-size-h4-lg; +} +h5, +.h5 { + font-size: $font-size-h5-lg; +} +h6, +.h6 { + font-size: $font-size-h6-lg; + text-transform: uppercase; +} + + +/* =Lead +-----------------------------------------------------------------------------*/ +.lead { + font-size: $font-size-lead; + line-height: $line-height-lead; + margin-bottom: $base-line / 1.5; +} + +/* =Line height and margin +-----------------------------------------------------------------------------*/ +p, +ul, +ol, +dl, +dd, +dt, +blockquote, +td, +th { + line-height: $base-line; +} +ul, +ol, +ul ul, +ol ol, +ul ol, +ol ul { + margin: 0 0 0 $base-line * 2; +} +ul li, +ol li { + text-align: left; +} +ol ol li { + list-style-type: lower-alpha; +} +ol ol ol li { + list-style-type: lower-roman; +} +p, +ul, +ol, +dl, +blockquote, +hr, +pre, +table, +form, +fieldset, +figure, +address { + margin-bottom: $base-line; +} + +/* =Blockquote +-----------------------------------------------------------------------------*/ +blockquote { + position: relative; + font-style: italic; + font-size: 1.125em; + margin-left: $base-line * 1.5; + padding-left: $base-line; + border-left: 2px solid $color-blockquote-border; + & p { + margin-bottom: .5em; + } +} +blockquote small, +cite { + color: rgba(0, 0, 0, .4); + font-style: italic; +} +small, +blockquote cite { + font-size: $font-size-small; + line-height: 1; +} + + +/* =Address +-----------------------------------------------------------------------------*/ +address { + font-style: normal; +} + +/* =Definition list +-----------------------------------------------------------------------------*/ +dl dt { + font-weight: bold; +} +dd { + margin-left: $base-line; +} + +/* =Text-level +-----------------------------------------------------------------------------*/ +s, +del { + text-decoration: line-through; +} +abbr[title], +dfn[title] { + border-bottom: 1px dotted $color-black; + cursor: help; +} +strong, +b { + font-weight: bold; +} +em, +i { + font-style: italic; +} +sub, +sup { + font-size: $font-size-smaller; + line-height: 0; + position: relative; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +figcaption { + margin: .3em 0; + font-size: $font-size-small; + font-style: italic; +} +ins, +u { + text-decoration: underline; +} +mark { + background-color: $color-yellow; + color: $color-black; + text-decoration: none; +} + +/* =Code +-----------------------------------------------------------------------------*/ +pre, +code, +kbd, +samp, +var, +output { + font-size: 90%; + font-style: normal; + font-family: $font-family-code; +} +pre { + margin-top: $base-line; + font-size: 100%; + line-height: 1.5; + color: $color-body; + overflow: auto; +} +code, +samp, +kbd { + padding: 3px 6px 2px 6px; + display: inline-block; + line-height: 1; + border-radius: 2px; +} +code { + background: $color-code-background; + border: 1px solid $color-code-border; +} +pre code { + font-size: 100%; + border: none; + padding: 0; + background: none; + line-height: $base-line; +} +var { + color: rgba(0, 0, 0, .5); +} +samp { + background: $color-blue-pastel; + border: 1px solid darken($color-blue-pastel, 7%); +} +kbd { + background: $color-black; + color: rgba(255, 255, 255, .85); + white-space: nowrap; +} + +/* =Form +-----------------------------------------------------------------------------*/ +button:active, +button:focus { + outline: none; +} +textarea, +select { + font-family: $font-family-controls; + font-size: 1em; + box-shadow: none; +} +textarea, +select[multiple], +select[multiple="multiple"] { + padding: $padding-input; + line-height: 1.35em; + width: 100%; +} +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="phone"], +input[type="tel"], +input[type="number"], +input[type="datetime"], +input[type="date"], +input[type="month"], +input[type="color"], +input[type="time"], +input[type="search"], +input[type="datetime-local"] { + font-family: $font-family-controls; + font-size: 1em; + box-shadow: none; + padding: $padding-input; + line-height: $base-line; + border-radius: 0; + outline: none; +} +select[multiple], +select[multiple="multiple"], +textarea, +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="phone"], +input[type="tel"], +input[type="number"], +input[type="datetime"], +input[type="date"], +input[type="month"], +input[type="color"], +input[type="time"], +input[type="search"], +input[type="datetime-local"] { + background: $color-white; + border: 1px solid $color-input-border; + position: relative; + z-index: 2; + -webkit-appearance: none; +} +textarea, +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="phone"], +input[type="tel"], +input[type="number"], +input[type="datetime"], +input[type="date"], +input[type="month"], +input[type="color"], +input[type="time"], +input[type="search"], +input[type="datetime-local"] { + &[disabled] { + resize: none; + color: rgba(0, 0, 0, .5); + } +} +select, +input[type="checkbox"], +input[type="radio"] { + &[disabled] { + cursor: default; + } +} +input::-moz-focus-inner, +button::-moz-focus-inner { + border: 0; + padding: 0; +} +input[type="range"] { + position: relative; + top: 3px; +} + +select { + margin-bottom: 0 !important; +} +fieldset { + padding: $base-line; + margin-bottom: $base-line; + border: 1px solid $color-fieldset-border; + & *:last-child { + margin-bottom: 0 !important; + } +} +legend { + font-weight: bold; + padding: 0 1em; + margin-left: -1em; +} + + +/* =Tables +-----------------------------------------------------------------------------*/ +table { + max-width: 100%; + width: 100%; + empty-cells: show; + + caption { + text-transform: uppercase; + padding: 0 $base-line / 1.5; + color: rgba(0, 0, 0, .4); + font-size: $font-size-small; + } + + th, + td { + border-bottom: 1px solid $color-table-border; + padding: $base-line / 2 $base-line / 1.5; + } + + tfoot th, + tfoot td { + color: rgba(0, 0, 0, .4); + } +} \ No newline at end of file diff --git a/sass/upload.scss b/sass/upload.scss new file mode 100644 index 0000000..e27e346 --- /dev/null +++ b/sass/upload.scss @@ -0,0 +1,19 @@ +/* =Upload +-----------------------------------------------------------------------------*/ +.tools-droparea { + position: relative; + overflow: hidden; + padding: 80px 20px; + border: 3px dashed rgba(0, 0, 0, .1); + &.drag-hover { + background: rgba(200, 222, 250, 0.75); + } + &.drag-drop { + background: rgba(250, 248, 200, 0.5); + } +} +.tools-droparea-placeholder { + text-align: center; + font-size: 11px; + color: rgba(0, 0, 0, .5); +} \ No newline at end of file diff --git a/sass/variables.scss b/sass/variables.scss new file mode 100644 index 0000000..0264fd7 --- /dev/null +++ b/sass/variables.scss @@ -0,0 +1,134 @@ +// Font +$font-family-base: "Helvetica Neue", Helvetica, Tahoma, sans-serif; +$font-family-headings: $font-family-base; +$font-family-controls: $font-family-base; +$font-family-code: Menlo, Monaco, Consolas, "Courier New", monospace; + +// Grid +$grid-width: 1000; +$grid-gutter-width: 30; + +// Base color +$background-body: #fff; +$color-body: #222; +$color-headings: #000; + +// Type +$font-size-root: .9375; // .9375 = 15px/16px by default +$font-size-print: 12pt; +$font-size-base: $font-size-root + 0em; +$base-line: 1.65em; + +// Font size and line height +$font-size-lead: 1.3125em; // 21px by default +$line-height-lead: 1.5; + +$font-size-big: ($font-size-root * 1.2 * 16) + 0px; +$font-size-small: ($font-size-root * .85 * 16) + 0px; +$font-size-smaller: ($font-size-root * .75 * 16) + 0px; + + +// HEADINGS + +// print +$font-size-h1-print: 36pt; +$font-size-h2-print: 24pt; +$font-size-h3-print: 18pt; +$font-size-h4-print: 14pt; +$font-size-h5-print: 12pt; +$font-size-h6-print: 12pt; + +// Large desktop +$font-size-h1-lg: 2.25em; // 36px +$font-size-h2-lg: 1.5em; // 24px +$font-size-h3-lg: 1.3125em; // 21px +$font-size-h4-lg: 1.125em; // 18px +$font-size-h5-lg: 1em; // 16px +$font-size-h6-lg: .75em; // 12px + +// Portrait tablet to landscape and desktop +$font-size-h1-md: 2.25em; // 36px +$font-size-h2-md: 1.5em; // 24px +$font-size-h3-md: 1.3125em; // 21px +$font-size-h4-md: 1.125em; // 18px +$font-size-h5-md: 1em; // 16px +$font-size-h6-md: .75em; // 12px + +// Landscape phone to portrait tablet +$font-size-h1-sm: 2.25em; // 36px +$font-size-h2-sm: 1.5em; // 24px +$font-size-h3-sm: 1.3125em; // 21px +$font-size-h4-sm: 1.125em; // 18px +$font-size-h5-sm: 1em; // 16px +$font-size-h6-sm: .75em; // 12px + +// Colors +$color-gray: #e0e3e5; +$color-black: #0f0f0f; +$color-blue: #2575ed; +$color-red: #de2c3b; +$color-yellow: #ffc800; +$color-green: #2c9f42; +$color-white: #fff; + +// Colors Dark +$color-gray-dark: #b3b6b7; +$color-black-dark: #000; +$color-blue-dark: #1a52a5; +$color-red-dark: #b2232f; +$color-yellow-dark: #cca000; +$color-green-dark: #237f35; + +// Colors Light +$color-gray-light: #f0f1f2; +$color-black-light: #363738; +$color-blue-light: #92baf6; +$color-red-light: #ef969d; +$color-yellow-light: #ffe480; +$color-green-light: #96cfa1; + +// Colors Pastel +$color-gray-pastel: #f7f8f8; +$color-black-pastel: #dadada; +$color-blue-pastel: #d3e3fb; +$color-red-pastel: #f8d5d8; +$color-yellow-pastel: #fff4cc; +$color-green-pastel: #d5ecd9; + +// Table Color +$color-table-border: #eee; +$color-table-stripped: #f8f8f8; +$color-table-hovered: #f4f4f4; + +// Fieldset +$color-fieldset-border: #ccc; + +// Code +$color-code-background: #f4f4f4; +$color-code-border: #d4d4d4; + +// Blockquote +$color-blockquote-border: #ddd; + +// Input +$color-input-border: #ccc; +$color-input-append-background: #f4f4f4; +$color-input-append-border: #d4d4d4; + +// Links Color +$color-link: #134da5; +$color-link-hover: $color-red; + +// Input & Button Padding +$padding-input-base: .3em; +$padding-btn-base: .55em; +$padding-btn-side-base: 2.5em; +$padding-btn-side-in-forms-base: 1.3em; + +$padding-input: $padding-input-base .35em; +$padding-btn: $padding-btn-base $padding-btn-side-base; +$padding-btn-outline: $padding-btn-base - (1/16em*1) $padding-btn-side-base; +$padding-btn-outline-bold: $padding-btn-base - (1em/16*2) $padding-btn-side-base; +$padding-btn-in-forms: $padding-input-base + (1em/16*1) $padding-btn-side-in-forms-base; +$padding-btn-outline-in-forms: $padding-input-base $padding-btn-side-in-forms-base; +$padding-btn-outline-bold-in-forms: $padding-input-base - (1em/16*1) $padding-btn-side-in-forms-base; From b7de2f171be2666034ac13524e788bbf56ad4cf4 Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 03:13:52 +0000 Subject: [PATCH 02/10] Rename using leading underscores --- sass/{accordion.scss => _accordion.scss} | 0 sass/{autocomplete.scss => _autocomplete.scss} | 0 sass/{blocks-responsive.scss => _blocks-responsive.scss} | 0 sass/{blocks.scss => _blocks.scss} | 0 sass/{buttons.scss => _buttons.scss} | 0 sass/{dropdown.scss => _dropdown.scss} | 0 sass/{filterbox.scss => _filterbox.scss} | 0 sass/{forms-responsive.scss => _forms-responsive.scss} | 0 sass/{forms.scss => _forms.scss} | 0 sass/{grid-responsive.scss => _grid-responsive.scss} | 0 sass/{grid.scss => _grid.scss} | 0 sass/{helpers.scss => _helpers.scss} | 0 sass/{kube.scss => _kube.scss} | 0 sass/{labels.scss => _labels.scss} | 0 sass/{livesearch.scss => _livesearch.scss} | 0 sass/{mixins.scss => _mixins.scss} | 0 sass/{modal.scss => _modal.scss} | 0 sass/{navigation-responsive.scss => _navigation-responsive.scss} | 0 sass/{navigation.scss => _navigation.scss} | 0 sass/{notifications.scss => _notifications.scss} | 0 sass/{prettyprint.scss => _prettyprint.scss} | 0 sass/{print.scss => _print.scss} | 0 sass/{progress.scss => _progress.scss} | 0 sass/{reset.scss => _reset.scss} | 0 sass/{tables.scss => _tables.scss} | 0 sass/{tooltip.scss => _tooltip.scss} | 0 sass/{typography-responsive.scss => _typography-responsive.scss} | 0 sass/{typography.scss => _typography.scss} | 0 sass/{upload.scss => _upload.scss} | 0 sass/{variables.scss => _variables.scss} | 0 30 files changed, 0 insertions(+), 0 deletions(-) rename sass/{accordion.scss => _accordion.scss} (100%) rename sass/{autocomplete.scss => _autocomplete.scss} (100%) rename sass/{blocks-responsive.scss => _blocks-responsive.scss} (100%) rename sass/{blocks.scss => _blocks.scss} (100%) rename sass/{buttons.scss => _buttons.scss} (100%) rename sass/{dropdown.scss => _dropdown.scss} (100%) rename sass/{filterbox.scss => _filterbox.scss} (100%) rename sass/{forms-responsive.scss => _forms-responsive.scss} (100%) rename sass/{forms.scss => _forms.scss} (100%) rename sass/{grid-responsive.scss => _grid-responsive.scss} (100%) rename sass/{grid.scss => _grid.scss} (100%) rename sass/{helpers.scss => _helpers.scss} (100%) rename sass/{kube.scss => _kube.scss} (100%) rename sass/{labels.scss => _labels.scss} (100%) rename sass/{livesearch.scss => _livesearch.scss} (100%) rename sass/{mixins.scss => _mixins.scss} (100%) rename sass/{modal.scss => _modal.scss} (100%) rename sass/{navigation-responsive.scss => _navigation-responsive.scss} (100%) rename sass/{navigation.scss => _navigation.scss} (100%) rename sass/{notifications.scss => _notifications.scss} (100%) rename sass/{prettyprint.scss => _prettyprint.scss} (100%) rename sass/{print.scss => _print.scss} (100%) rename sass/{progress.scss => _progress.scss} (100%) rename sass/{reset.scss => _reset.scss} (100%) rename sass/{tables.scss => _tables.scss} (100%) rename sass/{tooltip.scss => _tooltip.scss} (100%) rename sass/{typography-responsive.scss => _typography-responsive.scss} (100%) rename sass/{typography.scss => _typography.scss} (100%) rename sass/{upload.scss => _upload.scss} (100%) rename sass/{variables.scss => _variables.scss} (100%) diff --git a/sass/accordion.scss b/sass/_accordion.scss similarity index 100% rename from sass/accordion.scss rename to sass/_accordion.scss diff --git a/sass/autocomplete.scss b/sass/_autocomplete.scss similarity index 100% rename from sass/autocomplete.scss rename to sass/_autocomplete.scss diff --git a/sass/blocks-responsive.scss b/sass/_blocks-responsive.scss similarity index 100% rename from sass/blocks-responsive.scss rename to sass/_blocks-responsive.scss diff --git a/sass/blocks.scss b/sass/_blocks.scss similarity index 100% rename from sass/blocks.scss rename to sass/_blocks.scss diff --git a/sass/buttons.scss b/sass/_buttons.scss similarity index 100% rename from sass/buttons.scss rename to sass/_buttons.scss diff --git a/sass/dropdown.scss b/sass/_dropdown.scss similarity index 100% rename from sass/dropdown.scss rename to sass/_dropdown.scss diff --git a/sass/filterbox.scss b/sass/_filterbox.scss similarity index 100% rename from sass/filterbox.scss rename to sass/_filterbox.scss diff --git a/sass/forms-responsive.scss b/sass/_forms-responsive.scss similarity index 100% rename from sass/forms-responsive.scss rename to sass/_forms-responsive.scss diff --git a/sass/forms.scss b/sass/_forms.scss similarity index 100% rename from sass/forms.scss rename to sass/_forms.scss diff --git a/sass/grid-responsive.scss b/sass/_grid-responsive.scss similarity index 100% rename from sass/grid-responsive.scss rename to sass/_grid-responsive.scss diff --git a/sass/grid.scss b/sass/_grid.scss similarity index 100% rename from sass/grid.scss rename to sass/_grid.scss diff --git a/sass/helpers.scss b/sass/_helpers.scss similarity index 100% rename from sass/helpers.scss rename to sass/_helpers.scss diff --git a/sass/kube.scss b/sass/_kube.scss similarity index 100% rename from sass/kube.scss rename to sass/_kube.scss diff --git a/sass/labels.scss b/sass/_labels.scss similarity index 100% rename from sass/labels.scss rename to sass/_labels.scss diff --git a/sass/livesearch.scss b/sass/_livesearch.scss similarity index 100% rename from sass/livesearch.scss rename to sass/_livesearch.scss diff --git a/sass/mixins.scss b/sass/_mixins.scss similarity index 100% rename from sass/mixins.scss rename to sass/_mixins.scss diff --git a/sass/modal.scss b/sass/_modal.scss similarity index 100% rename from sass/modal.scss rename to sass/_modal.scss diff --git a/sass/navigation-responsive.scss b/sass/_navigation-responsive.scss similarity index 100% rename from sass/navigation-responsive.scss rename to sass/_navigation-responsive.scss diff --git a/sass/navigation.scss b/sass/_navigation.scss similarity index 100% rename from sass/navigation.scss rename to sass/_navigation.scss diff --git a/sass/notifications.scss b/sass/_notifications.scss similarity index 100% rename from sass/notifications.scss rename to sass/_notifications.scss diff --git a/sass/prettyprint.scss b/sass/_prettyprint.scss similarity index 100% rename from sass/prettyprint.scss rename to sass/_prettyprint.scss diff --git a/sass/print.scss b/sass/_print.scss similarity index 100% rename from sass/print.scss rename to sass/_print.scss diff --git a/sass/progress.scss b/sass/_progress.scss similarity index 100% rename from sass/progress.scss rename to sass/_progress.scss diff --git a/sass/reset.scss b/sass/_reset.scss similarity index 100% rename from sass/reset.scss rename to sass/_reset.scss diff --git a/sass/tables.scss b/sass/_tables.scss similarity index 100% rename from sass/tables.scss rename to sass/_tables.scss diff --git a/sass/tooltip.scss b/sass/_tooltip.scss similarity index 100% rename from sass/tooltip.scss rename to sass/_tooltip.scss diff --git a/sass/typography-responsive.scss b/sass/_typography-responsive.scss similarity index 100% rename from sass/typography-responsive.scss rename to sass/_typography-responsive.scss diff --git a/sass/typography.scss b/sass/_typography.scss similarity index 100% rename from sass/typography.scss rename to sass/_typography.scss diff --git a/sass/upload.scss b/sass/_upload.scss similarity index 100% rename from sass/upload.scss rename to sass/_upload.scss diff --git a/sass/variables.scss b/sass/_variables.scss similarity index 100% rename from sass/variables.scss rename to sass/_variables.scss From 69cca3a098162a25644dc5dc94f865cccdc0f580 Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 03:37:16 +0000 Subject: [PATCH 03/10] Fixed opacity() mixin 'Invalid CSS' error (used opacity() from twitter bootstrap) --- sass/_mixins.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/sass/_mixins.scss b/sass/_mixins.scss index 4ab2ce2..a89209a 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -7,9 +7,10 @@ } @mixin opacity($opacity: 100) { - filter: e(%("alpha(opacity=%d)", $opacity)); - -moz-opacity: $opacity / 100; - opacity: $opacity / 100; + opacity: $opacity; + // IE8 filter + $opacity-ie: ($opacity * 100); + filter: #{alpha(opacity=$opacity-ie)}; } @mixin selection($r, $g, $b) { ::selection { background: rgb($r, $g, $b); } From 95a00a80b07a08f1cc488fcc8c4c5ad7008906f8 Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 03:53:06 +0000 Subject: [PATCH 04/10] Fixed gradient() mixin by combining with twitter bootstrap (sass) solution --- sass/_mixins.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/sass/_mixins.scss b/sass/_mixins.scss index a89209a..ae82748 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -33,12 +33,12 @@ @mixin gradient($start: #555, $end: #333) { background-color: mix($start, $end, 60%); background-image: -moz-linear-gradient(top, $start, $end); // FF 3.6+ - background-image: -ms-linear-gradient(top, $start, $end); // IE10 background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start), to($end)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, $start, $end); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, $start, $end); // Opera 11.10 - background-image: linear-gradient(top, $start, $end); // The standard - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",$start,$end)); // IE9 and down + background-image: -webkit-linear-gradient(top, $start, $end); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(top, $start, $end); // Opera 12 + background-image: linear-gradient(to bottom, $start, $end); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($end)}', GradientType=0); // IE9 and down } @mixin border-top-radius($radius) { border-top-right-radius: $radius; From c8157c58fe8edd1fcc8662becba35d3eb7ac448d Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 03:54:59 +0000 Subject: [PATCH 05/10] Tidied indenting/formatting in _mixins.scss --- sass/_mixins.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/sass/_mixins.scss b/sass/_mixins.scss index ae82748..6e1b89b 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -4,13 +4,12 @@ display: table; clear: both; } - } @mixin opacity($opacity: 100) { - opacity: $opacity; - // IE8 filter - $opacity-ie: ($opacity * 100); - filter: #{alpha(opacity=$opacity-ie)}; + opacity: $opacity; + // IE8 filter + $opacity-ie: ($opacity * 100); + filter: #{alpha(opacity=$opacity-ie)}; } @mixin selection($r, $g, $b) { ::selection { background: rgb($r, $g, $b); } From 8309297839259957beaa01bac69ac251edc4c359 Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 04:02:00 +0000 Subject: [PATCH 06/10] Commented out retina-image() mixin due to compile error in compass --- sass/_mixins.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/sass/_mixins.scss b/sass/_mixins.scss index 6e1b89b..f225b85 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -61,6 +61,7 @@ border-bottom: 1px solid $bottom-color; border-left: 1px solid $left-color; } +/* @mixin retina-image($path, $w: auto, $h: auto) { background-image: url($path); $at2x_path: ~`${path}.replace(/\.\w+$/, function(match) { return "$2x" + match; })`; @@ -76,6 +77,7 @@ background-size: $w $h; } } +*/ @mixin transition($transition: all linear .2s) { -moz-transition: $transition; transition: $transition; From ce9766fdab069a19c5283bfff90904f1a53853cc Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 04:04:22 +0000 Subject: [PATCH 07/10] Fixed striped() mixin ';' instead of ',' in variable declaration --- sass/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_mixins.scss b/sass/_mixins.scss index f225b85..af8c933 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -166,7 +166,7 @@ @include opacity(100); } } -@mixin striped($color: rgba(255, 255, 255, .2); $angle: 45deg) { +@mixin striped($color: rgba(255, 255, 255, .2), $angle: 45deg) { background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); From 3822471b82edee18d2a5f02432f48bdb2ee77dca Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 04:17:04 +0000 Subject: [PATCH 08/10] Fixed 'Incompatible units: '' and em.' error caused by maths in _variables.scss --- sass/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_variables.scss b/sass/_variables.scss index 0264fd7..243e238 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -127,7 +127,7 @@ $padding-btn-side-in-forms-base: 1.3em; $padding-input: $padding-input-base .35em; $padding-btn: $padding-btn-base $padding-btn-side-base; -$padding-btn-outline: $padding-btn-base - (1/16em*1) $padding-btn-side-base; +$padding-btn-outline: $padding-btn-base - (1em/16*1) $padding-btn-side-base; $padding-btn-outline-bold: $padding-btn-base - (1em/16*2) $padding-btn-side-base; $padding-btn-in-forms: $padding-input-base + (1em/16*1) $padding-btn-side-in-forms-base; $padding-btn-outline-in-forms: $padding-input-base $padding-btn-side-in-forms-base; From 6ed814b21d61a809d3d186bc95ce789803235bf9 Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 04:20:52 +0000 Subject: [PATCH 09/10] Fixed unconverted @include in _grid.scss --- sass/_grid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_grid.scss b/sass/_grid.scss index 5083cae..7707285 100644 --- a/sass/_grid.scss +++ b/sass/_grid.scss @@ -2,7 +2,7 @@ -----------------------------------------------------------------------------*/ .units-container, .units-row { - .clearfix; + @include clearfix; } .units-container { /* it's the trick to not collapse padding-top in the child element */ padding-top: 1px; From c484ec07a587304ee5aac3d1b7bd27fddb423421 Mon Sep 17 00:00:00 2001 From: mike-source Date: Sun, 26 Oct 2014 04:25:15 +0000 Subject: [PATCH 10/10] Corrected $ to @ in _progress.scss caused by earlier find/replace --- sass/_progress.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/_progress.scss b/sass/_progress.scss index e6082a2..365bf90 100644 --- a/sass/_progress.scss +++ b/sass/_progress.scss @@ -18,15 +18,15 @@ } } -$-webkit-keyframes progress-bar-stripes { +@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } -$-o-keyframes progress-bar-stripes { +@-o-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } -$keyframes progress-bar-stripes { +@keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } \ No newline at end of file