Skip to content

Instantly share code, notes, and snippets.

@mhenke
Created June 17, 2011 15:14
Show Gist options
  • Save mhenke/1031623 to your computer and use it in GitHub Desktop.
Save mhenke/1031623 to your computer and use it in GitHub Desktop.
Starter CSS based on Blueprint CSS for use with CFWheels helpers (sass)
form.generic {
input[type="text"], textarea, select {
background: #FBFBFB;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
}
input {
&[type="password"] {
background: #FBFBFB;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
}
&[type="text"], &[type="password"], &.text, &.title {
margin: 0;
}
}
textarea, select {
margin: 0;
}
input {
&[type="text"]:focus, &.title:focus {
border: 1px solid #FC0;
background: white;
}
}
textarea:focus, select:focus {
border: 1px solid #FC0;
background: white;
}
input {
&[type="radio"], &.radio {
float: left;
top: 0;
}
padding: 3px;
}
textarea {
width: 390px;
height: 250px;
padding: 5px;
&.half {
height: 100px;
}
}
select.fullwidth {
width: 405px;
}
fieldset {
padding: 1.4em;
margin: 0 0 1.5em 0;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
legend {
font-weight: bold;
font-size: 1.2em;
}
label {
font-weight: bold;
float: left;
width: 150px;
&.error {
clear: left;
margin-left: 150px;
padding: 3px;
background: none;
border: none;
}
}
input
&.checkbox, &[type="checkbox"] {
}
div {
&.checkbox, &.radio {
width: 450px;
margin-left: 150px;
}
}
label {
&.checkboxLabel, &.radioLabel {
width: 450px;
}
}
button {
&.button {
margin-left: 150px;
}
&.nomarginleft {
margin-left: 0;
}
}
div.template div.checkbox {
width: 0;
margin-left: 0;
label.checkboxLabel {
width: 100px;
}
}
.field {
clear: both;
margin-bottom: 10px;
}
.inlinefield {
float: left;
}
p.hint {
font-size: 90%;
color: #666;
float: right;
width: 250px;
}
.fieldWithErrors input, ul.errorMessages, input.error {
border: 1px solid red;
}
ul.errorMessages {
color: #C00;
font-weight: 700;
font-size: 90%;
padding: 10px;
}
span.errorMessage {
background: none;
border: none;
margin-left: 140px;
font-weight: 700;
}
fieldset {
&.collapsible legend {
&:hover {
cursor: pointer;
}
background: url(/images/icons/menu-expanded.png) right no-repeat;
padding: 0 15px 0 0;
}
&.collapsed legend {
background: url(/images/icons/menu-collapsed.png) right no-repeat;
padding: 0 15px 0 0;
}
}
.hidden{
display: none;
}
}
@mhenke
Copy link
Author

mhenke commented Jun 17, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment