Commit e281e440 authored by Thomas Park's avatar Thomas Park
Browse files

new themes cupid, lumen, and superhero

parent 77d0a18c
This diff is collapsed.
This diff is collapsed.
// Cupid 3.1.0
// Bootswatch
// -----------------------------------------------------
@import url("//fonts.googleapis.com/css?family=Bitter:400,700");
@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic");
// Navbar =====================================================================
.navbar {
font-family: @font-family-serif;
&-default {
.dropdown-menu {
background-color: @navbar-default-bg;
> li > a,
> li > a:focus {
color: @navbar-default-color;
}
> li > a:hover,
> .active > a,
> .active > a:hover {
background-color: @navbar-default-link-hover-bg;
}
}
}
&-inverse {
.dropdown-menu {
background-color: @navbar-inverse-bg;
> li > a,
> li > a:focus {
color: @navbar-inverse-color;
}
> li > a:hover,
> .active > a,
> .active > a:hover {
background-color: @navbar-inverse-link-hover-bg;
}
}
}
}
// Buttons ====================================================================
.btn {
font-family: @font-family-serif;
}
.btn-group {
.btn ~ .dropdown-toggle {
padding-left: 16px;
padding-right: 16px;
}
.dropdown-menu {
border-top-width: 0;
}
&.dropup .dropdown-menu {
border-top-width: 1px;
border-bottom-width: 0;
margin-bottom: 0;
}
.dropdown-toggle {
&.btn-default ~ .dropdown-menu {
background-color: @btn-default-bg;
border-color: @btn-default-border;
> li > a {
color: @btn-default-color;
}
> li > a:hover {
background-color: darken(@btn-default-bg, 8%);
}
}
&.btn-primary ~ .dropdown-menu {
background-color: @btn-primary-bg;
border-color: @btn-primary-border;
> li > a {
color: @btn-primary-color;
}
> li > a:hover {
background-color: darken(@btn-primary-bg, 8%);
}
}
&.btn-success ~ .dropdown-menu {
background-color: @btn-success-bg;
border-color: @btn-success-border;
> li > a {
color: @btn-success-color;
}
> li > a:hover {
background-color: darken(@btn-success-bg, 8%);
}
}
&.btn-info ~ .dropdown-menu {
background-color: @btn-info-bg;
border-color: @btn-info-border;
> li > a {
color: @btn-info-color;
}
> li > a:hover {
background-color: darken(@btn-info-bg, 8%);
}
}
&.btn-warning ~ .dropdown-menu {
background-color: @btn-warning-bg;
border-color: @btn-warning-border;
> li > a {
color: @btn-warning-color;
}
> li > a:hover {
background-color: darken(@btn-warning-bg, 8%);
}
}
&.btn-danger ~ .dropdown-menu {
background-color: @btn-danger-bg;
border-color: @btn-danger-border;
> li > a {
color: @btn-danger-color;
}
> li > a:hover {
background-color: darken(@btn-danger-bg, 8%);
}
}
}
}
// Typography =================================================================
h1, h2 {
position: relative;
padding: 0.2em 1.2em;
margin-left: 1em;
margin-right: 50px;
margin-bottom: 0.6em;
background-color: @gray-lighter;
color: #fff;
&:before {
content: "♥";
position: absolute;
left: -0.3em;
top: -0.42em;
color: @brand-primary;
font-family: @font-family-sans-serif;
font-size: 3.6em;
}
&:after {
content:"";
position: absolute;
width: 0;
height: 0;
right: 0;
top: 0;
border-top: 0.75em solid transparent;
border-bottom: 0.75em solid transparent;
border-right: 0.75em solid @body-bg;
}
}
.lead {
font-weight: normal;
}
.text-primary,
.text-primary:hover {
color: @brand-primary;
}
.text-success,
.text-success:hover {
color: @brand-success;
}
.text-danger,
.text-danger:hover {
color: @brand-danger;
}
.text-warning,
.text-warning:hover {
color: @brand-warning;
}
.text-info,
.text-info:hover {
color: @brand-info;
}
// Tables =====================================================================
table,
.table {
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th,
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td {
border-color: transparent;
}
}
// Forms ======================================================================
legend {
font-family: @font-family-serif;
}
label {
font-weight: normal;
}
.help-block {
color: @text-color;
}
.form-control,
.form-control:focus {
.box-shadow(none);
}
.has-warning {
.help-block,
.control-label {
color: @brand-warning;
}
.form-control,
.form-control:focus {
border: 1px solid @brand-warning;
.box-shadow(none);
}
}
.has-error {
.help-block,
.control-label {
color: @brand-danger;
}
.form-control,
.form-control:focus {
border: 1px solid @brand-danger;
.box-shadow(none);
}
}
.has-success {
.help-block,
.control-label {
color: @brand-success;
}
.form-control,
.form-control:focus {
border: 1px solid @brand-success;
.box-shadow(none);
}
}
// Navs =======================================================================
.dropdown-menu {
margin-top: 0;
border: none;
.box-shadow(none);
}
.nav-tabs,
.nav-pills {
> li > a {
background-color: @gray-lighter;
color: #fff;
}
> li > a:hover,
> li > a:focus {
color: #fff;
}
> li.disabled > a,
> li.disabled > a:hover,
> li.disabled > a:focus {
background-color: @well-bg;
color: @gray-lighter;
}
.open > a,
.open > a:hover,
.open > a:focus {
border-color: transparent;
}
> .dropdown > .dropdown-menu {
background-color: @btn-primary-bg;
border-color: @btn-primary-border;
> li > a {
color: @btn-primary-color;
}
> li > a:hover {
background-color: darken(@btn-primary-bg, 8%);
}
}
}
.nav-pills {
> li + li {
margin-left: 0;
}
}
.nav-stacked {
> li + li {
margin-top: 0;
}
}
.breadcrumb {
a {
color: #fff;
}
}
.pager {
li > a,
li > a:hover,
li > a:focus {
color: #fff;
}
.disabled > a,
.disabled > a:hover,
.disabled > a:focus,
.disabled > span {
background-color: @pagination-disabled-bg;
}
}
// Indicators =================================================================
.alert,
.panel {
h1, h2 {
background-color: transparent;
margin-right: 0;
padding: 0;
&:before,
&:after {
content: none;
}
}
}
// Progress bars ==============================================================
.progress,
.progress-bar {
.box-shadow(none);
}
// Containers =================================================================
.well,
.jumbotron,
.list-group,
.modal {
h1, h2 {
background-color: transparent;
margin-right: 0;
padding: 0;
&:before,
&:after {
content: none;
}
}
}
.well {
.box-shadow(none);
}
a.list-group-item:hover,
a.list-group-item:focus,
a.list-group-item:hover .list-group-item-heading,
a.list-group-item:focus .list-group-item-heading {
color: #fff;
}
.panel {
border: none;
.box-shadow(none);
color: #fff;
&-heading,
&-footer {
position: relative;
text-align: center;
&:before {
z-index: -100;
content: "";
position: absolute;
left: 50%;
top: 0;
margin-left: -2em;
margin-top: -1em;
display: inline-block;
width: 4em;
height: 4em;
border-radius: 2em;
background-color: @gray-lighter;
}
}
&-footer {
&:before {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -1em;
}
}
&-body {
color: @text-color;
}
&-primary .panel-heading:before {
background-color: @brand-primary;
}
&-success .panel-heading:before {
background-color: @brand-success;
}
&-warning .panel-heading:before {
background-color: @brand-warning;
}
&-danger .panel-heading:before {
background-color: @brand-danger;
}
&-info .panel-heading:before {
background-color: @brand-info;
}
> .list-group {
color: @text-color;
}
}
.modal {
&-header {
background-color: @brand-primary;
color: #fff;
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
}
.popover {
border: none;
border-radius: 0;
padding: 0;
&-title {
border-radius: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// Lumen 3.1.0
// Bootswatch
// -----------------------------------------------------
@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");
.shadow (@width: 4px) {
border-width: 0 1px @width 1px;
}
// Navbar =====================================================================
.navbar {
.shadow();
}
// Buttons ====================================================================
.btn {
.shadow();
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
&:hover {
margin-top: 1px;
border-bottom-width: 3px;
}
&:active {
margin-top: 2px;
border-bottom-width: 2px;
.box-shadow(none);
}
&-default:hover,
&-default:focus,
&-group.open .dropdown-toggle.btn-default {
background-color: @btn-default-bg;
border-color: @btn-default-border;
}
&-primary:hover,
&-primary:focus,
&-group.open .dropdown-toggle.btn-primary {
background-color: @btn-primary-bg;
border-color: @btn-primary-border;
}
&-success:hover,
&-success:focus,
&-group.open .dropdown-toggle.btn-success {
background-color: @btn-success-bg;
border-color: @btn-success-border;
}
&-info:hover,
&-info:focus,
&-group.open .dropdown-toggle.btn-info {
background-color: @btn-info-bg;
border-color: @btn-info-border;
}
&-warning:hover,
&-warning:focus,
&-group.open .dropdown-toggle.btn-warning {
background-color: @btn-warning-bg;
border-color: @btn-warning-border;
}
&-danger:hover,
&-danger:focus,
&-group.open .dropdown-toggle.btn-danger {
background-color: @btn-danger-bg;
border-color: @btn-danger-border;
}
&-group.open .dropdown-toggle {
.box-shadow(none);
}
}
// Typography =================================================================
.text-primary,
.text-primary:hover {
color: @brand-primary;
}
.text-success,
.text-success:hover {
color: @brand-success;
}
.text-danger,
.text-danger:hover {
color: @brand-danger;
}
.text-warning,
.text-warning:hover {
color: @brand-warning;
}
.text-info,
.text-info:hover {
color: @brand-info;
}
// Tables =====================================================================
table,
.table {
tr.success,
tr.warning,
tr.danger {
color: #fff;
}
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th,
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td {
border-color: transparent;
}
}
// Forms ======================================================================
.form-control {
.box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
}