mike/wishlist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changes default theme to Flatly

Browse source
This commit is contained in:
Ryan Walberg 2013-10-22 01:29:16 +00:00
parent 1ad489aedc
commit d9cb5686ef
4 changed files with 3678 additions and 2324 deletions
Download patch file Download diff file Expand all files Collapse all files

4344
src/bootstrap/css/bootstrap.css vendored
View file

File diff suppressed because it is too large Load diff

864
src/bootstrap/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

623
src/bootstrap/css/bootswatch.less
View file

@ -1,128 +1,605 @@
// United 2.2.1 // Flatness by Jenil (www.jgog.in)
// Bootswatch // Bootswatch 2.3.2
// ----------------------------------------------------- // -----------------------------------------------------
// TYPOGRAPHY // TYPOGRAPHY
// ----------------------------------------------------- // --------------------------------------------------
@import url(https://fonts.googleapis.com/css?family=Ubuntu); @import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
h1 {
font-size: 48px;
font-weight: 900;
}
h2 {
font-size: 36px;
font-weight: 700;
}
h3 {
font-size: 28px;
font-weight: 700;
}
h4 {
font-size: 24px;
font-weight: 500;
}
h5 {
font-size: 16px;
font-weight: 500;
}
h6 {
font-size: 13px;
font-weight: 500;
text-transform: none;
}
p {
margin-bottom: 1em;
}
// SCAFFOLDING // SCAFFOLDING
// ----------------------------------------------------- // --------------------------------------------------
.page-header {
border-bottom: none;
}
// NAVBAR // NAVBAR
// ----------------------------------------------------- // --------------------------------------------------
.navbar { .navbar {
.nav > li > a { .brand {
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.1); text-shadow: none;
&:hover { &:hover {
border-left: 1px solid rgba(0, 0, 0, 0.2); color: @linkColorHover;
} }
} }
.navbar-inner {
.box-shadow(none);
}
.nav > li > a {
text-shadow: none;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
.box-shadow(none);
}
.navbar-search .search-query {
border: none;
.box-shadow(none);
line-height: normal;
}
.btn-navbar {
background-image: none;
.box-shadow(none);
}
.btn, .btn-group {
margin-top: 6px;
}
&-inverse {
.brand:hover {
color: @blueDark;
}
.navbar-search .search-query {
border-color: transparent;
.box-shadow(none);
line-height: normal;
color: @textColor;
&:focus {
padding: 4px 14px;
color: @textColor;
}
}
}
}
div.subnav {
border-color: transparent;
background-image: none;
background-color: @grayLighter;
.box-shadow(none);
&-fixed {
top: @navbarHeight;
}
.nav > li > a {
border-color: transparent;
.box-shadow(none);
color: @textColor;
}
.nav > .active > a, .nav > .active > a,
.nav > .active > a:hover { .nav > .active > a:hover {
border-left: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent;
} background-color: darken(@grayLighter, 10%);
.box-shadow(none);
.divider-vertical { color: @textColor;
background-color: inherit;
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.navbar-text {
padding: 9px 10px 11px;
line-height: 19px;
color: @white;
}
.navbar-search .search-query {
margin-bottom: 3px;
border: 1px solid darken(@navbarBackground, 15%);
} }
} }
@media (max-width: @navbarCollapseWidth) { // NAVIGATION
// --------------------------------------------------
.navbar .nav-collapse { .nav-list {
.nav li > a { & > li > a,
& > .active > a,
.nav-header {
text-shadow: none;
}
.divider {
background: none;
border-bottom: 2px solid @dropdownDividerBottom;
}
}
.nav-pills {
.open .dropdown-toggle {
background-color: @blueDark;
}
}
.pagination {
ul {
.box-shadow(none);
& > li > a {
background-color: @green;
border-color: transparent;
color: @white; color: @white;
border-left: 0px solid @orange;
border-right: 0px solid @orange;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.3) !important; background-color: lighten(@green, 10%);
background-image: none;
} }
} }
.navbar-form, & > .active > a,
.navbar-search { & > .active > a:hover {
border-top: 0px solid @orange; background-color: @paginationActiveBackground;
border-bottom: 0px solid @orange; color: @textColor;
.box-shadow(none);
} }
.nav-header { & > .disabled > a,
color: @grayLighter; & > .disabled > a:hover {
background-color: lighten(@green, 10%);
color: @white;
} }
} }
} }
// NAV .pager {
// -----------------------------------------------------
.nav-tabs .open .dropdown-toggle, li > a,
.nav-pills .open .dropdown-toggle, li > span {
.nav > li.dropdown.open.active > a:hover { background-color: @green;
border-right: 1px solid #C03D14; border: none;
border-left: 1px solid #E6633A; color: @white;
&:hover {
background-color: lighten(@green, 10%);
}
}
.disabled > a,
.disabled > span,
.disabled > a:hover,
.disabled > span:hover {
background-color: lighten(@green, 10%);
color: @white;
}
}
.breadcrumb {
& > li {
text-shadow: none;
}
} }
// BUTTONS // BUTTONS
// ----------------------------------------------------- // --------------------------------------------------
.btn-primary { .btn {
.buttonBackground(lighten(@btnPrimaryBackground, 15%), @btnPrimaryBackground); padding: 9px 20px;
} border: none;
background-image: none;
color: @white;
text-decoration: none;
text-shadow: none;
.box-shadow(none);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
.btn-warning { &:hover,
.buttonBackground(lighten(@yellow, 15%), @yellow); &:focus {
color: white;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
&:active,
&.active {
.box-shadow(none);
color: rgba(255, 255, 255, 0.75);
}
&.disabled,
&[disabled] {
color: white;
}
&-large {
padding: @paddingLarge;
}
&-small {
padding: @paddingSmall;
}
&-mini {
padding: @paddingMini;
}
} }
// TABLES // TABLES
// ----------------------------------------------------- // -----------------------------------------------------
// FORMS .table tbody tr {
// ----------------------------------------------------- &.success > td,
&.error > td,
// DROPDOWNS &.warning > td,
// ----------------------------------------------------- &.info > td {
color: @white;
// ALERTS, LABELS, BADGES }
// -----------------------------------------------------
.alert {
text-shadow: none;
} }
// MISC // FORMS
// ----------------------------------------------------- // --------------------------------------------------
.hero-unit { textarea,
border: 1px solid rgba(0,0,0,.05); input[type="text"],
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 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"],
.uneditable-input {
padding: 7px 6px;
border: 2px solid #dce4ec;
text-indent: 1px;
.border-radius(@inputBorderRadius);
.box-shadow(none);
.placeholder(#acb6c0);
&:focus {
border-color: #1abc9c;
.box-shadow(none);
h1 {
line-height: 1.6em;
} }
} }
.input-prepend {
.add-on:first-child,
.btn:first-child {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
}
.input-append {
input,
select,
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+ .btn-group .btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.add-on:last-child,
.btn:last-child,
.btn-group:last-child > .dropdown-toggle {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.input-prepend,
.input-append {
input,
select,
.uneditable-input {
.border-radius(0);
+ .btn-group .btn {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.add-on:first-child,
.btn:first-child {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
.add-on:last-child,
.btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.input-append,
.input-prepend {
.add-on {
padding: 9px 5px;
text-shadow: none;
border: none;
}
}
.control-group.error,
.control-group.error input:focus,
.control-group.error textarea:focus {
border-color: #e74c3c;
.box-shadow(none);
}
.control-group.success,
.control-group.success input:focus,
.control-group.success textarea:focus {
border-color: #2ecc71;
.box-shadow(none);
}
.control-group.warning,
.control-group.warning input:focus,
.control-group.warning textarea:focus {
border-color: #f1c40f;
.box-shadow(none);
}
.control-group.info,
.control-group.info input:focus,
.control-group.info textarea:focus {
border-color: #3498db;
.box-shadow(none);
}
input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
background-color: #eaeded;
border-color: transparent;
color: #cad2d3;
cursor: default;
}
input[type="file"]{
line-height: 16px;
}
legend {
border-bottom: none;
color: @textColor;
}
.form-actions {
border-top: none;
.border-radius(@baseBorderRadius);
background-color: darken(@grayLighter, 5%);
}
// DROPDOWNS
// --------------------------------------------------
// ALERTS, LABELS, BADGES
// --------------------------------------------------
.alert {
background-color: @orange;
color: @white;
text-shadow: none;
h1, h2, h3, h4, h5, h6 {
color: @white;
}
&-error {
background-color: @red;
}
&-success {
background-color: @green;
}
&-info {
background-color: @blue;
}
}
.label {
padding: 6px 10px;
text-shadow: none;
}
.badge {
padding: 6px 10px;
.border-radius(@borderRadiusLarge);
text-shadow: none;
}
// MISC
// --------------------------------------------------
.well {
border: none;
.box-shadow(none);
}
.progress {
background: @grayLighter;
border-radius: 32px;
height: 12px;
.box-shadow(none);
.bar {
background-color: @blueDark;
background-image: none;
.box-shadow(none);
}
.bar + .bar {
.box-shadow(none);
}
&-striped .bar {
#gradient > .striped(@blueDark);
}
&-success .bar,
&-success.progress-striped .bar,
.bar-success {
background-color: @green;
}
&-warning .bar,
&-warning.progress-striped .bar,
.bar-warning {
background-color: @yellow;
}
&-danger .bar,
&-danger.progress-striped .bar,
.bar-danger {
background-color: @red;
}
&-info .bar,
&-info.progress-striped .bar,
.bar-info {
background-color: @blue;
}
}
.tooltip {
&.in {
opacity: 1;
}
}
.popover {
color: @white;
&-title {
border-bottom: 2px solid @dropdownDividerBottom;
}
}
.modal {
&-header {
background-color: @navbarBackground;
border-bottom: none;
color: @white;
}
&-footer {
background-color: @grayLighter;
border-top: none;
.box-shadow(none);
}
}
.close {
text-shadow: none;
}
// MEDIA QUERIES // MEDIA QUERIES
// ----------------------------------------------------- // --------------------------------------------------
@media (max-width: 767px) {
div.subnav {
.nav > li:first-child > a,
.nav > li + li > a {
border-color: transparent;
&:hover {
background-color: darken(@grayLighter, 10%);
}
}
.nav > li:last-child > a {
border-radius: 0 0 4px 4px;
}
}
.input-append,
.input-prepend {
.add-on,.btn {
padding: 5px;
}
}
}
@media (max-width: 979px) {
.navbar {
.nav-collapse .nav > li > a {
color: @white;
&:hover {
background-color: @green;
}
}
}
}

171
src/bootstrap/css/variables.less
View file

@ -1,54 +1,53 @@
// United 2.2.1 // Flatness by Jenil (www.jgog.in)
// Variables // Bootswatch 2.3.2
// -------------------------------------------------- // --------------------------------------------------
// Global values // Global values
// -------------------------------------------------- // --------------------------------------------------
// Grays // Grays
// ------------------------- // -------------------------
@black: #000; @black: #000;
@grayDarker: #222; @grayDarker: #222;
@grayDark: #333; @grayDark: #7b8a8b;
@gray: #555; @gray: #95A5A6;
@grayLight: #999; @grayLight: #b4bcc2;
@grayLighter: #F5F5F5; @grayLighter: #ECF0F1;
@white: #fff; @white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
@blue: #19B6EE; @blue: #3498DB;
@blueDark: #0064cd; @blueDark: #2C3E50;
@green: #38B44A; @green: #18BC9C;
@red: #DF382C; @red: #E74C3C;
@yellow: #EFB73E; @yellow: #e6bb0d;
@orange: #DD4814; @orange: #F39C12;
@pink: #c3325f; @pink: #ff6699;
@purple: #772953; @purple: #8E44AD;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: @white; @bodyBackground: @white;
@textColor: @grayDark; @textColor: @blueDark;
// Links // Links
// ------------------------- // -------------------------
@linkColor: @orange; @linkColor: #1ABC9C;
@linkColorHover: darken(@linkColor, 15%); @linkColorHover: lighten(@linkColor, 5%);
// Typography // Typography
// ------------------------- // -------------------------
@sansFontFamily: 'Ubuntu', Tahoma, sans-serif; @sansFontFamily: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px; @baseFontSize: 15px;
@baseFontFamily: @sansFontFamily; @baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px; @baseLineHeight: 20px;
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@ -66,12 +65,12 @@
@fontSizeSmall: @baseFontSize * 0.85; // ~12px @fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px @fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px @paddingLarge: 18px 36px; // 44px
@paddingSmall: 2px 10px; // 26px @paddingSmall: 2px 12px; // 26px
@paddingMini: 1px 6px; // 24px @paddingMini: 1px 8px; // 24px
@baseBorderRadius: 4px; @baseBorderRadius: 6px;
@borderRadiusLarge: 6px; @borderRadiusLarge: 10px;
@borderRadiusSmall: 3px; @borderRadiusSmall: 3px;
@ -84,52 +83,52 @@
// Buttons // Buttons
// ------------------------- // -------------------------
@btnBackground: @white; @btnBackground: @grayLight;
@btnBackgroundHighlight: darken(@white, 10%); @btnBackgroundHighlight: lighten(@btnBackground, 10%);
@btnBorder: darken(@white, 20%); @btnBorder: #ddd;
@btnPrimaryBackground: @linkColor; @btnPrimaryBackground: @textColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); @btnPrimaryBackgroundHighlight: lighten(@btnPrimaryBackground, 10%);
@btnInfoBackground: lighten(@purple, 15%); @btnInfoBackground: @blue;
@btnInfoBackgroundHighlight: @purple; @btnInfoBackgroundHighlight: lighten(@btnInfoBackground, 10%);
@btnSuccessBackground: #62c462; @btnSuccessBackground: @green;
@btnSuccessBackgroundHighlight: #51a351; @btnSuccessBackgroundHighlight: lighten(@btnSuccessBackground, 10%);
@btnWarningBackground: lighten(@orange, 15%); @btnWarningBackground: @orange;
@btnWarningBackgroundHighlight: @orange; @btnWarningBackgroundHighlight: lighten(@btnWarningBackground, 10%);
@btnDangerBackground: #ee5f5b; @btnDangerBackground: @red;
@btnDangerBackgroundHighlight: #bd362f; @btnDangerBackgroundHighlight: lighten(@btnDangerBackground, 10%);
@btnInverseBackground: @gray; @btnInverseBackground: @grayDarker;
@btnInverseBackgroundHighlight: @grayDarker; @btnInverseBackgroundHighlight: lighten(@btnInverseBackground, 10%);
// Forms // Forms
// ------------------------- // -------------------------
@inputBackground: @white; @inputBackground: @white;
@inputBorder: #ccc; @inputBorder: #dce4ec;
@inputBorderRadius: @baseBorderRadius; @inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: #eaeded;
@formActionsBackground: transparent; @formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdownBackground: @white; @dropdownBackground: @blueDark;
@dropdownBorder: rgba(0,0,0,.2); @dropdownBorder: rgba(0,0,0,0);
@dropdownDividerTop: #e5e5e5; @dropdownDividerTop: rgba(0,0,0,0.2);
@dropdownDividerBottom: @white; @dropdownDividerBottom: rgba(0,0,0,0.2);
@dropdownLinkColor: @linkColor; @dropdownLinkColor: @white;
@dropdownLinkColorHover: @white; @dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @dropdownLinkColor; @dropdownLinkColorActive: @dropdownLinkColor;
@dropdownLinkBackgroundActive: @linkColor; @dropdownLinkBackgroundActive: @green;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; @dropdownLinkBackgroundHover: @green;
@ -172,7 +171,7 @@
// Wells // Wells
// ------------------------- // -------------------------
@wellBackground: #f5f5f5; @wellBackground: @grayLighter;
// Navbar // Navbar
@ -180,36 +179,36 @@
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px; @navbarHeight: 50px;
@navbarBackgroundHighlight: #CE4213; @navbarBackgroundHighlight: @textColor;
@navbarBackground: @orange; @navbarBackground: @textColor;
@navbarBorder: darken(@navbarBackground, 5%); @navbarBorder: darken(@navbarBackground, 5%);
@navbarText: @white; @navbarText: @white;
@navbarLinkColor: @white; @navbarLinkColor: @white;
@navbarLinkColorHover: @white; @navbarLinkColorHover: @linkColor;
@navbarLinkColorActive: @navbarLinkColorHover; @navbarLinkColorActive: @linkColor;
@navbarLinkBackgroundHover: darken(@navbarBackground, 12%); @navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 12%); @navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
@navbarBrandColor: @navbarLinkColor; @navbarBrandColor: @navbarLinkColor;
// Inverted navbar // Inverted navbar
@navbarInverseBackground: @purple; @navbarInverseBackground: @green;
@navbarInverseBackgroundHighlight: lighten(@purple, 4%); @navbarInverseBackgroundHighlight: @green;
@navbarInverseBorder: darken(@navbarInverseBackground, 5%); @navbarInverseBorder: darken(@green, 5%);
@navbarInverseText: @white; @navbarInverseText: @white;
@navbarInverseLinkColor: @white; @navbarInverseLinkColor: @white;
@navbarInverseLinkColorHover: @white; @navbarInverseLinkColorHover: @blueDark;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; @navbarInverseLinkColorActive: @blueDark;
@navbarInverseLinkBackgroundHover: darken(@navbarInverseBackground, 8%); @navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: darken(@navbarInverseBackground, 8%); @navbarInverseLinkBackgroundActive: darken(@navbarInverseBackground, 5%);
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); @navbarInverseSearchBackground: @white;
@navbarInverseSearchBackgroundFocus: @white; @navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground; @navbarInverseSearchBorder: @grayLight;
@navbarInverseSearchPlaceholderColor: #eee; @navbarInverseSearchPlaceholderColor: @gray;
@navbarInverseBrandColor: @navbarInverseLinkColor; @navbarInverseBrandColor: @navbarInverseLinkColor;
@ -218,7 +217,7 @@
// ------------------------- // -------------------------
@paginationBackground: #fff; @paginationBackground: #fff;
@paginationBorder: #ddd; @paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5; @paginationActiveBackground: @grayLighter;
// Hero unit // Hero unit
@ -230,34 +229,34 @@
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
@warningText: #ECA918; @warningText: @yellow;
@warningBackground: lighten(@warningText, 40%); @warningBackground: @yellow;
@warningBorder: darken(spin(@warningBackground, -10), 3%); @warningBorder: transparent;
@errorText: #DF382C; @errorText: @red;
@errorBackground: lighten(@errorText, 40%); @errorBackground: @red;
@errorBorder: darken(spin(@errorBackground, -10), 3%); @errorBorder: transparent;
@successText: #38B44A; @successText: @green;
@successBackground: lighten(@successText, 40%); @successBackground: @green;
@successBorder: darken(spin(@successBackground, -10), 5%); @successBorder: transparent;
@infoText: @purple; @infoText: @blue;
@infoBackground: lighten(@purple, 50%); @infoBackground: @blue;
@infoBorder: darken(spin(@infoBackground, -10), 7%); @infoBorder: transparent;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
@tooltipColor: #fff; @tooltipColor: #fff;
@tooltipBackground: #000; @tooltipBackground: @blueDark;
@tooltipArrowWidth: 5px; @tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground; @tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff; @popoverBackground: @blueDark;
@popoverArrowWidth: 10px; @popoverArrowWidth: 10px;
@popoverArrowColor: #fff; @popoverArrowColor: @blueDark;
@popoverTitleBackground: darken(@popoverBackground, 3%); @popoverTitleBackground: @blueDark;
// Special enhancement for popovers // Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1; @popoverArrowOuterWidth: @popoverArrowWidth + 1;