Skip to content
Browse files

add cerulean theme from http://bootswatch.com/cerulean/

activate with RAILS_ADMIN_THEME='cerulean'
  • Loading branch information...
1 parent b8edd0e commit 299cf3d3d0ef584876ae78c9f9791bc6a33aab43 @bbenezech bbenezech committed
View
0 app/assets/javascripts/rails_admin/themes/cerulan/ui.js
No changes.
View
0 app/assets/stylesheets/rails_admin/themes/cerulan/mixins.css.scss
No changes.
View
97 app/assets/stylesheets/rails_admin/themes/cerulan/theming.css.scss
@@ -0,0 +1,97 @@
+// Bootswatch.less
+// Swatch: Cerulean
+// Version: 2.0.2
+// -----------------------------------------------------
+
+// TYPOGRAPHY
+// -----------------------------------------------------
+
+@import url(https://fonts.googleapis.com/css?family=Telex);
+
+.navbar, .subnav {
+ font-family: $headingsFontFamily;
+}
+
+// NAVBAR
+// -----------------------------------------------------
+
+.navbar-inner {
+ @include gradient-vertical-three-colors($navbarBackground, $navbarBackground, 90%, $navbarBackgroundHighlight);
+}
+
+.navbar .nav .active > a,
+.navbar .nav .active > a:hover {
+ background-color: $navbarBackground;
+ background-color: rgba(0,0,0,.2);
+}
+
+.navbar .search-query {
+ border: 1px solid darken($linkColor, 10%);
+}
+
+// responsive menu colors
+
+.navbar .nav-collapse.in > .nav > li .dropdown-menu a {
+ color: $white;
+
+ &:hover {
+ color: $white;
+ }
+}
+
+.navbar .nav-collapse.in .nav li > a {
+ color: $white;
+
+ &:hover {
+ background-color: #2B7CAC;
+ }
+}
+
+.btn-navbar:hover {
+ background-color: darken($white, 20%);
+}
+
+// BUTTONS
+// -----------------------------------------------------
+
+.btn {
+ @include gradient-vertical-three-colors($white, $white, 5%, darken($white, 0%));
+ $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+ @include box-shadow($shadow);
+
+ &:hover {
+ background-position: 0 0;
+ }
+}
+
+.btn-primary {
+ @include buttonBackground(lighten($btnPrimaryBackground, 5%), $btnPrimaryBackground);
+}
+
+.btn-info {
+ @include buttonBackground(lighten($btnInfoBackground, 5%), $btnInfoBackground);
+}
+
+.btn-success {
+ @include buttonBackground(lighten($btnSuccessBackground, 5%), $btnSuccessBackground);
+}
+
+.btn-warning {
+ @include buttonBackground(lighten($btnWarningBackground, 5%), $btnWarningBackground);
+}
+
+.btn-danger {
+ @include buttonBackground(lighten($btnDangerBackground, 5%), $btnDangerBackground);
+}
+
+.btn-inverse {
+ @include buttonBackground(lighten($btnInverseBackground, 5%), $btnInverseBackground);
+}
+
+// ICONS
+// -----------------------------------------------------
+
+// Make icons gray
+i[class^="icon-"]{
+ opacity: 0.8;
+}
View
168 app/assets/stylesheets/rails_admin/themes/cerulan/variables.css.scss
@@ -0,0 +1,168 @@
+// Variables.less
+// Variables to customize the look and feel of Bootstrap
+// Swatch: Cerulean
+// Version: 2.0.2
+// -----------------------------------------------------
+
+
+
+// GLOBAL VALUES
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black: #000;
+$grayDarker: #222;
+$grayDark: #333;
+$gray: #555;
+$grayLight: #999;
+$grayLighter: #F5F5F5;
+$white: #fff;
+
+
+// Accent colors
+// -------------------------
+$blue: #3E78B3;
+$blueDark: #033C73;
+$green: #73A839;
+$red: #C71C22;
+$yellow: #F7B42C;
+$orange: #DD5600;
+$pink: #F49AC1;
+$purple: #9760B3;
+
+
+// Scaffolding
+// -------------------------
+$bodyBackground: $white;
+$textColor: $gray;
+
+
+// Links
+// -------------------------
+$linkColor: #369BD7;
+$linkColorHover: darken($linkColor, 15%);
+
+
+// Typography
+// -------------------------
+$baseFontSize: 13px;
+$baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$baseLineHeight: 18px;
+$altFontFamily: Georgia, "Times New Roman", Times, serif;
+
+$headingsFontFamily: 'Telex', sans-serif; // empty to use BS default, $baseFontFamily
+$headingsFontWeight: bold; // instead of browser default, bold
+$headingsColor: #317EAC; // empty to use BS default, $textColor
+
+
+// Tables
+// -------------------------
+$tableBackground: transparent; // overall background-color
+$tableBackgroundAccent: #f9f9f9; // for striping
+$tableBackgroundHover: #f5f5f5; // for hover
+$tableBorder: #ddd; // table and cell border
+
+
+// Buttons
+// -------------------------
+$btnBackground: $white;
+$btnBackgroundHighlight: darken($white, 10%);
+$btnBorder: darken($white, 20%);
+
+$btnPrimaryBackground: $linkColor;
+$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 15deg);
+
+$btnInfoBackground: $purple;
+$btnInfoBackgroundHighlight: #2f96b4;
+
+$btnSuccessBackground: $green;
+$btnSuccessBackgroundHighlight: #51a351;
+
+$btnWarningBackground: $orange;
+$btnWarningBackgroundHighlight: $orange;
+
+$btnDangerBackground: $red;
+$btnDangerBackgroundHighlight: #bd362f;
+
+$btnInverseBackground: $yellow;
+$btnInverseBackgroundHighlight: $grayDarker;
+
+
+// Forms
+// -------------------------
+$inputBackground: $white;
+$inputBorder: #ccc;
+$inputDisabledBackground: $grayLighter;
+
+
+// Dropdowns
+// -------------------------
+$dropdownBackground: $white;
+$dropdownBorder: rgba(0,0,0,.2);
+$dropdownLinkColor: $grayDark;
+$dropdownLinkColorHover: $white;
+$dropdownLinkBackgroundHover: $linkColor;
+
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Input placeholder text color
+// -------------------------
+$placeholderText: $grayLight;
+
+
+// Hr border color
+// -------------------------
+$hrBorder: $grayLighter;
+
+
+// Navbar
+// -------------------------
+$navbarHeight: 40px;
+$navbarBackground: $linkColor;
+$navbarBackgroundHighlight: lighten($linkColor, 10%);
+
+$navbarText: $grayLighter;
+$navbarLinkColor: $grayLighter;
+$navbarLinkColorHover: $white;
+$navbarLinkColorActive: $navbarLinkColorHover;
+$navbarLinkBackgroundHover: transparent;
+$navbarLinkBackgroundActive: $navbarBackground;
+
+$navbarSearchBackground: lighten($navbarBackground, 25%);
+$navbarSearchBackgroundFocus: $white;
+$navbarSearchBorder: darken($navbarSearchBackground, 30%);
+$navbarSearchPlaceholderColor: $white;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground: $grayLighter;
+$heroUnitHeadingColor: inherit;
+$heroUnitLeadColor: inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText: darken($linkColor, 20%);
+$warningBackground: lighten($linkColor, 20%);
+$warningBorder: darken(adjust-hue($warningBackground, -10deg), 3%);
+
+$errorText: darken(#C45559, 5%);
+$errorBackground: #EDDBE3;
+$errorBorder: darken(adjust-hue($errorBackground, -10deg), 3%);
+
+$successText: darken($green, 5%);
+$successBackground: #CDB;
+$successBorder: darken(adjust-hue($successBackground, -10deg), 5%);
+
+$infoText: darken(#908A62, 5%);
+$infoBackground: #EDEBE1;
+$infoBorder: darken(adjust-hue($infoBackground, -10deg), 7%);
+

0 comments on commit 299cf3d

Please sign in to comment.
Something went wrong with that request. Please try again.