coffeescript-widget/sass/style.scss

92 lines
2.0 KiB
SCSS
Raw Normal View History

2011-07-20 18:43:12 +00:00
@import 'compass/css3';
@import 'compass/utilities';
$padding: 10px;
2011-07-20 18:49:49 +00:00
$width: 1000px - ($padding * 2);
$height: 460px - ($padding * 2);
2011-07-20 18:43:12 +00:00
$textarea-width: ($width - $padding) / 2;
$textarea-height: $height - image_height('logo.png') - $padding;
body {
form {
background-color: #181A3A;
@include border-radius($padding);
padding: $padding;
width: $width;
height: $height;
@include clearfix;
header {
margin-bottom: $padding;
position: relative;
@include background(
linear-gradient(#eee, #f8f8f8)
);
@include border-radius($padding / 2);
height: image_height('logo.png');
overflow: hidden;
a {
background: url('logo.png') top left no-repeat;
width: image_width('logo.png');
height: image_height('logo.png');
display: block;
@include hide-text;
position: absolute;
cursor: pointer;
}
#error {
position: absolute;
right: 0;
width: $width - image_width('logo.png') - $padding;
height: image_height('logo.png') - ($padding * 2);
margin-left: $padding;
@include border-right-radius($padding / 2);
padding: $padding 0;
@include background(
linear-gradient(#ffedec, #ff9a95)
);
text-align: right;
span {
text: {
transform: uppercase;
}
font: {
family: "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
size: 13px;
weight: bold;
}
color: #D00;
padding-right: $padding;
}
}
}
}
textarea {
@include float-left;
border: none;
background: transparent;
font: {
family: Monaco, Consolas, "Lucida Console", monospace;
size: 10px;
}
color: #DEF;
width: $textarea-width;
height: $textarea-height;
&#javascript {
margin-left: $padding
}
}
}