Skip to content

Commit

Permalink
Add consistent colors
Browse files Browse the repository at this point in the history
  • Loading branch information
Mauko Quiroga committed Jan 31, 2017
1 parent 37ed011 commit b22b94e
Show file tree
Hide file tree
Showing 60 changed files with 414 additions and 237 deletions.
3 changes: 3 additions & 0 deletions .scss-lint.yml
View file
Expand Up @@ -7,5 +7,8 @@ linters:
PlaceholderInExtend:
enabled: false

SelectorDepth:
max_depth: 4

StringQuotes:
style: double_quotes
3 changes: 2 additions & 1 deletion app/assets/stylesheets/_layouts.scss
View file
@@ -1,6 +1,7 @@
/* Site layout styles go here */
@charset "UTF-8";

/* Site layout styles go here */

header {
font-size: 1rem;
}
Expand Down
3 changes: 2 additions & 1 deletion app/assets/stylesheets/_states.scss
View file
@@ -1,6 +1,7 @@
/* Site state styles go here */
@charset "UTF-8";

/* Site state styles go here */

.is-active {
@extend .active;
}
2 changes: 2 additions & 0 deletions app/assets/stylesheets/_transitional.scss
View file
@@ -1,3 +1,5 @@
@charset "UTF-8";

/* Stuff you're testing */

/* Feature: How does it work? */
Expand Down
5 changes: 3 additions & 2 deletions app/assets/stylesheets/application.scss
View file
@@ -1,8 +1,9 @@
/* Site's styles, inspired by SMACSS */
@charset "UTF-8";

/* Site's styles, inspired by SMACSS */

@import "globals/all",
"base",
"base/all",
"layouts",
"prouns/all",
"states",
Expand Down
8 changes: 8 additions & 0 deletions app/assets/stylesheets/base/_all.scss
View file
@@ -0,0 +1,8 @@
@charset "UTF-8";

/* Base site styles go here */

@import "base/document",
"base/media",
"base/table",
"base/typography";
17 changes: 17 additions & 0 deletions app/assets/stylesheets/base/_document.scss
View file
@@ -0,0 +1,17 @@
@charset "UTF-8";

/* Document related base styles go here */

html {
overflow-x: hidden;

@media (max-width: $screen-sm-min) {
overflow-x: scroll;
}
}

body {
@extend .container-fluid;
padding-left: 0;
padding-right: 0;
}
8 changes: 8 additions & 0 deletions app/assets/stylesheets/base/_media.scss
View file
@@ -0,0 +1,8 @@
@charset "UTF-8";

/* Media related base styles go here */

img {
@extend .img-responsive;
margin: 0 auto;
}
24 changes: 24 additions & 0 deletions app/assets/stylesheets/base/_table.scss
View file
@@ -0,0 +1,24 @@
@charset "UTF-8";

/*
Table related base styles go here
Styleguide 1.1.
*/

table {
@extend .table;
@extend .table-hover;
@extend .table-responsive;


tbody > tr {
th,
td {
border-top: $black-alpha-12 solid .1em;
}
}

thead > tr > th {
border-bottom: 0;
}
}
31 changes: 3 additions & 28 deletions app/assets/stylesheets/_base.scss → app/assets/stylesheets/base/_typography.scss
View file
@@ -1,13 +1,10 @@
/* Base site styles go here */
@charset "UTF-8";

/* Typography related base styles go here */

/* Responsive font-size */
html {
font-size: $font-size-base-xs;
overflow-x: hidden;

@media (max-width: $screen-sm-min) {
overflow-x: scroll;
}

@media (min-width: $screen-sm-min) {
font-size: $font-size-base-sm;
Expand All @@ -22,28 +19,6 @@ html {
}
}

body {
@extend .container-fluid;
padding-left: 0;
padding-right: 0;
}

img {
@extend .img-responsive;
margin: 0 auto;
}

table {
@extend .table;
@extend .table-hover;
@extend .table-striped;
@extend .table-responsive;

* {
border: 0;
}
}

h1 {
@extend .text-center;
font-weight: $headings-font-weight * 2;
Expand Down
2 changes: 2 additions & 0 deletions app/assets/stylesheets/globals/_all.scss
View file
@@ -1,5 +1,7 @@
@charset "UTF-8";

/* Site global styles go here */

@import "globals/variables/all",
"globals/functions",
"globals/mixins";
Expand Down
5 changes: 3 additions & 2 deletions app/assets/stylesheets/globals/_functions.scss
View file
@@ -1,7 +1,8 @@
/* Global functions go here */
@charset "UTF-8";

// Converts pixels to ems
/* Global functions go here */

/* Converts pixels to ems */
@function em($pixels, $font-size) {
@return ($pixels / $font-size) * 1em;
}
8 changes: 5 additions & 3 deletions app/assets/stylesheets/globals/_mixins.scss
View file
@@ -1,6 +1,7 @@
/* Global mixins go here */
@charset "UTF-8";

/* Global mixins go here */

/* Open Sans @font-face mixin */
@mixin open-sans-font-face($font, $svgid, $weight: normal, $style: normal) {
@font-face {
Expand Down Expand Up @@ -29,8 +30,9 @@
font-style: normal;
}
}

/* Shadows */
@mixin shadow() {
box-shadow: 0 1px 2px 0 $transparent-alpha-20,
0 1px 3px 0 $transparent-alpha-19;
box-shadow: 0 1px 2px 0 $black-alpha-38,
0 1px 3px 0 $black-alpha-12;
}
5 changes: 4 additions & 1 deletion app/assets/stylesheets/globals/variables/_all.scss
View file
@@ -1,4 +1,7 @@
@charset "UTF-8";

@import "globals/variables/application",
/* Site global variables go here */

@import "globals/variables/colour",
"globals/variables/typography",
"globals/variables/bootstrap";
19 changes: 0 additions & 19 deletions app/assets/stylesheets/globals/variables/_application.scss
View file

This file was deleted.

79 changes: 35 additions & 44 deletions app/assets/stylesheets/globals/variables/_bootstrap.scss
View file
@@ -1,34 +1,31 @@
/* Theme variables go here. Hey, hi Bootstrap! */
@charset "UTF-8";

/* Theme variables go here. Hey, hi Bootstrap! */

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-darkest: hsl(210, 16%, 0) !default; // #000000
$gray-darker: hsl(210, 16%, 2.5%) !default; // #050607
$gray-dark: hsl(210, 16%, 12.5%) !default; // #1B2025
$gray-darkish: hsl(210, 16%, 28%) !default; // #3C4753
$gray: hsl(210, 16%, 50%) !default; // #6B8094
$gray-lightish: hsl(210, 16%, 72%) !default; // #ACB8C3
$gray-light: hsl(210, 16%, 87.5%) !default; // #DADFE4
$gray-lighter: hsl(210, 16%, 97.5%) !default; // #F8F9FA
$gray-lightest: hsl(210, 16%, 100) !default; // #FFFFFF

$brand-primary: hsl(20, 80%, 45%) !default; // #E54C00
$brand-success: hsl(135, 19%, 60%) !default; // #73B82E
$brand-info: hsl(200, 60%, 45%) !default; // #2E8AB8
$brand-warning: hsl(35, 60%, 45%) !default; // #B87E2E
$brand-danger: hsl(0, 60%, 45%) !default; // #B82E2E
$gray-darker: $default-fortissimo !default;
$gray-dark: $default-forte !default;
$gray: $default-base !default;
$gray-light: $default-piano !default;
$gray-lighter: $default-pianissimo !default;

$brand-primary: $primary-base !default;
$brand-success: $success-base !default;
$brand-info: $info-base !default;
$brand-warning: $warning-base !default;
$brand-danger: $danger-base !default;

//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg: $gray-lightest !default;
$body-bg: $white !default;
//** Global text color on `<body>`.
$text-color: $gray-darker !default;
$text-color: $black-alpha-87 !default;

//** Global textual link color.
$link-color: $brand-primary !default;
Expand Down Expand Up @@ -93,77 +90,71 @@ $table-cell-padding: 8px !default;
$table-condensed-cell-padding: 5px !default;

//** Default background color used for all tables.
$table-bg: transparent !default;
//** Background color used for `.table-striped`.
$table-bg-accent: $gray-lighter !default;
$table-bg: $body-bg !default;
//** Background color used for `.table-hover`.
$table-bg-hover: darken($gray-lighter, 2%) !default;
$table-bg-active: $table-bg-hover !default;

//** Border color for table and cell borders.
$table-border-color: transparent !default;
$table-bg-hover: $gray-lighter !default;

//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.

$btn-font-weight: normal !default;

$btn-default-color: $gray-lightest !default;
$btn-default-bg: $gray-darkish !default;
$btn-default-border: $white-alpha-0 !default;
$btn-default-color: $black-alpha-87 !default;
$btn-default-bg: $gray-light !default;
$btn-default-border: $white-alpha-12 !default;

$btn-primary-color: $btn-default-color !default;
$btn-primary-color: $white !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-default-border !default;

$btn-success-color: $btn-default-color !default;
$btn-success-color: $btn-primary-color !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-default-border !default;

$btn-info-color: $btn-default-color !default;
$btn-info-color: $btn-primary-color !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-default-border !default;

$btn-warning-color: $btn-default-color !default;
$btn-warning-color: $btn-primary-color !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-default-border !default;

$btn-danger-color: $btn-default-color !default;
$btn-danger-color: $btn-primary-color !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-default-border !default;

$btn-link-disabled-color: $gray-light !default;
$btn-link-disabled-color: $black-alpha-38 !default;

//== Forms
//
//##

//** Text color for `<input>`s
$input-color: $gray !default;
$input-color: $gray-light !default;

//== Navbar
//
//##

// Basics of a navbar
$navbar-default-color: $btn-default-color !default;
$navbar-default-bg: $gray-darkish !default;
$navbar-default-border: $white-alpha-0 !default;
$navbar-default-color: $btn-primary-color !default;
$navbar-default-bg: $primary-forte !default;
$navbar-default-border: $white-alpha-12 !default;

// Navbar links
$navbar-default-link-color: $navbar-default-color !default;
$navbar-default-link-hover-color: $navbar-default-color !default;
$navbar-default-link-hover-bg: darken($navbar-default-bg, 13%) !default;
$navbar-default-link-hover-bg: darken($navbar-default-bg, 6.5) !default;
$navbar-default-link-active-color: $navbar-default-color !default;
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
$navbar-default-link-disabled-color: $gray-light !default;
$navbar-default-link-disabled-bg: $navbar-default-border !default;
$navbar-default-link-active-bg: darken($navbar-default-bg, 2.5) !default;
$navbar-default-link-disabled-color: $white-alpha-30 !default;
$navbar-default-link-disabled-bg: $white-alpha-12 !default;

// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-bg: $brand-primary !default;
$navbar-default-brand-hover-bg: $navbar-default-link-hover-bg !default;

// Navbar toggle
$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg !default;
Expand Down

0 comments on commit b22b94e

Please sign in to comment.