Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Updated to include the Cosmo theme. #25

Merged
merged 2 commits into from

3 participants

@aantix

I've converted over the Cosmo theme. Let me know if I missed anything.

@aantix aantix referenced this pull request
Closed

Add Cosmo #24

@mtarnovan

+1, please pull

@maxim
Owner

Thanks for this. If I understand correctly, less percentages are incompatible with scss. Please convert them too. (See this commit 52ec55f)

@aantix

Good catch. I'll take a look tonight.

@aantix

I've made the appropriate changes to the percentage values.

@maxim maxim merged commit 170924c into maxim:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 6, 2012
  1. @aantix
Commits on Dec 16, 2012
  1. @aantix
This page is out of date. Refresh to see the latest.
View
1  README.md
@@ -44,6 +44,7 @@ I'm converting/updating them as time permits. Here's what's included at this poi
* [Amelia](http://bootswatch.com/amelia/)
* [Cerulean](http://bootswatch.com/cerulean/)
+* [Cosmo](http://bootswatch.com/cosmo/)
* [Cyborg](http://bootswatch.com/cyborg/)
* [Journal](http://bootswatch.com/journal/)
* [Readable](http://bootswatch.com/readable/)
View
592 vendor/assets/stylesheets/bootswatch/cosmo/_bootswatch.scss
@@ -0,0 +1,592 @@
+// Swatch: Cosmo
+// Version: 2.0.2
+// -----------------------------------------------------
+
+
+// TYPOGRAPHY
+// -----------------------------------------------------
+
+@import url('https://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;
+ }
+
+ small {
+ color: $gray;
+ }
+}
+
+.muted {
+ color: $gray;
+}
+
+// SCAFFOLDING
+// -----------------------------------------------------
+
+// NAVBAR
+// -----------------------------------------------------
+
+.navbar {
+
+ .navbar-inner {
+ background-image: none;
+ @include box-shadow(none);
+ @include border-radius(0);
+ }
+
+ .brand {
+
+ &:hover {
+ color: $navbarLinkColorHover;
+ }
+ }
+
+ .nav > .active > a,
+ .nav > .active > a:hover,
+ .nav > .active > a:focus {
+ @include 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;
+ }
+
+ .navbar-inverse {
+
+ .brand,
+ .nav > li > a {
+ text-shadow: none;
+ }
+
+ .brand:hover,
+ .nav > .active > a,
+ .nav > .active > a:hover,
+ .nav > .active > a:focus {
+ background-color: $navbarInverseLinkBackgroundHover;
+ @include box-shadow(none);
+ color: $white;
+ }
+
+ .navbar-search .search-query {
+ color: $grayDarker;
+ }
+ }
+}
+
+div.subnav {
+
+ background-color: $grayLight;
+ background-image: none;
+ @include box-shadow(none);
+ border-color: transparent;
+ @include border-radius(0);
+
+ .nav {
+ background-color: transparent;
+ }
+
+ .nav > li > a {
+ border-color: transparent;
+ }
+
+ .nav > .active > a {
+ border-color: transparent;
+ background-color: transparent;
+ // border-left-width: 2px;
+ @include box-shadow(none);
+ color: $grayDarker;
+
+ &:hover {
+ background-color: $black;
+ color: $white;
+ }
+ }
+
+ &.subnav-fixed {
+ top: $navbarHeight;
+ }
+}
+
+// NAV
+// -----------------------------------------------------
+
+.nav {
+
+ .open .dropdown-toggle,
+ & > li.dropdown.open.active > a:hover {
+ color: $blue;
+ }
+
+}
+
+.nav-tabs {
+
+ & > li > a {
+ @include 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 {
+ @include border-radius(0);
+ }
+ }
+}
+
+.nav-pills {
+
+ & > li > a {
+ background-color: $grayLight;
+ @include 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 {
+
+ @include 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;
+ @include 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;
+ @include box-shadow(none);
+ border: none;
+ @include 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);
+ }
+
+ &.btn-large {
+ padding: 22px 30px;
+ }
+
+ &.btn-mini {
+ padding: 2px 6px;
+ }
+}
+
+.btn-group {
+
+ & > .btn:first-child,
+ & > .btn:last-child,
+ & > .dropdown-toggle {
+ @include border-radius(0);
+ }
+
+ & > .btn + .dropdown-toggle {
+ @include box-shadow(none);
+ }
+}
+
+// TABLES
+// -----------------------------------------------------
+
+.table {
+
+ tbody tr.success td {
+ color: $white;
+ }
+
+ tbody tr.error td {
+ color: $white;
+ }
+
+ tbody tr.info td {
+ color: $white;
+ }
+
+ &.table-bordered {
+ @include border-radius(0);
+
+ thead:first-child tr:first-child th:first-child,
+ tbody:first-child tr:first-child td:first-child {
+ @include 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 {
+ @include 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 {
+ @include border-radius(0);
+}
+
+// ALERTS, LABELS, BADGES
+// -----------------------------------------------------
+
+.alert {
+ @include border-radius(0);
+ text-shadow: none;
+
+ &.alert-heading, h1, h2, h3, h4, h5, h6 {
+ color: $white;
+ }
+}
+
+.label {
+ min-width: 80px;
+ min-height: 80px;
+ @include border-radius(0);
+ font-weight: 300;
+ text-shadow: none;
+
+ &.label-success {
+ background-color: $green;
+ }
+
+ &.label-important {
+ background-color: $red;
+ }
+
+ &.label-info {
+ background-color: $purple;
+ }
+
+ &.label-inverse {
+ background-color: $black;
+ }
+}
+
+.badge {
+ @include border-radius(0);
+ font-weight: 300;
+ text-shadow: none;
+ .badge-success {
+ background-color: $green;
+ }
+
+ .badge-important {
+ background-color: $red;
+ }
+
+ .badge-info {
+ background-color: $purple;
+ }
+
+ .badge-inverse {
+ background-color: $black;
+ }
+}
+
+// MISC
+// -----------------------------------------------------
+
+.hero-unit {
+ border: none;
+ @include border-radius(0);
+ @include box-shadow(none);
+}
+
+.well {
+ border: none;
+ @include border-radius(0);
+ @include 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;
+ @include border-radius(0);
+ @include box-shadow(none);
+ background-color: $grayLighter;
+ background-image: none;
+
+ .bar {
+ background-color: $blue;
+ background-image: none;
+ }
+
+ &.progress-info {
+ background-color: $purple;
+ }
+
+ &.progress-success {
+ background-color: $green;
+ }
+
+ &.progress-warning {
+ background-color: $orange;
+ }
+
+ &.progress-danger {
+ background-color: $red;
+ }
+}
+
+.modal {
+ @include border-radius(0);
+
+ &.modal-header {
+ border-bottom: none;
+ }
+
+ &.modal-footer {
+ border-top: none;
+ background-color: transparent;
+ }
+}
+
+.popover {
+ @include border-radius(0);
+ color: $white;
+
+ &.popover-title {
+ border-bottom: none;
+ color: $white;
+ }
+
+}
+
+// MEDIA QUERIES
+// -----------------------------------------------------
View
302 vendor/assets/stylesheets/bootswatch/cosmo/_variables.scss
@@ -0,0 +1,302 @@
+// Variables to customize the look and feel of Bootstrap
+// Swatch: Cosmo
+// Version: 2.0.2
+// -----------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black: #000;
+$grayDarker: #080808;
+$grayDark: #999;
+$gray: #bbb;
+$grayLight: #dfdfdf;
+$grayLighter: #eee;
+$white: #fff;
+
+
+// Accent colors
+// -------------------------
+$blue: #007FFF;
+$blueDark: #1F26B6;
+$green: #3FB618;
+$red: #FF0039;
+$yellow: #FFA500;
+$orange: #FF7518;
+$pink: #E671B8;
+$purple: #9954BB;
+
+
+// Scaffolding
+// -------------------------
+$bodyBackground: $white;
+$textColor: #555;
+
+
+// Links
+// -------------------------
+$linkColor: $blue;
+$linkColorHover: darken($linkColor, 0.1);
+
+
+// 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
+// -------------------------
+$btnBackground: $grayLighter;
+$btnBackgroundHighlight: darken($grayLighter, 0.15);
+$btnBorder: #bbb;
+
+$btnPrimaryBackground: lighten($blue, 0.05);
+$btnPrimaryBackgroundHighlight: darken($blue, 0.05);
+
+$btnInfoBackground: lighten($purple, 0.05);
+$btnInfoBackgroundHighlight: darken($purple, 0.05);
+
+$btnSuccessBackground: lighten($green, 0.05);
+$btnSuccessBackgroundHighlight: darken($green, 0.05);
+
+$btnWarningBackground: lighten($orange, 0.05);
+$btnWarningBackgroundHighlight: darken($orange, 0.05);
+
+$btnDangerBackground: lighten($red, 0.05);
+$btnDangerBackgroundHighlight: darken($red, 0.05);
+
+$btnInverseBackground: lighten($black, 0.05);
+$btnInverseBackgroundHighlight: darken($black, 0.05);
+
+
+// Forms
+// -------------------------
+$inputBackground: $white;
+$inputBorder: $gray;
+$inputBorderRadius: $baseBorderRadius;
+$inputDisabledBackground: $grayLighter;
+$formActionsBackground: #f5f5f5;
+$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+$dropdownBackground: $white;
+$dropdownBorder: rgba(0,0,0,.2);
+$dropdownDividerTop: #e5e5e5;
+$dropdownDividerBottom: $white;
+
+$dropdownLinkColor: $grayDark;
+$dropdownLinkColorHover: $white;
+$dropdownLinkColorActive: $dropdownLinkColor;
+
+$dropdownLinkBackgroundActive: $blue;
+$dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindexDropdown: 1000;
+$zindexPopover: 1010;
+$zindexTooltip: 1030;
+$zindexFixedNavbar: 1030;
+$zindexModalBackdrop: 1040;
+$zindexModal: 1050;
+
+
+// Sprite icons path
+// -------------------------
+$iconSpritePath: "../img/glyphicons-halflings.png";
+$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
+
+
+// Input placeholder text color
+// -------------------------
+$placeholderText: $gray;
+
+
+// Hr border color
+// -------------------------
+$hrBorder: $grayLighter;
+
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset: 180px;
+
+
+// Wells
+// -------------------------
+$wellBackground: $grayLighter;
+
+
+// Navbar
+// -------------------------
+$navbarCollapseWidth: 979px;
+$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
+
+$navbarHeight: 50px;
+$navbarBackground: #0062ff;
+$navbarBackgroundHighlight: $navbarBackground;
+$navbarBorder: transparent;
+
+$navbarText: $white;
+$navbarLinkColor: $white;
+$navbarLinkColorHover: $gray;
+$navbarLinkColorActive: $white;
+$navbarLinkBackgroundHover: rgba(0, 0, 0, 0.05);
+$navbarLinkBackgroundActive: transparent;
+
+$navbarBrandColor: $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground: $blue;
+$navbarInverseBackgroundHighlight: $navbarInverseBackground;
+$navbarInverseBorder: transparent;
+
+$navbarInverseText: $white;
+$navbarInverseLinkColor: $white;
+$navbarInverseLinkColorHover: $white;
+$navbarInverseLinkColorActive: $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover: rgba(0, 0, 0, 0.05);
+$navbarInverseLinkBackgroundActive: $navbarInverseBackground;
+
+$navbarInverseSearchBackground: lighten($navbarInverseBackground, 0.25);
+$navbarInverseSearchBackgroundFocus: $white;
+$navbarInverseSearchBorder: $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor: $grayDark;
+
+$navbarInverseBrandColor: $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground: $grayLight;
+$paginationBorder: transparent;
+$paginationActiveBackground: $blue;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground: $grayLighter;
+$heroUnitHeadingColor: inherit;
+$heroUnitLeadColor: inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText: $white;
+$warningBackground: $orange;
+$warningBorder: transparent;
+
+$errorText: $white;
+$errorBackground: $red;
+$errorBorder: transparent;
+
+$successText: $white;
+$successBackground: $green;
+$successBorder: transparent;
+
+$infoText: $white;
+$infoBackground: $purple;
+$infoBorder: transparent;
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor: #fff;
+$tooltipBackground: #000;
+$tooltipArrowWidth: 5px;
+$tooltipArrowColor: $tooltipBackground;
+
+$popoverBackground: $orange;
+$popoverArrowWidth: 15px;
+$popoverArrowColor: $orange;
+$popoverTitleBackground: $orange;
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth: $popoverArrowWidth + 1;
+$popoverArrowOuterColor: transparent;
+
+
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+$gridColumns: 12;
+$gridColumnWidth: 60px;
+$gridGutterWidth: 20px;
+$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// 1200px min
+$gridColumnWidth1200: 70px;
+$gridGutterWidth1200: 30px;
+$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768: 42px;
+$gridGutterWidth768: 20px;
+$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
Something went wrong with that request. Please try again.