Skip to content

Commit

Permalink
Refactor CSS, HTML and views for Twitter bootstrap.
Browse files Browse the repository at this point in the history
  • Loading branch information
scotdalton committed Sep 26, 2012
1 parent 794ef03 commit 14c6ddd
Show file tree
Hide file tree
Showing 34 changed files with 1,055 additions and 662 deletions.
249 changes: 109 additions & 140 deletions app/assets/stylesheets/umlaut.css.scss
@@ -1,179 +1,148 @@
// Bootstrap Variables
$baseFontSize: 12px;
$baseLineHeight: 12px;
$linkColor: #0066CC;
// Umlaut Variables
// General Styles
$umlautBorderColor: #EEB211;
$umlautBackgroundColor: #FFFDEA;
// A-Z List
$umlautAzLinkColor: $linkColor;
$umlautAzBorderColor: #bbb;
$umlautAzBackground: #eee;
@import "umlaut/variables";
@import "bootstrap";
@import "bootstrap-responsive";
@mixin inner-padding {
padding: {
left: 20px;
right: 20px;
@import "umlaut/mixins";
@import "umlaut/reset";
@import "umlaut/forms";
@import "umlaut/misc";
@import "umlaut/az";
@import "umlaut/search";
@import "umlaut/results";
@import "umlaut/resolve";
@import "umlaut/admin";

.umlaut-container {
@extend .container;
margin: {
top: 10px;
bottom: 10px;
}
border: 1px solid $umlautBorderColor;
background: {
color: $umlautBackgroundColor;
}
}

body {
padding-left: 20px;
@media (max-width: 767px) {
.umlaut-container {
padding: {
left: 10px;
right: 10px;
}
}
}

h1 {
font: {
weight: bold;
size: $baseFontSize * 2;
}
line-height: $baseLineHeight * 3;


/*******************************/
/* Standard inteface devices */
/*******************************/

.background_progress_spinner {
line-height: 1.5em;
color: gray;
}

h2 {
@extend h1;
line-height: $baseLineHeight * 2;
.background_progress_spinner img {
vertical-align: bottom;
}

h3 {
@extend h1;
font: {
size: $baseFontSize * 1.5;
}
line-height: $baseLineHeight * 1.5;
.main_response_list .background_progress_spinner {
padding-left: 18px;
}

legend {
font: {
weight: bold;
}
.sidebar .background_progress_spinner {
padding-left: 10px;
}

label {
margin: {
left: 10px;
top: 10px;
bottom: 10px;
}
.resource_info .background_progress_spinner {
padding-left: 24px;
padding-top: 8px;
}

select {
height: auto; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: auto;
.expand_contract_toggle {
margin-top: 4px;
margin-bottom: 4px;
margin-left: -18px;
}

.umlaut-container {
padding: 0px;
margin: {
left: 20px;
right: 20px;
top: 10px;
bottom: 10px;
}
display: block;
border: 1px solid $umlautBorderColor;
background-color: $umlautBackgroundColor;
/* IE-only, IE doesn't like our negative margin
inside a table. Use that crazy '*' so only IE will see it. */
table .expand_contract_toggle {
*margin-left: 0;
}

.container-fluid {
@include inner-padding;
}

.header {
@include inner-padding;
border: {
bottom: 1px solid $umlautBorderColor;
}

.section_subheading {
margin-top: .75em;
margin-bottom: .75em;
}

.footer {
@include inner-padding;
margin: {
top: 10px;
}
padding: {
top: 10px;
bottom: 10px;
}
border: {
top: 1px solid $umlautBorderColor;
}
.expand_contract_content {
margin-top: 0.5em;
}

.citationLinker {
font-size:11px;
padding: 5px;
border: 1px solid #ebb211;
background-color: $umlautAzBackground;
margin-bottom: 12px;
margin-top: 12px;
a:link {
color : #666;
}
.row-fluid {
margin-bottom: $baseLineHeight;
}
div.expand_contract_section {
margin-top: 0.25em;
}

.azNav {
margin-top: $baseLineHeight;
margin-bottom: $baseLineHeight;
a {
font-size: 1.1em;
font-weight: bold;
padding:.15em .3em .15em .3em;
border: 1px solid $umlautAzBorderColor;
text-decoration: none;
color: $umlautAzLinkColor;
line-height: 2em;
&:hover {
background-color: $umlautAzBackground;
}
}
li.expand_contract_section {
margin: 0;
padding: 0;
background: none;
}

.separator {
border: {
top: 1px solid $umlautBorderColor;
}
padding: {
top: 15px;
}


img.toggle_icon {
border: none;
vertical-align: middle;
margin-right: 2px;
}

.search_citation {
border-bottom: 1px solid #e9e9e9;
.content {
font-size: 12px;
padding: 10px;
}

dl.citation {
dt, dd {
padding: {
top: 5px;
}
}

.holding_heading_row {
border-top: 1px solid #E9E9E9;
padding-right: 18px;
padding-top: 4px;
padding-bottom: 0px;
}
.citation_link {
padding: {
top: 15px;
}
text-align: right;
.holding tr:first-child > td.holding_heading_row {
border-top: none;
padding-top: 0px;
}

.form-inline {
.control-group {
display: inline;
}
}

@media (max-width: 767px) {
.citation_link {
text-align: left;
}
.form-inline {
.control-group {
display: block;
}
}
/***********************/
/* Autocomplete styles */
/***********************/

div.auto_complete {
width: 350px;
background: #fff;
}
div.auto_complete ul {
border:1px solid #888;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.auto_complete ul li {
margin:0;
padding:3px;
}
div.auto_complete ul li.selected {
background-color: #ffb;
}
div.auto_complete ul strong.highlight {
color: #800;
margin:0;
padding:0;
}
43 changes: 43 additions & 0 deletions app/assets/stylesheets/umlaut/_admin.scss
@@ -0,0 +1,43 @@
// ADMIN SCREENS
// Most of admin screen CSS is about _undoing_ general customizations
// umlaut css (or over-eager reset.css we're using, bah)
// did to all HTML elements, oops.

.admin {
padding: 1em;
h1 {
margin: {
top: .67em;
bottom: .67em;
}
}

h2 {
margin: {
top: 1em;
bottom: .5em;
}
}

ul {
list-style-type: disc;
padding-left: 40px;
}

form {
margin-bottom: 1em;
}

table {
margin-top: 2em;
border-spacing: 0;
}

td {
padding: 6px 8px;
}

tr.dispatch_line td {
border-top: 1px grey solid;
}
}
16 changes: 16 additions & 0 deletions app/assets/stylesheets/umlaut/_az.scss
@@ -0,0 +1,16 @@
.umlaut-az {
margin-top: $baseLineHeight;
margin-bottom: $baseLineHeight;
a {
font-size: 125%;
font-weight: bold;
padding:.15em .3em .15em .3em;
border: 1px solid $umlautAzBorderColor;
text-decoration: none;
color: $umlautAzLinkColor;
line-height: 2em;
&:hover {
background-color: $umlautAzHoverBackground;
}
}
}
16 changes: 16 additions & 0 deletions app/assets/stylesheets/umlaut/_forms.scss
@@ -0,0 +1,16 @@
.form-inline {
.control-group {
display: inline;
}
}

@media (max-width: 767px) {
.umlaut-citation-link {
text-align: left;
}
.form-inline {
.control-group {
display: block;
}
}
}
19 changes: 19 additions & 0 deletions app/assets/stylesheets/umlaut/_misc.scss
@@ -0,0 +1,19 @@
.umlaut-separator {
border-top: 1px solid $umlautBorderColor;
padding: {
top: 15px;
}
}

.text-small {
font: {
size: $smallFontSize
}
}

.text-large {
font: {
size: $largeFontSize
}
}

6 changes: 6 additions & 0 deletions app/assets/stylesheets/umlaut/_mixins.scss
@@ -0,0 +1,6 @@
@mixin umlaut-container-padding {
padding: {
left: 20px;
right: 20px;
}
}

0 comments on commit 14c6ddd

Please sign in to comment.