symphony/assets/css/src/symphony.forms.css
/**
* This file contains unified styles for inputs, text areas, multiple selects
* and buttons that are shared across the system. It does not contain general
* label and fieldset definitions that differ in the different areas of Symphony.
*
* @since Symphony 2.3
*/
/*--------------------------------------------------------------------------
Inputs, text areas, selects
--------------------------------------------------------------------------*/
input,
textarea,
select[multiple],
.field-value-readonly {
box-sizing: border-box;
width: 100%;
margin-top: 0.2rem;
padding: 0.2rem 0.3rem;
font-family: inherit;
font-size: 109.09%;
border: 0.1rem solid rgba(0, 0, 0, 0.25);
}
input,
select[multiple] {
background-color: white;
}
input {
height: 2.2rem;
}
input[type=file] {
height: auto;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
input:active,
input:focus,
textarea:active,
textarea:focus,
select[multiple]:active,
select[multiple]:focus {
border-color: rgba(0, 0, 0, 0.4);
outline: none;
}
select {
display: block;
box-sizing: border-box;
width: 100%;
margin-top: 0.2rem;
}
select[multiple] {
width: 100%;
height: 10rem;
padding: 0;
font-size: 1.1rem;
}
select[size] {
height: auto;
max-height: 10rem;
}
textarea {
resize: vertical;
}
input[size] {
width: auto;
}
input[type='radio'],
input[type='checkbox'] {
display: inline;
width: auto;
height: auto;
margin-top: 0;
margin-right: 0.5rem;
padding: inherit;
font-size: inherit;
border: none;
box-shadow: none;
}
button,
input,
select,
optgroup {
font-family: 'Lucida Grande', Leelawadee, Tahoma, Verdana, sans-serif;
}
button[disabled] {
opacity: 0.5;
}
optgroup {
font-weight: bold;
font-style: normal;
}
a,
select,
textarea,
option,
fieldset {
outline: 0;
}
input[type='reset'],
input[type='button'],
input[type='submit'] {
width: auto;
font-size: inherit;
}
button::-moz-focus-inner,
input[type='reset']::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner,
select::-moz-focus-inner,
input[type='file'] > input[type='button']::-moz-focus-inner {
border: none;
}
.field-value-readonly {
display: block;
min-height: 2.2rem;
padding-left: 0;
border: none;
opacity: 0.5;
}
/* Errors */
.invalid input
.invalid select[multiple],
.invalid textarea {
border-color: #c31;
}
.invalid input:active,
.invalid input:focus,
.invalid textarea:active,
.invalid textarea:focus {
border-color: #9d270d;
box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.3);
}
/*--------------------------------------------------------------------------
Buttons
--------------------------------------------------------------------------*/
input[type=submit],
button,
.button,
.apply-button-left,
.apply-button-right,
.apply-label-left,
.apply-label-right {
display: inline-block;
min-height: 2rem;
margin-left: 1rem;
padding: 0 1rem;
color: rgba(85, 85, 85, 0.95);
line-height: 1.85;
border: 0.1rem solid rgba(0, 0, 0, 0.25);
border-radius: 0.4rem;
background-image: linear-gradient(to bottom, #fbfbfa 0%, #e3e3df 100%);
}
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
button:hover,
button:active,
button:focus,
.button:hover,
.button:active,
.button:focus {
color: #3c3c3c;
border-color: rgba(0, 0, 0, 0.35);
background-image: linear-gradient(to bottom, #fbfbfa 0%, #e3e3df 50%);
cursor: pointer;
}
input[type=submit].selected,
button.selected,
.button.selected {
color: rgba(0, 0, 0, 0.7);
border-color: rgba(0, 0, 0, 0.3);
background: #e3e3df;
box-shadow: inset 0 0 0.15rem rgba(0, 0, 0, 0.2);
text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.7);
cursor: pointer;
}
textarea[disabled=disabled],
textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:active,
textarea[disabled=disabled]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:active,
textarea[readonly=readonly]:focus,
input[type=submit][disabled=disabled]:hover,
input[type=submit][disabled=disabled]:active,
input[type=submit][disabled=disabled]:focus,
input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:active,
input[readonly=readonly]:focus,
button[disabled=disabled],
button[disabled=disabled]:hover,
button[disabled=disabled]:active,
button[disabled=disabled]:focus {
opacity: 0.5;
cursor: not-allowed;
}
/* Create buttons */
button.create,
.button.create {
color: #fff;
border-color: #799747;
background-image: linear-gradient(to bottom, #b3d47d 0%, #8b3 100%);
}
button.create:hover,
button.create:active,
button.create:focus,
.button.create:hover,
.button.create:active,
.button.create:focus {
border-color: #6b863f;
background-image: linear-gradient(to bottom, #b3d47d 0%, #8b3 50%);
}
/* Delete buttons */
button.delete:hover,
button.delete:active,
button.delete:focus,
.button.delete:hover,
.button.delete:active,
.button.delete:focus {
color: rgba(255, 255, 255, 0.8);
border-color: #870915;
background-image: linear-gradient(to bottom, #e90a20 0%, #9e0b19 100%);
}
/* Installer */
.submit input {
margin-top: 1.5rem;
}
/* "With selected…" menu */
.apply,
.apply.inactive:hover {
display: block;
float: right;
height: 1.85em;
min-height: 2rem;
margin: 0;
padding: 0;
border: 0.1rem solid rgba(0, 0, 0, 0.25);
border-radius: 0.4rem;
background: #fbfbfa;
}
.apply.inactive {
opacity: 0.5;
}
.apply div {
float: left;
overflow: hidden;
text-align: left;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAwCAYAAADHEYBIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAORJREFUeNpiYIAAHiDuBmJWEOf///9YMRNUcRUQOwJxJgMeAFLsBcRuUH4cEFvhUsyITRBkJS6TiQYgxb5AfAYJW+FTvBmId0H5i4D4GCEbiAo6RlyeoYoHRxUPacWMjIwMQMwKxBZADOYTMtkQiKWAWIuQM+SAWAbKVwNicfrnQRYglgdiYySxo0D8EpfJD4H4CZR/C5dCZADKexYwZ43mwVHF5OZBEC3DCAEETZYEYl4gFiXkDH4g5oPyhaFVxgDkQX5omQEDj4H4Cy6TPwLxJyj/LS6FMJNB4DnU/a/xOQMgwACLFl2Yo1jbdgAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-position: right -1.4rem;
}
.apply:hover div {
background-position: right 0.6rem;
}
.apply.inactive div {
background: right -3.4rem;
}
.apply select {
display: inline-block;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
width: 110% !important;
min-width: 17rem;
margin: 0.2rem 0 0 0;
padding: 0 0 0 0.7rem;
color: rgb(60, 60, 60);
line-height: 1.5;
border: none;
border-radius: 0.5rem;
-webkit-appearance: none;
background: transparent;
outline: none;
cursor: pointer;
}
.apply.inactive select {
cursor: default;
}
.apply select:hover {
background-position: right -1.6rem;
}
.apply button,
.apply-button-right,
.apply-button-left,
.apply-label-right,
.apply-label-left {
float: right;
height: 1.85rem;
margin: 0;
line-height: 1.85;
border: none;
border-right: none;
border-left: 0.1rem solid rgba(0, 0, 0, 0.15);
border-radius: 0 0.4rem 0.4rem 0;
}
.apply-button-left,
.apply-label-left {
float: left;
border-right: 0.1rem solid rgba(0, 0, 0, 0.15);
border-left: none;
border-radius: 0.4rem 0 0 0.4rem;
}
.apply.inactive button,
.apply.inactive button:hover {
color: rgba(60, 60, 60, 0.8);
border-left: 0.1rem solid rgba(0, 0, 0, 0.15);
box-shadow: none;
cursor: default;
}
.apply:hover button {
border-left: 0.1rem solid rgba(0, 0, 0, 0.25);
}
/* Single select "With selected…" */
.apply.single {
border: none;
}
.apply.single select {
display: none;
}
.apply.single button {
height: auto;
white-space: nowrap;
border: 0.1rem solid rgba(0, 0, 0, 0.25);
border-bottom-color: rgba(0, 0, 0, 0.3);
border-radius: 0.4rem;
}
.apply.single button:before {
display: none;
}
/* Inline buttons, aligned left */
fieldset input[type=submit],
fieldset button,
fieldset .button {
margin-right: 1rem;
margin-left: 0;
}