Browse Source

refactor, normalize

pull/1/head
Nicolae Claudius 13 years ago
parent
commit
dd107f4115
  1. 21
      app/assets/stylesheets/application.css
  2. 386
      app/assets/stylesheets/normalize.css
  3. 16
      app/assets/stylesheets/overrides.css.erb
  4. 412
      app/assets/stylesheets/theme/base.css

21
app/assets/stylesheets/application.css.erb → app/assets/stylesheets/application.css

@ -2,25 +2,10 @@
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require web-app-theme/base
*= require normalize
*= require theme/base
*= require web-app-theme/themes/default/style.css
*= require active_scaffold
*= require overrides
*= require_self
*/
#main .block .content h2 {
margin-left: 0;
}
#main .block .content .active-scaffold-header h2 {
font-size: 200%;
}
#main .active-scaffold th a {
text-shadow: none;
}
.flash .alert {
border: 1px solid #bb9004;
background: #f9c006 url("<%= asset_path("web-app-theme/themes/default/images/messages/warning.png") %>") no-repeat 10px center;
}

386
app/assets/stylesheets/normalize.css vendored

@ -0,0 +1,386 @@
/* =============================================================================
normalize.css
2011-07-06T20:20 UTC
//github.com/jonathantneal/normalize.css
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
How comment documentation is written:
Comments: (anchor) (type of change) (summary of issue) in (affected browsers)
Url: (url related to above comment)
To be concise, comments are restricted to a length of 77 characters or less.
What 'types of change' mean:
Addresses: Changes involving downgrades for greater cross-browser consistency
Corrects: Bug fixes and corrections to unexpected visual quirks
Improves: Improvements based on popular usage and html5 recommendation
========================================================================== */
/* =============================================================================
Base
========================================================================== */
/*
* Corrects block display not defined in IE6/7/8/9 & FF3
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
/*
* 1. Improves visual focus of mouse in all browsers
* 2. Corrects text resizing oddly when font size is set using ems in IE6/7
* http://clagnut.com/blog/348/#c790
* 3. Corrects page centering in all browsers regardless of content height
* 4. Improves visual appearance of containers during a delegated click in mSaf
* www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
* 5. Corrects text resizing oddly after orientation change in all handhelds
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
*/
html {
cursor: default; /* 1 */
font-size: 100%; /* 2 */
overflow-y: scroll; /* 3 */
-webkit-tap-highlight-color: transparent; /* 4 */
-ms-text-size-adjust: 100%; /* 5 */
-webkit-text-size-adjust: 100%; /* 5 */
}
/*
* 1. Addresses text resizing limitations in IE6/7
* Improves text sizing inconsistency in all browsers
* Known issue: text sizing unnecessary for 'form'
* 2. Improves margins set oddly in IE6/7 FF3/4 S5 C10
*/
body,
form,
input,
button,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
}
/* =============================================================================
Links
========================================================================== */
/*
* Improves appearance when active or hovered in all browsers
* people.opera.com/patrickl/experiments/keyboard/test
*/
a,
a:active,
a:hover {
outline: none;
}
/*
* Addresses outline set oddly in C10
*/
a:focus {
outline: thin dotted;
}
/* =============================================================================
Typography
========================================================================== */
/*
* Corrects styling not present in IE6/7/8/9 S5 C10
*/
abbr {
_border-bottom: expression(this.title ? '1px dotted' : 'none');
}
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10
*/
b,
strong {
font-weight: bold;
}
/*
* Corrects styling not present in S5 C10
*/
dfn {
font-style: italic;
}
/*
* Corrects styling not present in IE6/7/8/9
*/
mark {
background: #FF0;
color: #000;
}
/*
* Corrects font family displayed oddly in IE6 S5 C10
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
*/
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Addresses CSS quotes not supported in IE6/7
*/
q {
quotes: none;
}
/*
* Addresses quote property not supported in S4
*/
q:before,
q:after {
content: '';
content: none;
}
/*
* Improves appearance in all browsers
*/
small,
sub,
sup {
font-size: 75%;
}
/*
* Improves appearance in all browsers
* gist.github.com/413930
*/
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* =============================================================================
Lists
========================================================================== */
/*
* Improves appearance of navigation-specific lists
*/
nav ul {
list-style: none;
}
/* =============================================================================
Embedded content
========================================================================== */
/*
* Corrects display not defined in IE6/7/8/9 & FF3
*/
audio[controls],
canvas,
video {
display: inline-block;
*display: inline;
}
audio {
display: none;
_display: expression(this.controls ? 'inline' : 'none');
*zoom: 1;
}
audio[controls] {
display: inline-block;
}
/*
* 1. Improves readability when inside 'a' in all browsers
* 2. Improves visual appearance when scaled in IE7
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Corrects overflow displayed oddly in IE9
*/
svg:not(:root) {
overflow: hidden;
}
/* =============================================================================
Forms
========================================================================== */
/*
* Corrects alignment displayed oddly in IE6/7
*/
legend {
*margin-left: -7px;
}
/*
* Improves appearance in all browsers
*/
button,
input,
select,
textarea {
-webkit-appearance: none;
border-radius: 0;
vertical-align: baseline;
*vertical-align: middle;
}
/*
* 1. Corrects FF3/4 setting it using !important in the UA stylesheet
* 2. Corrects spacing displayed oddly in IE6/7
* 3. Corrects inability to style clickable 'input' types in iOS
*/
button,
input {
line-height: normal; /* 1 */
_overflow: expression(this.type == 'button|reset|submit' ? 'visible' : ''); /* 2 */
}
/* 3 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
overflow: visible;
}
/*
* Addresses box sizing forced to border-box in IE6/7
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
}
/*
* Addresses sizing set oddly to searchfield in S5 iOS C10
* Known issue: -moz included to future-proof
*/
input[type="search"] {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
/*
* Addresses inner padding displayed oddly in S5 C10 on OSX
*/
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Corrects appearance displayed oddly in FF3/4
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Corrects scrollbar displayed oddly in IE6/7/8/9
* 2. Improves readability and alignment in all browsers
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* =============================================================================
Tables
========================================================================== */
/*
* Improves visual appearance in all browsers
*/
table {
border-collapse: collapse;
border-spacing: 0;
}

16
app/assets/stylesheets/overrides.css.erb

@ -0,0 +1,16 @@
#main .block .content h2 {
margin-left: 0;
}
#main .block .content .active-scaffold-header h2 {
font-size: 200%;
}
#main .block .content .active-scaffold th a {
text-shadow: none;
}
.flash .alert {
border: 1px solid #bb9004;
background: #f9c006 url(<%= asset_path("web-app-theme/themes/default/images/messages/warning.png") %>) no-repeat 10px center;
}

412
app/assets/stylesheets/theme/base.css

@ -0,0 +1,412 @@
/*
Override base to remove zero-reset.
*/
.clear { clear: both; height: 0; }
.wat-cf:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wat-cf {display: inline-block;}
/* Hides from IE-mac \*/
* html .wat-cf {height: 1%;}
.wat-cf {display: block;}
/* End hide from IE-mac */
h1 { margin: 15px 0; font-size: 22px; font-weight: normal; }
h2 { font-size: 22px; margin: 15px 0; font-weight: normal;}
h3 { font-size: 18px; margin: 10px 0; font-weight: normal;}
h4 { font-size: 16px; margin: 10px 0; font-weight: normal;}
hr {height: 1px; border: 0; }
p { margin: 15px 0;}
a img { border: none; }
body {
font-size: 12px;
font-family: sans-serif;
}
#container {
min-width: 960px;
}
#header, #wrapper {
padding: 0 20px;
}
#header {
position: relative;
padding-top: 1px;
}
#header h1 {
margin: 0;
padding: 10px 0;
font-size: 26px;
}
#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
text-decoration: none;
}
#main {
width: 70%;
float: left;
}
.actions-bar {
padding: 10px 1px;
}
.actions-bar .actions {
float: left;
}
.actions-bar .pagination {
float: right;
padding: 1px 0;
}
#sidebar {
width: 25%;
float: right;
}
#sidebar h3 {
padding: 10px 15px;
margin: 0;
font-size: 13px;
}
#sidebar .block {
margin-bottom: 20px;
padding-bottom: 10px;
}
#sidebar .block .content {
padding: 0 15px;
}
#sidebar ul.navigation li a:link, #sidebar ul.navigation li a:visited {
display: block;
padding: 10px 15px;
}
#sidebar .block .sidebar-block, #sidebar .notice {
padding:10px;
}
#wrapper {
padding-top: 20px;
}
#main .block {
margin-bottom: 20px;
padding-top: 1px;
}
#main .block .content .inner {
padding: 0 15px 15px;
}
#main .main p.first {
margin-top: 0;
}
#user-navigation {
position: absolute;
top: 0px;
right: 20px;
}
#main-navigation {
width: 100%;
}
#user-navigation ul, #main-navigation ul, .secondary-navigation ul, #sidebar ul.navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
#user-navigation ul li, #main-navigation ul li, .secondary-navigation ul li {
float: left;
}
#main-navigation ul li {
margin-right: 5px;
}
#user-navigation ul li {
padding: 5px 10px;
}
#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
text-decoration: none;
}
#main-navigation ul li a {
font-size: 14px;
line-height: 14px;
display: block;
padding: 8px 15px;
}
.secondary-navigation {
font-size: 13px;
border-bottom-width: 10px;
border-bottom-style: solid;
}
.secondary-navigation ul li a {
display: block;
padding: 10px 15px;
}
#footer {
padding-bottom: 20px;
}
/* pagination */
.pagination a, .pagination span, .pagination em {
padding: 2px 5px;
margin-right: 5px;
display: block;
float: left;
border-style: solid;
border-width: 1px;
}
.pagination em {
font-weight: bold;
}
.pagination a {
text-decoration: none;
}
/* tables */
.table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
}
.table th {
padding: 10px;
font-weight: bold;
text-align: left;
}
.table th.first {
width: 30px;
}
.table th.last {
width: 200px;
}
.table .checkbox {
margin-left: 10px;
}
.table td {
padding: 10px;
}
.table td.last {
text-align: right;
}
/* forms */
input.checkbox {
margin: 0;
padding: 0;
}
.form .group {
margin-bottom: 15px;
}
.form div.left {
width: 20%;
float: left;
}
.form div.right {
width: 75%;
float: right;
}
.form .columns .column {
width: 48%;
}
.form .columns .left {
float: left;
}
.form .columns .right {
float: right;
}
.form label.label, .form input.text_field, .form textarea.text_area {
font-size: 1.2em;
padding: 1px 0;
margin: 0;
}
.form label.right {
text-align: right;
}
.form input.checkbox, .form input.radio {
margin-right: 5px;
}
.form label.checkbox, .form label.radio {
line-height: 1.5em;
}
.form label.label {
display: block;
padding-bottom: 2px;
font-weight: bold;
}
.form div.fieldWithErrors label.label {
display: inline;
}
.form .fieldWithErrors .error {
color: red;
}
.form input.text_field, .form textarea.text_area {
width: 100%;
border-width: 1px;
border-style: solid;
}
/* lists */
ul.list {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.list li {
clear: left;
padding-bottom: 5px;
}
ul.list li .left {
float: left;
}
ul.list li .left .avatar {
width: 50px;
height: 50px;
}
ul.list li .item {
margin-left: 80px;
}
ul.list li .item .avatar {
float: left;
margin: 0 5px 5px 0;
width: 30px;
height: 30px;
}
/* box */
#box {
width: 500px;
margin: 50px auto;
}
#box .block {
margin-bottom: 20px;
}
#box .block h2 {
padding: 10px 15px;
margin: 0;
}
#box .block .content {
padding: 10px 20px;
}
/* Inspired by http://particletree.com/features/rediscovering-the-button-element */
a.button:link, a.button:visited, a.button:hover, a.button:active, button.button {
color: #222;
display:block;
float:left;
margin:0 7px 0 0;
background-color: #eee;
border:1px solid #bfbfbf;
font-size: 1em;
line-height: 1.3em;
font-weight:bold;
cursor:pointer;
padding:5px 10px 6px 7px;
text-decoration: none;
}
button.button {
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
button.button[type] {
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button.button[type] {
padding:4px 10px 3px 7px; /* IE7 */
}
button.button img, a.button img {
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
button.button:hover, a.button:hover {
background-color:#dedede;
}
button.button:active, a.button:active {
background-color:#e5e5e5;
}
.text_button_padding{
color: #222222;
display: block;
float: left;
font-size: 1em;
line-height: 2em;
margin: 0 7px 0 0;
padding: 5px 0 6px 7px;
text-decoration: none;
}
.link_button{
cursor: pointer;
}
Loading…
Cancel
Save