Chris@3: /**
Chris@3:  * @file
Chris@3:  * Visual styles for Bartik's forms.
Chris@3:  */
Chris@3: 
Chris@3: /* Password field. */
Chris@3: .password-field {
Chris@3:   margin: 0;
Chris@3: }
Chris@3: 
Chris@3: /* Form elements. */
Chris@3: form {
Chris@3:   margin: 0;
Chris@3:   padding: 0;
Chris@3: }
Chris@3: fieldset {
Chris@3:   margin: 1em 0;
Chris@3:   min-width: 0;
Chris@3: }
Chris@3: /**
Chris@3:  * We've temporarily added this Firefox specific rule here to fix fieldset
Chris@3:  * widths.
Chris@3:  * @todo remove once this Mozilla bug is fixed.
Chris@3:  * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622
Chris@3:  */
Chris@3: @-moz-document url-prefix() {
Chris@3:   fieldset {
Chris@3:     display: table-cell;
Chris@3:   }
Chris@3: }
Chris@3: details,
Chris@3: fieldset,
Chris@3: .filter-wrapper {
Chris@3:   border-radius: 4px;
Chris@3: }
Chris@3: .filter-wrapper {
Chris@3:   border-top-left-radius: 0;
Chris@3:   border-top-right-radius: 0;
Chris@3: }
Chris@3: .filter-help a {
Chris@3:   font-size: 0.857em;
Chris@3: }
Chris@3: .filter-wrapper .form-item label {
Chris@3:   margin-right: 10px; /* LTR */
Chris@3: }
Chris@3: [dir="rtl"] .filter-wrapper .form-item label {
Chris@3:   margin-left: 10px;
Chris@3:   margin-right: 0;
Chris@3: }
Chris@3: summary {
Chris@3:   background: #dbdbdb;
Chris@3:   color: #3b3b3b;
Chris@3:   text-shadow: 0 1px 0 #fff;
Chris@3: }
Chris@3: details summary a {
Chris@3:   color: #3b3b3b;
Chris@3: }
Chris@3: details summary a:hover,
Chris@3: details summary a:active,
Chris@3: details summary a:focus {
Chris@3:   color: #000;
Chris@3: }
Chris@3: details .details-description {
Chris@3:   font-style: italic;
Chris@3: }
Chris@3: label {
Chris@3:   display: table;
Chris@3:   font-weight: bold;
Chris@3: }
Chris@3: label[for] {
Chris@3:   cursor: pointer;
Chris@3: }
Chris@3: input,
Chris@3: textarea,
Chris@3: select {
Chris@3:   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
Chris@3: }
Chris@3: input {
Chris@3:   margin: 2px 0;
Chris@3:   padding: 4px;
Chris@3:   /* Keep form elements from overflowing their containers. */
Chris@3:   max-width: 100%;
Chris@3:   box-sizing: border-box;
Chris@3: }
Chris@3: input,
Chris@3: textarea {
Chris@3:   font-size: 0.929em;
Chris@3: }
Chris@3: 
Chris@3: /**
Chris@3:  * Make the font slightly bigger in mobile
Chris@3:  * @todo: check the correct font-size
Chris@3:  */
Chris@3: @media screen and (max-width: 60em) { /* 920px */
Chris@3:   input,
Chris@3:   textarea {
Chris@3:     font-size: 16px;
Chris@3:   }
Chris@3: }
Chris@3: textarea {
Chris@3:   line-height: 1.5;
Chris@3: }
Chris@3: textarea.form-textarea,
Chris@3: select.form-select {
Chris@3:   padding: 4px;
Chris@3: }
Chris@3: input.form-text,
Chris@3: input.form-tel,
Chris@3: input.form-email,
Chris@3: input.form-url,
Chris@3: input.form-search,
Chris@3: input.form-file,
Chris@3: input.form-number,
Chris@3: input.form-color,
Chris@3: textarea.form-textarea,
Chris@3: select.form-select {
Chris@3:   border: 1px solid #ccc;
Chris@3:   color: #3b3b3b;
Chris@3: }
Chris@3: input.form-submit:hover,
Chris@3: input.form-submit:focus {
Chris@3:   background: #dedede;
Chris@3: }
Chris@3: .password-suggestions ul li {
Chris@3:   margin-left: 1.2em; /* LTR */
Chris@3: }
Chris@3: [dir="rtl"] .password-suggestions ul li {
Chris@3:   margin-right: 1.2em;
Chris@3:   margin-left: 0;
Chris@3: }
Chris@3: .form-item label,
Chris@3: .form-wrapper .label {
Chris@3:   font-size: 0.929em;
Chris@3: }
Chris@3: .form-wrapper .field-multiple-table .label {
Chris@3:   font-size: inherit;
Chris@3: }
Chris@3: .form-type-radio label,
Chris@3: .form-type-checkbox label {
Chris@3:   margin-left: 4px; /* LTR */
Chris@3: }
Chris@3: [dir="rtl"] .form-type-radio label,
Chris@3: [dir="rtl"] .form-type-checkbox label {
Chris@3:   margin-right: 4px;
Chris@3:   margin-left: 0;
Chris@3: }
Chris@3: .form-type-radio .description,
Chris@3: .form-type-checkbox .description {
Chris@3:   margin-left: 2px; /* LTR */
Chris@3: }
Chris@3: [dir="rtl"] .form-type-radio .description,
Chris@3: [dir="rtl"] .form-type-checkbox .description {
Chris@3:   margin-right: 2px;
Chris@3:   margin-left: 0;
Chris@3: }
Chris@3: .form-actions {
Chris@3:   padding-top: 10px;
Chris@3: }
Chris@3: 
Chris@3: /* Node Form */
Chris@3: #edit-body {
Chris@3:   margin-bottom: 2em;
Chris@3: }
Chris@3: .node-form label,
Chris@3: .node-form .description,
Chris@3: .node-form .form-wrapper .label {
Chris@3:   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Chris@3: }
Chris@3: .node-form .form-wrapper .field-multiple-table .label {
Chris@3:   font-family: inherit;
Chris@3: }
Chris@3: .node-form .form-wrapper {
Chris@3:   margin-bottom: 2em;
Chris@3: }
Chris@3: .node-form .node-form-footer,
Chris@3: .node-form .field--name-status {
Chris@3:   margin-bottom: 0;
Chris@3: }
Chris@3: .node-form .form-actions {
Chris@3:   padding-top: 0;
Chris@3:   margin-top: 0;
Chris@3: }
Chris@3: 
Chris@3: /* Contact Form */
Chris@3: .contact-form #edit-name {
Chris@3:   width: 75%;
Chris@3:   border-radius: 4px;
Chris@3: }
Chris@3: .contact-form #edit-mail {
Chris@3:   width: 75%;
Chris@3:   border-radius: 4px;
Chris@3: }
Chris@3: .contact-form #edit-subject {
Chris@3:   width: 75%;
Chris@3:   border-radius: 4px;
Chris@3: }
Chris@3: .contact-form #edit-message {
Chris@3:   width: 76.3%;
Chris@3:   border-top-left-radius: 4px;
Chris@3:   border-top-right-radius: 4px;
Chris@3: }
Chris@3: 
Chris@3: /* Disabled form elements */
Chris@3: .form-disabled input,
Chris@3: .form-disabled select,
Chris@3: .form-disabled textarea {
Chris@3:   background: #ededed;
Chris@3:   border-color: #bbb;
Chris@3:   color: #717171;
Chris@3: }
Chris@3: .form-disabled label {
Chris@3:   color: #717171;
Chris@3: }
Chris@3: 
Chris@3: /* Comment form */
Chris@3: .comment-form label {
Chris@3:   float: left; /* LTR */
Chris@3:   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Chris@3:   font-size: 0.929em;
Chris@3:   width: 120px;
Chris@3: }
Chris@3: [dir="rtl"] .comment-form label {
Chris@3:   float: right;
Chris@3: }
Chris@3: .comment-form input,
Chris@3: .comment-form .form-select {
Chris@3:   margin: 0;
Chris@3:   border-radius: 4px;
Chris@3: }
Chris@3: .comment-form .form-type-textarea label {
Chris@3:   float: none;
Chris@3: }
Chris@3: .comment-form .form-item,
Chris@3: .comment-form .form-radios,
Chris@3: .comment-form .form-type-checkbox,
Chris@3: .comment-form .form-select {
Chris@3:   margin-bottom: 10px;
Chris@3:   overflow: hidden;
Chris@3: }
Chris@3: .comment-form .form-type-checkbox,
Chris@3: .comment-form .form-radios {
Chris@3:   margin-left: 120px; /* LTR */
Chris@3: }
Chris@3: [dir="rtl"] .comment-form .form-type-checkbox,
Chris@3: [dir="rtl"] .comment-form .form-radios,
Chris@3: [dir="rtl"] .comment-form .form-item .description {
Chris@3:   margin-left: 0;
Chris@3:   margin-right: 120px;
Chris@3: }
Chris@3: .comment-form .form-type-checkbox label,
Chris@3: .comment-form .form-radios label {
Chris@3:   float: none;
Chris@3:   margin-top: 0;
Chris@3: }
Chris@3: .comment-form input.form-file {
Chris@3:   width: auto;
Chris@3: }
Chris@3: .layout-no-sidebars .comment-form .form-text {
Chris@3:   width: 800px;
Chris@3: }
Chris@3: .layout-one-sidebar .comment-form .form-text {
Chris@3:   width: 500px;
Chris@3: }
Chris@3: .layout-two-sidebars .comment-form .form-text {
Chris@3:   width: 320px;
Chris@3: }
Chris@3: .comment-form .form-item .description {
Chris@3:   font-size: 0.786em;
Chris@3:   line-height: 1.2;
Chris@3:   margin-left: 120px; /* LTR */
Chris@3: }
Chris@3: .comment-form .form-textarea {
Chris@3:   border-top-left-radius: 4px;
Chris@3:   border-top-right-radius: 4px;
Chris@3: }
Chris@3: .comment-form details.filter-wrapper .details-wrapper,
Chris@3: .comment-form .text-format-wrapper .form-item {
Chris@3:   margin-top: 0;
Chris@3:   margin-bottom: 0;
Chris@3: }
Chris@3: .filter-wrapper label {
Chris@3:   width: auto;
Chris@3:   float: none;
Chris@3: }
Chris@3: .filter-wrapper .form-select {
Chris@3:   min-width: 120px;
Chris@3: }
Chris@3: .comment-form details.filter-wrapper .tips {
Chris@3:   font-size: 0.786em;
Chris@3: }
Chris@3: #comment-body-add-more-wrapper .form-type-textarea label {
Chris@3:   margin-bottom: 0.4em;
Chris@3: }
Chris@3: #edit-actions input {
Chris@3:   margin-right: 0.6em; /* LTR */
Chris@3: }
Chris@3: [dir="rtl"] #edit-actions input {
Chris@3:   margin-left: 0.6em;
Chris@3:   margin-right: 0;
Chris@3: }
Chris@3: 
Chris@3: /* Form error styles. */
Chris@3: .form-item textarea.error + .cke {
Chris@3:   border: 2px solid red;
Chris@3: }
Chris@3: 
Chris@3: /* Form error message styles. */
Chris@3: .form-item--error-message {
Chris@3:   color: #e32700;
Chris@3: }
Chris@3: 
Chris@3: /**
Chris@3:  * Improve form element usability on narrow devices.
Chris@3:  */
Chris@3: @media all and (max-width: 600px) {
Chris@3:   .form-actions .button {
Chris@3:     float: none;
Chris@3:     margin: 10px 0 0;
Chris@3:     padding-bottom: 6px;
Chris@3:     width: 100%;
Chris@3:     display: block;
Chris@3:     box-sizing: border-box;
Chris@3:     -webkit-box-sizing: border-box;
Chris@3:     -moz-box-sizing: border-box;
Chris@3:   }
Chris@3: 
Chris@3:   .js .dropbutton .dropbutton-action > input,
Chris@3:   .js .dropbutton .dropbutton-action > a,
Chris@3:   .js .dropbutton .dropbutton-action > button {
Chris@3:     text-align: center;
Chris@3:     padding-left: 3em;
Chris@3:   }
Chris@3: }