Commit 7cf6d6f8 authored by Thomas Park's avatar Thomas Park
Browse files

cosmo: first commit!

parent 9804f5de
This diff is collapsed.
This diff is collapsed.
// Cosmo 2.2.1
// Bootswatch
// -----------------------------------------------------
// TYPOGRAPHY
// -----------------------------------------------------
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
body {
font-weight: 300;
}
h1 {
font-size: 50px;
}
h2, h3 {
font-size: 26px;
}
h4 {
font-size: 14px;
}
h5, h6 {
font-size: 11px;
}
blockquote {
padding: 10px 15px;
background-color: @grayLighter;
border-left-color: @gray;
&.pull-right {
padding: 10px 15px;
border-right-color: @gray;
}
}
.muted {
color: @gray;
}
// SCAFFOLDING
// -----------------------------------------------------
// NAVBAR
// -----------------------------------------------------
.navbar {
.navbar-inner {
background-image: none;
.box-shadow(none);
.border-radius(0);
}
.brand {
&:hover {
color: @navbarLinkColorHover;
}
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
.box-shadow(none);
background-color: @navbarLinkBackgroundHover;
}
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
color: @white;
&:hover {
color: @grayLighter;
}
}
.navbar-search .search-query {
line-height: normal;
}
&-inverse {
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
.box-shadow(none);
background-color: @navbarInverseLinkBackgroundHover;
}
.navbar-search .search-query {
color: @grayDarker;
}
}
}
div.subnav {
background-color: @grayLight;
background-image: none;
.box-shadow(none);
border: none;
.border-radius(0);
.nav {
background-color: transparent;
}
.nav > li > a {
border: none;
}
.nav > .active > a,
.nav > .active > a:hover {
padding-left: 12px;
border: none;
background-color: transparent;
.box-shadow(none);
color: @grayDarker;
}
&-fixed {
top: @navbarHeight;
}
}
// NAV
// -----------------------------------------------------
.nav {
.open .dropdown-toggle,
& > li.dropdown.open.active > a:hover {
color: @blue;
}
}
.nav-tabs {
& > li > a {
.border-radius(0);
}
&.nav-stacked {
& > li > a:hover {
background-color: @blue;
color: @white;
}
& > .active > a,
& > .active > a:hover {
background-color: @white;
color: @gray;
}
& > li:first-child > a,
& > li:last-child > a {
.border-radius(0);
}
}
}
.nav-pills {
& > li > a {
background-color: @grayLight;
.border-radius(0);
color: @black;
&:hover {
background-color: @black;
color: @white;
}
}
& > .disabled > a,
& > .disabled > a:hover {
background-color: @grayLighter;
color: @grayDark;
}
}
.nav-list {
& > li > a {
color: @grayDarker;
&:hover {
background-color: @blue;
color: @white;
text-shadow: none;
}
}
.nav-header {
color: @grayDarker;
}
.divider {
background-color: @gray;
border-bottom: none;
}
}
.pagination {
ul {
.box-shadow(none);
& > li > a,
& > li > span {
margin-right: 6px;
color: @grayDarker;
&:hover {
background-color: @grayDarker;
color: @white;
}
}
& > li:last-child > a,
& > li:last-child > span {
margin-right: 0;
}
& > .active > a,
& > .active > span {
color: @white;
}
& > .disabled > span,
& > .disabled > a,
& > .disabled > a:hover {
background-color: @grayLighter;
color: @grayDark;
}
}
}
.pager {
li > a,
li > span {
background-color: @grayLight;
border: none;
.border-radius(0);
color: @grayDarker;
&:hover {
background-color: @grayDarker;
color: @white;
}
}
.disabled > a,
.disabled > a:hover,
.disabled > span {
background-color: @grayLighter;
color: @grayDark;
}
}
.breadcrumb {
background-color: @grayLight;
li {
text-shadow: none;
}
.divider,
.active {
color: @grayDarker;
text-shadow: none;
}
}
// BUTTONS
// -----------------------------------------------------
.btn {
padding: 5px 12px;
background-image: none;
.box-shadow(none);
border: none;
.border-radius(0);
text-shadow: none;
&.disabled {
box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
}
&-large {
padding: 22px 30px;
}
}
.btn-group {
& > .btn:first-child,
& > .btn:last-child,
& > .dropdown-toggle {
.border-radius(0);
}
& > .btn + .dropdown-toggle {
.box-shadow(none);
}
}
// TABLES
// -----------------------------------------------------
.table {
tbody tr.success td {
color: @white;
}
tbody tr.error td {
color: @white;
}
tbody tr.info td {
color: @white;
}
&-bordered {
.border-radius(0);
thead:first-child tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
.border-radius(0);
}
thead:last-child tr:last-child th:first-child,
tbody:last-child tr:last-child td:first-child,
tfoot:last-child tr:last-child td:first-child {
.border-radius(0);
}
}
}
// FORMS
// -----------------------------------------------------
select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"] {
color: @grayDarker;
}
.control-group {
&.warning {
& > label,
.help-block,
.help-inline {
color: @orange;
}
input,
select,
textarea {
border-color: @orange;
color: @grayDarker;
}
}
&.error {
& > label,
.help-block,
.help-inline {
color: @red;
}
input,
select,
textarea {
border-color: @red;
color: @grayDarker;
}
}
&.success {
& > label,
.help-block,
.help-inline {
color: @green;
}
input,
select,
textarea {
border-color: @green;
color: @grayDarker;
}
}
}
legend {
border-bottom: none;
color: @grayDarker;
}
.form-actions {
border-top: none;
background-color: @grayLighter;
}
// DROPDOWNS
// -----------------------------------------------------
.dropdown-menu {
.border-radius(0);
}
// ALERTS, LABELS, BADGES
// -----------------------------------------------------
.alert {
.border-radius(0);
text-shadow: none;
&-heading, h1, h2, h3, h4, h5, h6 {
color: @white;
}
}
.label {
.border-radius(0);
text-shadow: none;
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @blue;
}
&-inverse {
background-color: @gray;
}
}
.badge {
.border-radius(0);
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @blue;
}
&-inverse {
background-color: @gray;
}
}
// MISC
// -----------------------------------------------------
.hero-unit {
border: none;
.border-radius(0);
.box-shadow(none);
}
.well {
border: none;
.border-radius(0);
.box-shadow(none);
}
[class^="icon-"], [class*=" icon-"] {
margin: 0 2px;
vertical-align: -2px;
}
a.thumbnail {
background-color: @grayLight;
&:hover {
background-color: @gray;
border-color: transparent;
}
}
.progress {
height: 6px;
.border-radius(0);
.box-shadow(none);
background-color: @grayLighter;
background-image: none;
.bar {
background-color: @blue;
background-image: none;
}
&-info {
background-color: @purple;
}
&-success {
background-color: @green;
}
&-warning {
background-color: @orange;
}
&-danger {
background-color: @red;
}
}
.modal {
.border-radius(0);
&-header {
border-bottom: none;
}
&-footer {
border-top: none;
background-color: transparent;
}
}
.popover {
.border-radius(0);
color: @white;
&-title {
border-bottom: none;
color: @white;
}
}
// MEDIA QUERIES
// -----------------------------------------------------
This diff is collapsed.
// Cosmo 2.2.1
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@black: #000;
@grayDarker: #080808;
@grayDark: #999;
@gray: #bbb;
@grayLight: #dfdfdf;
@grayLighter: #eee;
@white: #fff;
// Accent colors
// -------------------------
@blue: #5192FB;
@blueDark: #083047;
@green: #00A301;
@red: #E51400;
@yellow: #F4B300;
@orange: #F09609;
@pink: #E671B8;
@purple: #852C99;
// Scaffolding
// -------------------------
@bodyBackground: @white;
@textColor: #555;
// Links
// -------------------------
@linkColor: @blue;
@linkColorHover: darken(@linkColor, 10%);
// Typography
// -------------------------
@sansFontFamily: "Open Sans", Calibri, Candara, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: 300; // instead of browser default, bold
@headingsColor: @grayDarker; // empty to use BS default, @textColor
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 1px 6px; // 24px
@baseBorderRadius: 0px;
@borderRadiusLarge: 0px;
@borderRadiusSmall: 0px;
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #E8F8FD; // for hover
@tableBorder: #ddd; // table and cell border
// Buttons
// -------------------------