mirror of
https://github.com/Pathduck/gallery3.git
synced 2026-07-12 02:03:50 -04:00
Default theme, built with YUI. A mock right now, not functional at
all (except in some very minor ways). It's unclear if this is the best final structure. Right now the album controller knows a considerable amount about the layout of the page, which may not be the best way to do things.
This commit is contained in:
191
themes/default/css/forms.css
Normal file
191
themes/default/css/forms.css
Normal file
@@ -0,0 +1,191 @@
|
||||
/** *************************************************************************
|
||||
* Base form styles
|
||||
*/
|
||||
|
||||
/* Zero out padding and margin, adjust where needed later */
|
||||
form, fieldset, label, input, .checkbox, textarea, select, option, form div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
fieldset {
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
legend {
|
||||
font-weight: bold;
|
||||
margin: 0 2% .5em 0;
|
||||
padding: .2em .5em;
|
||||
}
|
||||
input.text, textarea, select, input.password {
|
||||
border: 1px solid #666;
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
option {
|
||||
float: none;
|
||||
clear: both;
|
||||
margin-right: 2em;
|
||||
}
|
||||
input.radio, input.checkbox {
|
||||
margin-right: .5em;
|
||||
}
|
||||
/* Create a bit of padding for text inputs and selects */
|
||||
input.text, input.password, input.button, textarea, select {
|
||||
padding: .2em;
|
||||
}
|
||||
input.button {
|
||||
margin-right: 1em;
|
||||
padding: .2em .6em;
|
||||
}
|
||||
.readonly {
|
||||
color: #999;
|
||||
background: #e7e7e7;
|
||||
}
|
||||
/* standard widths */
|
||||
.w12 { width: 12% }
|
||||
.w25 { width: 25% }
|
||||
.w37 { width: 37% }
|
||||
.w50 { width: 50% }
|
||||
.w62 { width: 62% }
|
||||
.w75 { width: 75% }
|
||||
.w87 { width: 87% }
|
||||
.wauto { width: auto; }
|
||||
|
||||
|
||||
/** *************************************************************************
|
||||
* Provide proper vertical alignment for expanded and compact forms
|
||||
*/
|
||||
|
||||
.gExpandedForm .row div,
|
||||
.gCompactForm div div label {
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
|
||||
/** *************************************************************************
|
||||
* Expanded form layout styles
|
||||
*/
|
||||
|
||||
.gExpandedForm { overflow: hidden; }
|
||||
.gExpandedForm .row {
|
||||
padding: .3em 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
.gExpandedForm label,
|
||||
.gExpandedForm .row p,
|
||||
.gExpandedForm .row div,
|
||||
.gExpandedForm input,
|
||||
.gExpandedForm select,
|
||||
.gExpandedForm textarea {
|
||||
float: left;
|
||||
}
|
||||
/* change column widths for labels and inputs */
|
||||
.gExpandedForm .text, textarea { width: 80%; }
|
||||
.gExpandedForm label, .gExpandedForm .row p {
|
||||
width: 15%;
|
||||
margin: .5em 1em .5em 0;
|
||||
text-align: right;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gExpandedForm .row div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clear: none;
|
||||
}
|
||||
/* labels and form inputs inside of divs should not float */
|
||||
.gExpandedForm .row div * {
|
||||
float: none;
|
||||
clear: none;
|
||||
}
|
||||
.expanded input.checkbox,
|
||||
.expanded input.radio,
|
||||
.expanded select {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.gExpandedForm div div input {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/** *************************************************************************
|
||||
* Compact form layout styles
|
||||
*/
|
||||
|
||||
.gCompactForm { overflow: hidden; }
|
||||
.gCompactForm div,
|
||||
.gCompactForm label,
|
||||
.gCompactForm input,
|
||||
.gCompactForm select,
|
||||
.gCompactForm textarea {
|
||||
float: left;
|
||||
}
|
||||
.gCompactForm input.text,
|
||||
.gCompactForm select,
|
||||
.gCompactForm textarea {
|
||||
/* set width: auto to allow form element content
|
||||
to set width otherwise 90% is a good setting */
|
||||
width: 90%; /* determines space between form elements */
|
||||
}
|
||||
/* Increase width of elements in twoper
|
||||
columns to provide better alignment */
|
||||
.gCompactForm .twoper input.text,
|
||||
.gCompactForm .twoper select,
|
||||
.gCompactForm .twoper textarea {
|
||||
width: 95%;
|
||||
}
|
||||
.gCompactForm div {
|
||||
width: 99%;
|
||||
margin-bottom: 1em; /* space between rows */
|
||||
clear: both;
|
||||
}
|
||||
/* Nested divs shouldn't clear floated elements */
|
||||
/* keeps nested divs from compounding margin value */
|
||||
.gCompactForm div div {
|
||||
margin-bottom: 0;
|
||||
clear: none;
|
||||
}
|
||||
/* Nested div label contents should determine their own width */
|
||||
.gCompactForm div div label {
|
||||
width: auto;
|
||||
white-space: normal;
|
||||
/* unccomment to stack form inputs inside a row */
|
||||
/* clear: left; */
|
||||
margin-right: 1em;
|
||||
}
|
||||
/* Fix paragraph white space in Safari */
|
||||
.gCompactForm div div p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Compact layout - Set item width within rows */
|
||||
.oneper label, .oneper div { width: 99%; } /* can't be 100%, IE bug */
|
||||
.twoper label, .twoper div { width: 46%; }
|
||||
.threeper label, .threeper div { width: 32%; }
|
||||
.fourper label, .fourper div { width: 23%; }
|
||||
.fiveper label, .fiveper div { width: 19%; }
|
||||
.sixper label, .sixper div { width: 15%; }
|
||||
.sevenper label, .sevenper div { width: 13%; }
|
||||
.eightper label, .eightper div { width: 11%; }
|
||||
.nineper label, .nineper div { width: 10%; }
|
||||
.tenper label, .tenper div { width: 8.7%; }
|
||||
|
||||
.oneper label, .oneper div,
|
||||
.twoper label, .twoper div,
|
||||
.threeper label, .threeper div,
|
||||
.fourper label, .fourper div,
|
||||
.fiveper label, .fiveper div,
|
||||
.sixper label, .sixper div,
|
||||
.sevenper label, .sevenper div,
|
||||
.eightper label, .eightper div,
|
||||
.nineper label, .nineper div,
|
||||
.tenper label, .tenper div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
Reference in New Issue
Block a user