Commit 440d9d8a authored by Thomas Park's avatar Thomas Park
Browse files

simplex: big revamp to thin look

parent 7b8d1765
This diff is collapsed.
This diff is collapsed.
......@@ -3,12 +3,14 @@
// Version: 2.0.4
// -----------------------------------------------------
@boxShadow: 0 1px 1px rgba(0, 0, 0, 0.3);
@import url('http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
@boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
// TYPOGRAPHY
// -----------------------------------------------------
h6, .hero-unit {
h6 {
color: @headingsColor;
}
......@@ -19,32 +21,30 @@ h6, .hero-unit {
.navbar-inner {
.box-shadow(inset 0 -1px #CFCACA);
border-bottom: 1px solid #FFF;
border-bottom: none;
}
.brand {
padding-top: 10px;
color: @headingsColor;
padding: 13px 20px 10px;
font-weight: bold;
&:hover {
color: @orange;
}
}
.navbar-text {
padding: 14px 10px 11px;
text-shadow: none;
font-weight: normal;
font-size: 11px;
padding: 15px 20px 9px;
line-height: 19px;
color: @grayLight;
}
.nav > li > a {
padding-top: 14px;
padding: 15px 20px 9px;
text-shadow: none;
font-weight: normal;
font-size: 11px;
}
.nav > li > a:hover {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.nav .active > a,
......@@ -52,24 +52,33 @@ h6, .hero-unit {
background-color: transparent;
}
.nav-collapse .nav li.dropdown > .dropdown-toggle:hover {
color: @textColor;
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle:hover {
color: @linkColor;
}
.nav li.dropdown .dropdown-toggle .caret,
.nav li.open.dropdown .dropdown-toggle .caret {
.nav li.dropdown .dropdown-toggle .caret {
border-top-color: @textColor;
border-bottom-color: @textColor;
opacity: 1;
}
.nav-collapse .nav li > a {
color: @headingsColor;
font-weight: normal;
.nav li.dropdown:hover .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open .dropdown-toggle .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
}
.nav-collapse .nav li > a:hover {
background-color: transparent;
color: @black;
text-decoration: underline;
.nav-collapse.collapse {
.nav li > a {
color: @textColor;
&:hover {
background-color: @grayLighter;
}
}
}
}
......@@ -85,21 +94,50 @@ div.subnav {
}
.nav > li > a {
padding-top: 12px;
padding: 14px 12px 10px;
color: @navbarText;
font-weight: normal;
font-size: 11px;
border-left-color: transparent;
border-right-color: transparent;
&:hover {
text-decoration: underline;
background-color: transparent;
color: @linkColor;
}
}
.nav > li.open > a,
.nav > li.open > a:hover {
.nav > li.active > a,
.nav > li.active > a:hover {
border-left-color: transparent;
border-right-color: transparent;
background-color: transparent;
.box-shadow(none);
color: @linkColor;
}
.nav > li.dropdown.open > a,
.nav > li.dropdown.open > a:hover {
border-left-color: transparent;
border-right-color: transparent;
background-color: transparent;
border-left: 1px solid whiteSmoke;
border-right: 1px solid #E5E5E5;
color: @linkColor;
}
.nav li.dropdown .dropdown-toggle .caret {
border-top-color: @textColor;
border-bottom-color: @textColor;
opacity: 1;
}
.nav li.dropdown:hover .dropdown-toggle .caret,
.nav li.dropdown.active .dropdown-toggle .caret,
.nav li.dropdown.open .dropdown-toggle .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
opacity: 1;
}
.dropdown-menu a:hover {
background-color: @dropdownLinkBackgroundHover;
}
}
......@@ -114,49 +152,142 @@ div.subnav {
// -----------------------------------------------------
.nav .nav-header {
font-size: 13px;
font-weight: normal;
text-transform: none;
}
.nav > li > a {
font-size: 11px;
border-width: 1px;
}
.nav-tabs {
.dropdown-menu {
.border-radius(0);
font-size: 11px;
}
& > li > a {
background-color: darken(@bodyBackground, 3%);
border: 1px solid #ccc;
color: @textColor;
.dropdown.open .dropdown-toggle {
color: @headingsColor;
}
&:hover {
border: 1px solid #ccc;
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
}
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.tabbable > .nav-tabs > li > a,
.tabbable > .nav-tabs > li > a:hover {
background-color: darken(@bodyBackground, 3%);
border: 1px solid #ccc;
}
& > li.active > a,
& > li.active > a:hover {
background-color: @bodyBackground;
}
.tabbable > .nav-tabs > li.active > a {
border-bottom: 1px solid transparent;
.dropdown {
.dropdown-toggle .caret {
border-top-color: @textColor;
border-bottom-color: @textColor;
opacity: 1;
}
&:hover .dropdown-toggle .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
}
}
.dropdown.open .dropdown-toggle {
background-color: @dropdownLinkBackgroundHover;
border-color: #ccc;
color: @linkColor;
.caret,
&:hover .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
opacity: 1;
}
}
.dropdown-menu {
.border-radius(0);
a {
padding: 8px 15px 3px;
}
}
}
.tabbable.tabs-below > .nav-tabs > li.active > a,
.tabbable.tabs-left > .nav-tabs > li.active > a,
.tabbable.tabs-right > .nav-tabs > li.active > a {
border-bottom: 1px solid #ccc;
.tabbable {
.nav-tabs > li > a,
.nav-tabs > li > a:hover {
border: 1px solid #ccc;
}
.nav-tabs > li.active > a {
border-bottom: 1px solid transparent;
}
&.tabs-below > .nav-tabs > li.active > a,
&.tabs-left > .nav-tabs > li.active > a,
&.tabs-right > .nav-tabs > li.active > a {
border-bottom: 1px solid #ccc;
}
}
.nav-pills > li > a:hover {
background-color: transparent;
.nav-pills {
li > a {
color: @textColor;
&:hover {
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
}
}
li.active > a,
li.active > a:hover {
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
}
.dropdown .dropdown-toggle .caret {
border-top-color: @textColor;
border-bottom-color: @textColor;
opacity: 1;
}
.dropdown:hover .dropdown-toggle .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
}
.dropdown.open .dropdown-toggle,
.dropdown.open:hover .dropdown-toggle {
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
.caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
}
}
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
background-color: @bodyBackground;
.nav-list {
li > a {
color: @textColor;
&:hover {
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
}
}
li.active > a,
li.active > a:hover {
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
}
}
// FORMS
......@@ -174,7 +305,7 @@ legend {
}
.help-inline, .help-block {
font-size: 11px;
font-size: 13px;
}
// TABLES
......@@ -185,44 +316,24 @@ legend {
// -----------------------------------------------------
.btn {
.border-radius(2px);
font-weight: bold;
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%));
}
.btn-primary {
.buttonBackground(lighten(@btnPrimaryBackground, 5%), @btnPrimaryBackground);
}
.btn-warning {
.buttonBackground(lighten(@orange, 5%), @orange);
}
.btn-danger {
.buttonBackground(lighten(@red, 5%), @red);
padding: 6px 10px 2px;
}
.btn-success {
.buttonBackground(lighten(@green, 5%), @green);
.btn-large {
padding: 11px 14px 8px;
}
.btn-info {
.buttonBackground(lighten(#5bc0de, 5%), #5bc0de);
.btn-small {
padding: 5px 9px 3px;
}
.btn-inverse {
.buttonBackground(lighten(@purple, 5%), @purple);
.btn-micro {
padding: 3px 6px 1px;
}
// MODALS
// -----------------------------------------------------
.modal,
.modal-header,
.modal-footer {
.border-radius(0);
}
.modal-header {
border-bottom: none;
}
......@@ -240,40 +351,63 @@ legend {
// -----------------------------------------------------
i[class^="icon-"]{
opacity: 0.6;
opacity: 0.5;
vertical-align: -2px;
}
.alert, .alert p, .alert-heading {
font-size: 11px;
}
.progress {
#gradient > .vertical(#e0e0e0, #e8e8e8);
}
.label {
font-size: 11px;
padding: 4px 4px 3px;
font-weight: normal;
}
.hero-unit {
background-color: @white;
.box-shadow(@boxShadow);
background-color: @navbarBackground;
.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
}
.well {
.box-shadow(@boxShadow);
.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
background-color: @white;
border: none;
}
.breadcrumb {
.box-shadow(@boxShadow);
.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
border: 0px solid transparent;
font-size: 11px;
li {
padding-top: 5px;
text-shadow: none;
}
a {
text-shadow: none;
}
a:hover {
text-decoration: none;
}
}
footer.footer p {
font-size: 11px;
.pagination {
li > a {
padding: 4px 14px 0;
color: @textColor;
&:hover {
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
}
}
li.active > a {
background-color: @dropdownLinkBackgroundHover;
color: @linkColor;
}
}
......@@ -21,42 +21,42 @@
// Accent colors
// -------------------------
@blue: #15C;
@blue: #029ACF;
@blueDark: #043755;
@green: #3D9400;
@red: #E32C3B;
@yellow: #FFCA27;
@orange: #FF6600;
@orange: #DA370F;
@pink: #ED2590;
@purple: #9B479F;
// Scaffolding
// -------------------------
@bodyBackground: #F3F3F3;
@bodyBackground: #F7F7F7;
@textColor: @gray;
// Links
// -------------------------
@linkColor: #366DDC;
@linkColorHover: darken(@linkColor, 15%);
@linkColor: @orange;
@linkColorHover: @linkColor;
// Typography
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@sansFontFamily: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 13px;
@baseFontSize: 15px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 18px;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: @grayDark; // empty to use BS default, @textColor
@headingsColor: inherit; // empty to use BS default, @textColor
// Tables
......@@ -73,20 +73,20 @@
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: darken(@white, 20%);
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnPrimaryBackground: lighten(@linkColor, 5%);
@btnPrimaryBackgroundHighlight: @linkColor;
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnInfoBackground: lighten(#5bc0de, 5%);
@btnInfoBackgroundHighlight: #5bc0de;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnSuccessBackground: lighten(@green, 5%);
@btnSuccessBackgroundHighlight: @green;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnWarningBackground: lighten(@yellow, 5%);
@btnWarningBackgroundHighlight: @yellow;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnDangerBackground: lighten(@red, 5%);
@btnDangerBackgroundHighlight: @red;
@btnInverseBackground: @gray;
@btnInverseBackgroundHighlight: @grayDarker;
......@@ -104,9 +104,9 @@
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @linkColor;
@dropdownLinkColor: @textColor;
@dropdownLinkColorHover: @linkColor;
@dropdownLinkBackgroundHover: #FBEBE9;
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
......@@ -146,13 +146,13 @@
// Navbar
// -------------------------
@navbarHeight: 40px;
@navbarBackground: #F8F8F8;
@navbarBackground: #fefefe;
@navbarBackgroundHighlight: @navbarBackground;
@navbarText: @gray;
@navbarLinkColor: @gray;
@navbarLinkColorHover: @grayDark;
@navbarLinkColorActive: @navbarLinkColorHover;
@navbarLinkColorHover: @orange;
@navbarLinkColorActive: @orange;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: @navbarBackground;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment