Commit 1899d114 authored by Jenil Gogari's avatar Jenil Gogari
Browse files

It became 'Flatness' and also flatter!

* Change name to 'Flatness'
* Removes overides on buttons and they are now addes in variables.less
* Button and Navbar get new look
* Small and mini buttons getting smaller font
* fixed duplicate icons issue
* Overall font size increased
* Alerts styles improved
parent 3b719b26
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
// Flat by Jenil(www.jgog.in)
// Flatness by Jenil(www.jgog.in)
// Bootswatch 2.3.1
// -----------------------------------------------------
......@@ -45,7 +45,12 @@ h6 {
// NAVBAR
// --------------------------------------------------
.navbar-inverse .navbar-search .search-query
{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
// NAVIGATION
// --------------------------------------------------
......@@ -55,12 +60,23 @@ h6 {
background-image: url("../img/glyphicons-halflings-white.png");
}
.navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus
{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav>li>a{
text-shadow: none !important;
font-size: 15px;
}
// BUTTONS
// --------------------------------------------------
.btn {
border: none;
background: #34495e;
background-image: none;
color: white;
font-size: 16.5px;
text-decoration: none;
......@@ -76,7 +92,6 @@ h6 {
}
.btn:hover,
.btn:focus {
background-color: #4e6d8d;
color: white;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
......@@ -86,7 +101,6 @@ h6 {
}
.btn:active,
.btn.active {
background-color: #2c3e50;
color: rgba(255, 255, 255, 0.75);
-webkit-box-shadow: none;
-moz-box-shadow: none;
......@@ -94,38 +108,12 @@ h6 {
}
.btn.disabled,
.btn[disabled] {
background-color: #95a5a6;
color: white;
}
.btn.btn-large {
padding-bottom: 12px;
padding-top: 13px;
}
.btn.btn-primary { background-color: #1abc9c }
.btn.btn-primary:hover,
.btn.btn-primary:focus { background-color: #2fe2bf }
.btn.btn-primary:active,
.btn.btn-primary.active { background-color: #16a085 }
.btn.btn-info { background-color: #3498db }
.btn.btn-info:hover,
.btn.btn-info:focus { background-color: #5dade2 }
.btn.btn-info:active,
.btn.btn-info.active { background-color: #2383c4 }
.btn.btn-danger { background-color: #e74c3c }
.btn.btn-danger:hover,
.btn.btn-danger:focus { background-color: #ec7063 }
.btn.btn-danger:active,
.btn.btn-danger.active { background-color: #dc2d1b }
.btn.btn-success { background-color: #2ecc71 }
.btn.btn-success:hover,
.btn.btn-success:focus { background-color: #55d98d }
.btn.btn-success:active,
.btn.btn-success.active { background-color: #27ad60 }
.btn.btn-warning { background-color: #f1c40f }
.btn.btn-warning:hover,
.btn.btn-warning:focus { background-color: #f4d03f }
.btn.btn-warning:active,
.btn.btn-warning.active { background-color: #cea70c }
.btn-toolbar .btn {
font-size: 18px;
padding: 10px 14px 9px;
......@@ -142,8 +130,8 @@ h6 {
}
.btn-toolbar .btn.active { color: white }
.btn [class^="icon-"], .btn [class*=" icon-"]{
background-image: url("../img/glyphicons-halflings-white.png");
.btn-small{
font-size: 12px;
}
// TABLES
// -----------------------------------------------------
......@@ -185,7 +173,9 @@ input[type="color"],
border-radius: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
textarea:-moz-placeholder,
input[type="text"]:-moz-placeholder,
input[type="password"]:-moz-placeholder,
......@@ -202,7 +192,8 @@ input[type="color"],
input[type="tel"]:-moz-placeholder,
input[type="color"]:-moz-placeholder,
.uneditable-input:-moz-placeholder {
color: #acb6c0; }
color: #acb6c0;
}
textarea::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
......@@ -219,7 +210,8 @@ input[type="color"],
input[type="tel"]::-webkit-input-placeholder,
input[type="color"]::-webkit-input-placeholder,
.uneditable-input::-webkit-input-placeholder {
color: #acb6c0; }
color: #acb6c0;
}
textarea.placeholder,
input[type="text"].placeholder,
input[type="password"].placeholder,
......@@ -236,7 +228,8 @@ input[type="color"],
input[type="tel"].placeholder,
input[type="color"].placeholder,
.uneditable-input.placeholder {
color: #acb6c0; }
color: #acb6c0;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
......@@ -256,7 +249,8 @@ input[type="color"],
border-color: #1abc9c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.error textarea, .control-group.error
input[type="text"], .control-group.error
input[type="password"], .control-group.error
......@@ -277,7 +271,8 @@ input[type="color"],
color: #e74c3c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.error textarea:focus, .control-group.error
input[type="text"]:focus, .control-group.error
input[type="password"]:focus, .control-group.error
......@@ -296,7 +291,8 @@ input[type="color"],
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.success textarea, .control-group.success
input[type="text"], .control-group.success
input[type="password"], .control-group.success
......@@ -317,7 +313,8 @@ input[type="color"],
color: #2ecc71;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.success textarea:focus, .control-group.success
input[type="text"]:focus, .control-group.success
input[type="password"]:focus, .control-group.success
......@@ -336,7 +333,8 @@ input[type="color"],
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.warning textarea, .control-group.warning
input[type="text"], .control-group.warning
input[type="password"], .control-group.warning
......@@ -357,7 +355,8 @@ input[type="color"],
color: #f1c40f;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.warning textarea:focus, .control-group.warning
input[type="text"]:focus, .control-group.warning
input[type="password"]:focus, .control-group.warning
......@@ -376,7 +375,8 @@ input[type="color"],
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.info textarea, .control-group.info
input[type="text"], .control-group.info
input[type="password"], .control-group.info
......@@ -397,7 +397,8 @@ input[type="color"],
color: #3498db;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.control-group.info textarea:focus, .control-group.info
input[type="text"]:focus, .control-group.info
input[type="password"]:focus, .control-group.info
......@@ -416,7 +417,8 @@ input[type="color"],
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
input[disabled],
input[readonly],
......@@ -437,6 +439,11 @@ input[type="file"]{
border-top-color: white;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a
{
background-image: none;
}
// ALERTS, LABELS, BADGES
// --------------------------------------------------
......@@ -479,22 +486,22 @@ input[type="file"]{
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.progress .bar-success{
.progress-success .bar{
background-color: #2ecc71;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.progress .bar-warning{
.progress-warning .bar{
background-color: #f1c40f;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.progress .bar-danger{
.progress-danger .bar{
background-color: #e74c3c;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.progress .bar-info{
.progress-info .bar{
background-color: #3498db;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
......
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootswatch: Flat</title>
<title>Bootswatch: Flatness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Flat and Clean.">
<meta name="author" content="Jenil Gogari">
......@@ -100,7 +100,7 @@
<header class="jumbotron subhead" id="overview">
<div class="row">
<div class="span6">
<h1>Flat</h1>
<h1>Flatness</h1>
<p class="lead">Flat and Clean</p>
</div>
<div class="span4 offset2">
......
// Flat by Jenil(www.jgog.in)
// Flatness by Jenil(www.jgog.in)
// Bootswatch 2.3.1
// --------------------------------------------------
......@@ -47,7 +47,7 @@
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontSize: 15px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
......@@ -83,18 +83,18 @@
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBackground: @gray;
@btnBackgroundHighlight: lighten(@btnBackground,10%);
@btnBorder: #bbb;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnPrimaryBackground: @textColor;
@btnPrimaryBackgroundHighlight: #4e6d8d;
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnInfoBackground: @blue;
@btnInfoBackgroundHighlight: #2383c4;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnSuccessBackground: @green;
@btnSuccessBackgroundHighlight: #55d98d;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
......@@ -102,14 +102,14 @@
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
@btnInverseBackground: @purple;
@btnInverseBackgroundHighlight: #9B59B6;
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: @grayLight;
@inputBorder: #dce4ec;
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: #eaeded;
@formActionsBackground: #f5f5f5;
......@@ -179,9 +179,9 @@
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarBackgroundHighlight: #34495e;
@navbarBackground: #34495e;
@navbarHeight: 50px;
@navbarBackgroundHighlight: @textColor;
@navbarBackground: @textColor;
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: @white;
......@@ -194,21 +194,21 @@
@navbarBrandColor: @navbarLinkColor;
// Inverted navbar
@navbarInverseBackground: @red;
@navbarInverseBackgroundHighlight: @red;
@navbarInverseBorder: #C0392B;
@navbarInverseText: @white;
@navbarInverseLinkColor: @white;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @yellow;
@navbarInverseBackground: @grayLighter;
@navbarInverseBackgroundHighlight: @grayLighter;
@navbarInverseBorder: @grayLight;
@navbarInverseText: @textColor;
@navbarInverseLinkColor: @textColor;
@navbarInverseLinkColorHover: @linkColor;
@navbarInverseLinkColorActive: @linkColor;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseLinkBackgroundActive: darken(@navbarInverseBackground, 5%);
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: @white;
@navbarInverseSearchBorder: @grayLight;
@navbarInverseSearchPlaceholderColor: @textColor;
@navbarInverseBrandColor: @navbarInverseLinkColor;
......@@ -229,20 +229,20 @@
// Form states and alerts
// -------------------------
@warningText: darken(@yellow, 3%);
@warningBackground: lighten(@warningText,40%);
@warningText: desaturate(@yellow,10%);
@warningBackground: desaturate(lighten(@yellow,45%),30%);
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: darken(@red, 3%);
@errorBackground: lighten(@errorText,40%);
@errorText: @red;
@errorBackground: desaturate(lighten(@red,42%),30%);
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #27AE60;
@successBackground: lighten(@successText,40%);
@successText: desaturate(@green,20%);
@successBackground: desaturate(lighten(@green,45%),30%);
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: darken(@blue, 3%);
@infoBackground: lighten(@infoText,40%);
@infoText: @blue;
@infoBackground: desaturate(lighten(@blue,43%),30%);
@infoBorder: darken(spin(@infoBackground, -10), 7%);
......
File mode changed from 100755 to 100644
// Swatch 2.3.1
//
// Variables
// --------------------------------------------------
......@@ -68,7 +68,7 @@
@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 1px 6px; // 24px
@paddingMini: 0 6px; // 22px
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
......@@ -86,7 +86,7 @@
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #bbb;
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
......@@ -126,7 +126,7 @@
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @dropdownLinkColor;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
......
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