impress/app/assets/stylesheets/_layout.sass

246 lines
4.3 KiB
Sass
Raw Normal View History

2011-07-02 12:51:30 -07:00
@import "partials/icon"
@import "partials/clean/constants"
@import "partials/clean/mixins"
2011-07-02 12:51:30 -07:00
2010-11-05 15:45:05 -07:00
/* Reset
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td
margin: 0
padding: 0
border: 0
font-size: 100%
vertical-align: baseline
background: transparent
/* Typography
html, body
height: 100%
body
2010-11-08 17:40:03 -08:00
background: $background-color
2010-11-05 15:45:05 -07:00
color: $text-color
font:
family: $main-font
size: 90%
line-height: 1.5
2014-03-31 19:05:28 -07:00
a[href]
2010-11-05 15:45:05 -07:00
color: $link-color
input, button, select
font:
family: inherit
size: 100%
p
margin-bottom: 1em
h1, h2, h3
+header-text
h1
font-size: 3em
line-height: 1
margin-bottom: 0.50em
h2
font-size: 2em
margin-bottom: 0.75em
h3
font-size: 1.5em
line-height: 1
margin-bottom: 1.00em
.inline-image
margin-right: 1em
vertical-align: middle
/* Main
$container_width: 800px
#container
margin: .25em auto
2010-11-13 14:26:14 -08:00
padding-top: $container-top-padding
2010-11-05 15:45:05 -07:00
position: relative
width: $container_width
input, button, select, label
cursor: pointer
input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea
border-radius: 3px
2010-11-05 15:45:05 -07:00
background: #fff
border: 1px solid $input-border-color
color: $text-color + #444444
padding: .25em
&:focus, &:active
color: inherit
textarea
font: inherit
// TODO: This conflicts with button styles in embedded wardrobe-2020
// components. It'd be nice to not apply it to ALL button elements.
2010-11-05 15:45:05 -07:00
a.button, input[type=submit], button
+awesome-button
&.loud
+loud-awesome-button
.icon
margin-right: .25em
vertical-align: middle
2010-11-05 15:45:05 -07:00
ul.buttons
margin-bottom: 1em
li
list-style: none
margin: 0 .5em
&, form
display: inline
#footer
clear: both
font-size: 75%
margin-bottom: 1em
padding-top: 2em
text-align: center
ul, div
display: inline
margin: 0 1em
li, div ul
display: inline
margin: 0 .5em
#locale-form
float: right
.terms
&[data-updated-recently]
font-weight: bold
2010-11-05 15:45:05 -07:00
=flash
2010-11-05 15:45:05 -07:00
margin-bottom: 1em
padding: .25em .5em
text-align: center
.notice, .alert, .warning
+flash
.notice
+notice
2010-11-05 15:45:05 -07:00
.alert
+error
2010-11-05 15:45:05 -07:00
.warning
+warning
2010-11-05 15:45:05 -07:00
#userbar
+header-text
position: absolute
right: 0
top: 0
> *
display: inline
margin: 0 .25em
2011-07-02 12:51:30 -07:00
#userbar-image-mode
font-weight: bold
margin-right: 1em
text-decoration: none
img
+icon
2010-11-05 15:45:05 -07:00
#userbar-log-in
text-decoration: none
img
margin:
bottom: -4px
right: .25em
span
text-decoration: underline
&:hover span
text-decoration: none
.object
+inline-block
margin: $object-padding 0
padding: 0 $object-padding
2010-11-05 15:45:05 -07:00
position: relative
text-align: center
vertical-align: top
width: $object-width
a
text-decoration: none
img
+opacity(0.75)
img
display: block
height: $object-img-size
margin: 0 auto
width: $object-img-size
&:hover img, a:hover img
// behave in browsers that only respond to a:hover, but also be in the
// hover state more often for browsers who support div:hover
// (quantity form in user items)
+opacity(1)
2010-11-05 15:45:05 -07:00
.nc-icon, .closeted-icons
2011-07-12 22:21:48 -07:00
+opacity(1)
background: rgba(255, 255, 255, 0.75)
line-height: 1
2011-07-12 22:21:48 -07:00
position: absolute
top: $object-img-size - $nc-icon-size
&:hover
+opacity(0.5)
background: transparent
.nc-icon, .closeted-icons img
display: inline
height: $nc-icon-size
width: $nc-icon-size
2011-07-12 22:21:48 -07:00
.nc-icon
right: ($object-width - $object-img-size) / 2 + $object-padding
$closeted-icons-left: ($object-width - $object-img-size) / 2 + $object-padding
.closeted-icons
left: $closeted-icons-left
2011-07-12 22:21:48 -07:00
2010-11-05 15:45:05 -07:00
dt
font-weight: bold
dd
margin: 0 0 1.5em 1em
#home-link
+header-text
font:
size: 175%
weight: bold
left: 0
line-height: 1
padding-left: .25em
padding-right: .25em
2010-11-05 15:45:05 -07:00
position: absolute
top: 0
&:hover
background: $module-bg-color
text-decoration: none
span:before
content: "<< "
#home-link, #userbar
padding-top: 6px
padding-bottom: 6px
2010-11-05 15:45:05 -07:00
.pagination
a, span
margin: 0 .5em
.current
font-weight: bold