src/scss/toolkit/themes/titon.scss in titon-toolkit-0.9.4 vs src/scss/toolkit/themes/titon.scss in titon-toolkit-0.10.0
- old
+ new
@@ -1,364 +1,364 @@
/**
- * @copyright Copyright 2010-2013, The Titon Project
- * @license http://opensource.org/licenses/bsd-license.php
- * @link http://titon.io
+ * @copyright 2010-2013, The Titon Project
+ * @license http://opensource.org/licenses/bsd-license.php
+ * @link http://titon.io
*/
@import "../common";
body {
- font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
- background: $background-color;
- color: $foreground-color;
+ font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
+ background: $background-color;
+ color: $foreground-color;
}
//-------------------- Layout --------------------//
a {
- color: shade($info, 15%);
- text-decoration: none;
+ color: shade($info, 15%);
+ text-decoration: none;
- &:hover { color: $info-dark; }
+ &:hover { color: $info-dark; }
}
blockquote cite { color: $default; }
code { background: $info-light; color: $info-dark; }
var { background: $error-light; color: $error-dark; }
mark { background: tint($warning-light, 25%); }
input, textarea {
- font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.close { line-height: 90%; }
//-------------------- Accordion --------------------//
.accordion-head {
- @include transition(all .15s);
+ @include transition(all .15s);
- .is-active & {
- background: $info;
- border-color: $info-dark;
- color: #fff;
- }
+ .is-active & {
+ background: $info;
+ border-color: $info-dark;
+ color: #fff;
+ }
}
//-------------------- Alert --------------------//
.alert {
- @include alert-style($default-light, $default-dark);
+ @include alert-style($default-light, $default-dark);
- &.is-info { @include alert-style($info-light, $info-dark); }
- &.is-error { @include alert-style($error-light, $error-dark); }
- &.is-warning { @include alert-style($warning-light, $warning-dark); }
- &.is-success { @include alert-style($success-light, $success-dark); }
+ &.is-info { @include alert-style($info-light, $info-dark); }
+ &.is-error { @include alert-style($error-light, $error-dark); }
+ &.is-warning { @include alert-style($warning-light, $warning-dark); }
+ &.is-success { @include alert-style($success-light, $success-dark); }
}
//-------------------- Breadcrumbs --------------------//
.breadcrumbs {
- overflow: hidden;
+ overflow: hidden;
- a {
- height: 45px;
- line-height: 45px;
- padding: 0 30px 0 20px;
- border-right: 0;
- outline: none;
+ a {
+ height: 45px;
+ line-height: 45px;
+ padding: 0 30px 0 20px;
+ border-right: 0;
+ outline: none;
- &:before,
- &:after {
- content: "";
- position: absolute;
- height: 32px;
- width: 32px;
- border-right: 1px solid $gray-lightest;
- border-bottom: 1px solid $gray-lightest;
- top: 6px;
- right: 2px;
- z-index: 1;
- @include transform(rotate(-45deg));
- }
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ height: 32px;
+ width: 32px;
+ border-right: 1px solid $gray-lightest;
+ border-bottom: 1px solid $gray-lightest;
+ top: 6px;
+ right: 2px;
+ z-index: 1;
+ @include transform(rotate(-45deg));
+ }
- &:before {
- height: 32px;
- width: 32px;
- border-right: 1px solid $gray-dark;
- border-bottom: 1px solid $gray-dark;
- right: 4px;
- }
+ &:before {
+ height: 32px;
+ width: 32px;
+ border-right: 1px solid $gray-dark;
+ border-bottom: 1px solid $gray-dark;
+ right: 4px;
+ }
- &:hover {
- &:before {
- border-color: $gray-darkest;
- }
- }
+ &:hover {
+ &:before {
+ border-color: $gray-darkest;
+ }
+ }
- .caret-right { display: none; }
- }
+ .caret-right { display: none; }
+ }
- li:last-child a {
- color: $default;
- }
+ li:last-child a {
+ color: $default;
+ }
- &.small {
- a { height: 30px; line-height: 30px; padding: 0 25px 0 15px; }
- a:before { height: 22px; width: 22px; top: 4px; }
- a:after { height: 22px; width: 22px; top: 4px; }
- }
+ &.small {
+ a { height: 30px; line-height: 30px; padding: 0 25px 0 15px; }
+ a:before { height: 22px; width: 22px; top: 4px; }
+ a:after { height: 22px; width: 22px; top: 4px; }
+ }
- &.large {
- a { height: 50px; line-height: 50px; padding: 0 30px 0 20px; }
- a:before { height: 40px; width: 40px; top: 4px; }
- a:after { height: 40px; width: 40px; top: 4px; }
- }
+ &.large {
+ a { height: 50px; line-height: 50px; padding: 0 30px 0 20px; }
+ a:before { height: 40px; width: 40px; top: 4px; }
+ a:after { height: 40px; width: 40px; top: 4px; }
+ }
}
//-------------------- Button --------------------//
.button {
- color: #fff;
- @include transition(all .2s);
- @include button-style($default, $default-light, $default-dark);
+ color: #fff;
+ @include transition(all .2s);
+ @include button-style($default, $default-light, $default-dark);
- &:active {
- top: 1px;
- }
+ &:active {
+ top: 1px;
+ }
- &.is-info { @include button-style($info, $info-light, $info-dark); }
- &.is-error { @include button-style($error, $error-light, $error-dark); }
- &.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
- &.is-success { @include button-style($success, $success-light, $success-dark); }
+ &.is-info { @include button-style($info, $info-light, $info-dark); }
+ &.is-error { @include button-style($error, $error-light, $error-dark); }
+ &.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
+ &.is-success { @include button-style($success, $success-light, $success-dark); }
}
//-------------------- Dropdown --------------------//
.dropdown {
- box-shadow: 5px 5px black(.25);
+ box-shadow: 5px 5px black(.25);
- li {
- a {
- @include transition(background .15s);
+ li {
+ a {
+ @include transition(background .15s);
- .caret-right {
- top: 2px;
- }
- }
+ .caret-right {
+ top: 2px;
+ }
+ }
- &.heading {
- color: $default;
- font-size: .8rem;
- }
+ &.heading {
+ color: $default;
+ font-size: .8rem;
+ }
- &:hover > a {
- background: $info;
- color: #fff;
+ &:hover > a {
+ background: $info;
+ color: #fff;
- .caret-right { border-left-color: #fff; }
- }
+ .caret-right { border-left-color: #fff; }
+ }
- &:nth-child(odd) {
- background: $gray-lightest;
- }
- }
+ &:nth-child(odd) {
+ background: $gray-lightest;
+ }
+ }
}
.dropdown.dropdown--top {
- box-shadow: 5px -5px black(.25);
+ box-shadow: 5px -5px black(.25);
}
//-------------------- Flyout, TypeAhead --------------------//
.flyout,
.type-ahead {
- background: $gray;
- border: 1px solid $gray-dark;
- box-shadow: 5px 5px black(.25);
- padding: $small-padding;
+ background: $gray;
+ border: 1px solid $gray-dark;
+ box-shadow: 5px 5px black(.25);
+ padding: $small-padding;
- li {
- &:nth-child(odd) > a { background: $gray-lightest; }
- &.heading { background: $gray-dark; }
+ li {
+ &:nth-child(odd) > a { background: $gray-lightest; }
+ &.heading { background: $gray-dark; }
- > a {
- @include transition(all .15s);
- }
+ > a {
+ @include transition(all .15s);
+ }
- > a:hover,
- &.is-open > a,
- &.is-active > a {
- background: $info;
- color: #fff;
+ > a:hover,
+ &.is-open > a,
+ &.is-active > a {
+ background: $info;
+ color: #fff;
- .caret-right { border-left-color: #fff; }
- }
- }
+ .caret-right { border-left-color: #fff; }
+ }
+ }
}
.type-ahead-highlight { background: $warning-light; }
.type-ahead {
- li a:hover,
- li.is-active a {
- .type-ahead-desc { color: $gray-lightest; }
- .type-ahead-highlight{ background: $info-light; color: $info-dark; }
- }
+ li a:hover,
+ li.is-active a {
+ .type-ahead-desc { color: $gray-lightest; }
+ .type-ahead-highlight{ background: $info-light; color: $info-dark; }
+ }
}
//-------------------- Label, Badge --------------------//
.label,
.badge {
- @include label-style($default-light, $default-dark);
+ @include label-style($default-light, $default-dark);
- &.is-info { @include label-style($info-light, $info-dark); }
- &.is-error { @include label-style($error-light, $error-dark); }
- &.is-warning { @include label-style($warning-light, $warning-dark); }
- &.is-success { @include label-style($success-light, $success-dark); }
+ &.is-info { @include label-style($info-light, $info-dark); }
+ &.is-error { @include label-style($error-light, $error-dark); }
+ &.is-warning { @include label-style($warning-light, $warning-dark); }
+ &.is-success { @include label-style($success-light, $success-dark); }
}
.label.label--left {
- &:after { border-right-color: $default-light; }
- &.is-info:after { border-right-color: $info-light; }
- &.is-error:after { border-right-color: $error-light; }
- &.is-warning:after { border-right-color: $warning-light; }
- &.is-success:after { border-right-color: $success-light; }
+ &:after { border-right-color: $default-light; }
+ &.is-info:after { border-right-color: $info-light; }
+ &.is-error:after { border-right-color: $error-light; }
+ &.is-warning:after { border-right-color: $warning-light; }
+ &.is-success:after { border-right-color: $success-light; }
}
.label.label--right {
- &:after { border-left-color: $default-light; }
- &.is-info:after { border-left-color: $info-light; }
- &.is-error:after { border-left-color: $error-light; }
- &.is-warning:after { border-left-color: $warning-light; }
- &.is-success:after { border-left-color: $success-light; }
+ &:after { border-left-color: $default-light; }
+ &.is-info:after { border-left-color: $info-light; }
+ &.is-error:after { border-left-color: $error-light; }
+ &.is-warning:after { border-left-color: $warning-light; }
+ &.is-success:after { border-left-color: $success-light; }
}
//-------------------- Modal --------------------//
.modal-outer {
- margin: $margin;
- background: $gray;
- border: 1px solid $gray-dark;
- box-shadow: 5px 5px black(.25);
+ margin: $margin;
+ background: $gray;
+ border: 1px solid $gray-dark;
+ box-shadow: 5px 5px black(.25);
}
.modal-body {
- background: #fff;
- border-top: 1px solid $gray-dark;
- border-bottom: 1px solid $gray-dark;
+ background: #fff;
+ border-top: 1px solid $gray-dark;
+ border-bottom: 1px solid $gray-dark;
}
.modal-foot {
- background: $gray-lightest;
- text-align: center;
+ background: $gray-lightest;
+ text-align: center;
}
//-------------------- Popover --------------------//
.popover {
- margin: 15px;
- background: #fff;
- line-height: 115%;
- border-radius: $round;
- border: 1px solid $gray-dark;
- box-shadow: 5px 5px black(.25);
+ margin: 15px;
+ background: #fff;
+ line-height: 115%;
+ border-radius: $round;
+ border: 1px solid $gray-dark;
+ box-shadow: 5px 5px black(.25);
- &.top-center .popover-arrow {
- border-top-color: black(.25);
- @include transform(translateY(6px));
+ &.top-center .popover-arrow {
+ border-top-color: black(.25);
+ @include transform(translateY(6px));
- &:after {
- margin-top: -8px;
- border-top: 8px solid #fff;
- }
- }
+ &:after {
+ margin-top: -8px;
+ border-top: 8px solid #fff;
+ }
+ }
- &.center-left .popover-arrow {
- border-left-color: black(.25);
- @include transform(translateX(6px));
+ &.center-left .popover-arrow {
+ border-left-color: black(.25);
+ @include transform(translateX(6px));
- &:after {
- margin-left: -8px;
- border-left: 8px solid #fff;
- }
- }
+ &:after {
+ margin-left: -8px;
+ border-left: 8px solid #fff;
+ }
+ }
- &.center-right .popover-arrow {
- border-right-color: $gray-dark;
+ &.center-right .popover-arrow {
+ border-right-color: $gray-dark;
- &:after {
- margin-left: 2px;
- border-right-color: #fff;
- }
- }
+ &:after {
+ margin-left: 2px;
+ border-right-color: #fff;
+ }
+ }
- &.bottom-center .popover-arrow {
- border-bottom-color: $gray-dark;
+ &.bottom-center .popover-arrow {
+ border-bottom-color: $gray-dark;
- &:after {
- margin-top: 2px;
- border-bottom-color: #fff;
- }
- }
+ &:after {
+ margin-top: 2px;
+ border-bottom-color: #fff;
+ }
+ }
- &.top-left,
- &.top-right,
- &.bottom-left,
- &.bottom-right {
- margin: $margin / 2;
- }
+ &.top-left,
+ &.top-right,
+ &.bottom-left,
+ &.bottom-right {
+ margin: $margin / 2;
+ }
}
.popover-head {
- font-weight: bold;
- background: $gray;
- border-bottom: 1px solid $gray-dark;
+ font-weight: bold;
+ background: $gray;
+ border-bottom: 1px solid $gray-dark;
}
//-------------------- Progress --------------------//
.progress {
- box-shadow: inset 1px 1px 2px $gray-darkest;
- border-radius: $round;
+ box-shadow: inset 1px 1px 2px $gray-darkest;
+ border-radius: $round;
}
.progress-bar {
- color: #fff;
- font-weight: bold;
- border-top-left-radius: $round;
- border-bottom-left-radius: $round;
- @include progress-style($default, $default-dark);
+ color: #fff;
+ font-weight: bold;
+ border-top-left-radius: $round;
+ border-bottom-left-radius: $round;
+ @include progress-style($default, $default-dark);
- &.is-info { @include progress-style($info, $info-dark); }
- &.is-error { @include progress-style($error, $error-dark); }
- &.is-warning { @include progress-style($warning, $warning-dark); }
- &.is-success { @include progress-style($success, $success-dark); }
+ &.is-info { @include progress-style($info, $info-dark); }
+ &.is-error { @include progress-style($error, $error-dark); }
+ &.is-warning { @include progress-style($warning, $warning-dark); }
+ &.is-success { @include progress-style($success, $success-dark); }
}
.progress-bar + .progress-bar {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
//-------------------- Tooltip --------------------//
.tooltip {
- background: black(.70);
- color: #fff;
- border-radius: $round;
- margin: 10px;
- line-height: 115%;
+ background: black(.70);
+ color: #fff;
+ border-radius: $round;
+ margin: 10px;
+ line-height: 115%;
- &.top-center .tooltip-arrow { border-top-color: black(.70); }
- &.center-left .tooltip-arrow { border-left-color: black(.70); }
- &.center-right .tooltip-arrow { border-right-color: black(.70); }
- &.bottom-center .tooltip-arrow { border-bottom-color: black(.70); }
+ &.top-center .tooltip-arrow { border-top-color: black(.70); }
+ &.center-left .tooltip-arrow { border-left-color: black(.70); }
+ &.center-right .tooltip-arrow { border-right-color: black(.70); }
+ &.bottom-center .tooltip-arrow { border-bottom-color: black(.70); }
}
.tooltip-head {
- color: $info;
- font-weight: bold;
- margin-bottom: $margin / 2;
+ color: $info;
+ font-weight: bold;
+ margin-bottom: $margin / 2;
}
\ No newline at end of file