Skip to content
This repository has been archived by the owner on Dec 23, 2017. It is now read-only.

Commit

Permalink
Merge pull request #8 from 18F/new-styles
Browse files Browse the repository at this point in the history
Adding in all those new styles
  • Loading branch information
theresaanna committed Dec 5, 2014
2 parents 9db7e5f + 5809aac commit c8eeca9
Show file tree
Hide file tree
Showing 35 changed files with 1,069 additions and 801 deletions.
6 changes: 3 additions & 3 deletions static/js/modules/navs.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ var navClickHandler = function(e) {
};

var changeActiveNavLink = function(category) {
$('.page-nav__item').removeClass('active');
$('.page-nav__item[name=' + category + ']').addClass('active');
$('.page-nav__link').removeClass('active');
$('.page-nav__link[name=' + category + ']').addClass('active');

$('#main').data('section', category);
};
Expand All @@ -34,7 +34,7 @@ var hideNav = function() {
module.exports = {
init: function() {
var section = $('#main').data('section');
$('a.page-nav__item').on('click', navClickHandler);
$('a.page-nav__link').on('click', navClickHandler);
$('.browse-links a').on('click', navClickHandler);

events.on('render:browse', renderHandler);
Expand Down
3 changes: 1 addition & 2 deletions static/styles/_base/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
@import 'variables';

// Mixins
@import 'mixins/flash';
@import 'mixins/icon';
@import 'mixins/mixins';

// Extends
@import 'extends/button';
Expand Down
2 changes: 1 addition & 1 deletion static/styles/_base/_buttons.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@mixin button($bgcolor, $textcolor, $hoverbg, $hovertext) {
@include appearance(none);
@include transition(background-color .1s);
@include font-size(1.6);
-webkit-font-smoothing: antialiased;
background: $bgcolor;
border-radius: $base-border-radius;
border: none;
display: inline-block;
color: $textcolor;
font-size: $base-font-size;
font-weight: bold;
text-align: center;
line-height: 1;
Expand Down
52 changes: 18 additions & 34 deletions static/styles/_base/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ fieldset {
input,
label,
select {
@include font-size($form-font-size);
display: block;
font-family: $form-font-family;
font-size: $form-font-size;
}

label {
Expand All @@ -26,21 +26,21 @@ label {
}

#{$all-text-inputs} {
height: 2rem;
@include rem(height, 3.2rem);
}

textarea,
#{$all-text-inputs},
select[multiple=multiple] {
@include box-sizing(border-box);
@include transition(border-color);
@include font-size($form-font-size);
background-color: white;
border-radius: $form-border-radius;
border: 1px solid $form-border-color;
box-shadow: $form-box-shadow;
font-family: $form-font-family;
font-size: $form-font-size;
padding: .5rem 1rem;
padding: .5em 1em;
width: 100%;

&:hover {
Expand Down Expand Up @@ -93,34 +93,18 @@ select {
float: left;
border-radius: 0 $base-border-radius $base-border-radius 0;
}
}

// Overriding Chosen styles
// .chosen-container-single .chosen-single {
// background: #fff;
// border-radius: $base-border-radius;
// padding: .5rem 1rem;
// height: 2rem;
// font-size: $form-font-size;
// line-height: 1;
// color: $base-font-color;
//
// }
//
// .chosen-container-active.chosen-with-drop .chosen-single {
// background: #fff;
// }
//
// // Chosen select toggle
// .chosen-container-single .chosen-single div {
// width: 32px;
// background-color: $dark-gray;
//
// b {
// content: "\e62a";
// color: #fff;
// @include icon();
// background: none;
//
// }
// }
@include media($medium) {
#{$all-text-inputs} {
width: 60%;
float: left;
border-radius: $base-border-radius 0 0 $base-border-radius;
}

input[type="submit"] {
width: 40%;
float: left;
border-radius: 0 $base-border-radius $base-border-radius 0;
}
}
}
6 changes: 0 additions & 6 deletions static/styles/_base/_grid-settings.scss

This file was deleted.

20 changes: 12 additions & 8 deletions static/styles/_base/_typography.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
html {
font-size: 62.5%;
}

body {
@include font-size(1.4);
-webkit-font-smoothing: antialiased;
background-color: $base-background-color;
color: $base-font-color;
font-family: $base-font-family;
font-size: $base-font-size * .875;
line-height: $unitless-line-height;
}

Expand All @@ -15,32 +19,32 @@ h1, h2, h3, h4, h5, h6 {
}

h1 {
font-size: $base-font-size * 3.125;
@include font-size(4.8);
font-weight: 300;
}

h2 {
font-size: $base-font-size * 2.5;
@include font-size(3.6);
font-weight: 300;
margin-bottom: 1rem;
}

h3 {
font-size: $base-font-size * 2;
@include font-size(3.2);
font-weight: 400;
}

h4 {
font-size: $base-font-size * 1.25;
@include font-size(2.4);
font-weight: 400;
}

h5 {
font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px
@include font-size(2.0);
}

h6 {
font-size: $base-font-size;
@include font-size(1.8);
}

p {
Expand Down Expand Up @@ -94,7 +98,7 @@ cite {
// Universal text classes

.lead-text {
font-size: $base-font-size * 1.125;
@include font-size(1.8);
}

.query {
Expand Down
3 changes: 1 addition & 2 deletions static/styles/_base/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ $base-font-family: $sans-serif;
$header-font-family: $base-font-family;

// Sizes
$base-font-size: 1rem;
$base-line-height: 1.5;
$unitless-line-height: $base-line-height / ($base-line-height * 0 + 1); // Strip units from line-height: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values
$header-line-height: 1.25;
Expand Down Expand Up @@ -69,5 +68,5 @@ $form-border-color-focus: $base-accent-color;
$form-border-radius: $base-border-radius;
$form-box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
$form-box-shadow-focus: $form-box-shadow, 0 0 0 rgba(darken($form-border-color-focus, 5), 0.7);
$form-font-size: $base-font-size * .875;
$form-font-size: 1.4;
$form-font-family: $base-font-family;
15 changes: 0 additions & 15 deletions static/styles/_base/mixins/_flash.scss

This file was deleted.

16 changes: 0 additions & 16 deletions static/styles/_base/mixins/_icon.scss

This file was deleted.

102 changes: 102 additions & 0 deletions static/styles/_base/mixins/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/*
* Global mixins.
*/

/*
* Sets the font-size in rems with a px fallback.
*/
@mixin font-size($sizeValue: 1.6) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}

@mixin u-visually_hidden {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}

/*
* Parses a text value to an int.
*/
@function parseInt($n) {
@return $n / ($n * 0 + 1);
}

/*
* Sets the property to the values in rem, with a px fallback for old browsers.
*
* $property The css property to set the values on
* $values A list of rem values to set on the property.
*
* Example: @include rem(margin, 1rem 0 2rem);
*/
@mixin rem($property, $values) {
$px : ();
$rem: ();

@each $value in $values {

@if $value == 0 or $value == auto {
$px : append($px , $value);
$rem: append($rem, $value);
}

@else {
$unit: unit($value);
$val: parseInt($value);

@if $unit == "px" {
$px : append($px, $value);
$rem: append($rem, ($val / 10 + rem));
}

@if $unit == "rem" {
$px : append($px, ($val * 10 + px));
$rem: append($rem, $value);
}
}
}

@if $px == $rem {
#{$property}: $px;
} @else {
#{$property}: $px;
#{$property}: $rem;
}
}

// Mixin for generating flash messages - comes with bitters

@mixin flash($color) {
background: $color;
color: darken($color, 60);
font-weight: bold;
margin-bottom: $base-line-height / 2;
padding: $base-line-height / 2;

a {
color: darken($color, 70);

&:hover {
color: darken($color, 90);
}
}
}

// Mixin that gives all of the styles necessary to put a themify icon into CSS
// Using the content property

@mixin icon() {
font-family: 'themify';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
36 changes: 36 additions & 0 deletions static/styles/_components/_alerts.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// MODULE: Alerts
.vex.vex-theme-default {
background-color: rgba(#fff, .5);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;

.vex-overlay {
@include outer-container();
}

.vex-content {
@include font-size(1.8);
background-color: $licorice-2;
color: #fff;
border-left: 10px solid $red;
border-radius: 0 $base-border-radius $base-border-radius 0;
box-shadow: 0 0 2px 0px rgba(0,0,0,.5);
font-family: $sans-serif;
}

.vex-dialog-buttons {
text-align: center;
}

.vex-dialog-button.vex-dialog-button-primary {
@extend .primary;
font-family: $sans-serif;
width: 50%;
display: inline-block;
float: none;
}

}
Loading

0 comments on commit c8eeca9

Please sign in to comment.