From 16e5586106913f8cb7940fb077aea14ffceee841 Mon Sep 17 00:00:00 2001 From: Sahat Yalkabov Date: Thu, 26 Jun 2014 13:14:00 -0400 Subject: [PATCH] modern theme, first draft --- public/css/themes/modern.less | 143 ++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 public/css/themes/modern.less diff --git a/public/css/themes/modern.less b/public/css/themes/modern.less new file mode 100644 index 0000000000..0cd9e84412 --- /dev/null +++ b/public/css/themes/modern.less @@ -0,0 +1,143 @@ +// Colors +// ------------------------- + +@gray-lighter: #f0f0f0; +@gray-light: #e0e0e0; +@gray: #737373; +@gray-dark: #404040; + +@brand-primary: #3372df; +@brand-success: #0f9d58; +@brand-warning: #f4b400; +@brand-danger: #cb4437; +@brand-info: #5bc0dd; + +// Typography +// ------------------------- + +@text-color: @gray-dark; +@headings-font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", Arial, sans-serif; +@text-muted: @gray; +@link-color: @brand-primary; + +// Buttons +// ------------------------- + + +@btn-default-border: #e6e6e6; +@btn-default-color: #3372df; +@btn-primary-border: darken(@brand-primary, 8%); +@btn-success-border: darken(@brand-success, 8%); +@btn-warning-border: darken(@brand-warning, 8%); +@btn-danger-border: darken(@brand-danger, 8%); +@btn-info-border: darken(@brand-info, 8%); + +.btn { + font-size: 16px; + border-radius: 0; + padding: 12px 32px; + + &:focus { + outline: none; + } + + +} + +.btn-default, +.btn-primary, +.btn-success, +.btn-warning, +.btn-danger, +.btn-info { + &:hover { + color: #fff; + background-color: #4d4d4d; + } +} + +.btn-social { + padding: 12px 64px; + + :first-child { + width: 48px; + line-height: 48px; + } +} + +.btn-link { + text-decoration: underline; + + &:hover { + color: #3372df; + text-decoration: none; + } +} + + +// Forms +// ------------------------- + +@input-border-radius: 0; +@input-border-focus: #2598f9; + +.form-control:focus { + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset; +} + +// Form states and alerts +// ------------------------- + +@state-success-text: #569845; +@state-success-bg: #dbf5d3; +@state-success-border: #aed3a5; + +@state-info-text: #3a87ad; +@state-info-bg: #d9edf7; +@state-info-border: #98cce7; + +@state-warning-text: #bf9853; +@state-warning-bg: #fdf8e2; +@state-warning-border: #f2daab; + +@state-danger-text: #b94a48; +@state-danger-bg: #f2dede; +@state-danger-border: #e0b1b8; + +// Alerts +// ------------------------- + +.alert { + border-radius: 0; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); +} + +// Navbar +// ------------------------- + +@navbar-default-bg: #4285f4; +@navbar-default-link-color: #fff; +@navbar-default-link-hover-color: #fff; +@navbar-default-link-active-color: #fff; +@navbar-default-link-hover-bg: rgba(255,255,255,0.2); +@navbar-default-link-active-bg: rgba(255,255,255,0.2); +@navbar-default-color: #fff; +@navbar-default-brand-hover-color: #fff; +@navbar-default-toggle-icon-bar-bg: #fff; +@navbar-default-toggle-hover-bg: rgba(255,255,255,0.2); + +.navbar-default { + border: 0; + + .navbar-brand { + font-weight: 300; + } + + .navbar-nav { + > li > a { + font-size: 16px; + font-weight: 300; + transition: background-color 0.2s ease-out; + } + } +}