pebble/devsite/source/_sass/elements/form.scss
2025-02-24 18:58:29 -08:00

115 lines
2.3 KiB
SCSS

/**
* Copyright 2025 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.form__group {
display: table;
margin-bottom: 1em;
width: 100%;
input,
select,
textarea {
background-color: white;
border: 1px solid $gray-06;
border-left: none;
border-radius: 0 5px 5px 0;
color: $gray-02;
display: table-cell;
font-family: $sans-serif;
font-size: 15px;
margin: 0;
padding: 7px;
text-align: left;
width: 100%;
&.no-label {
border-radius: 5px;
}
&:focus {
box-shadow: none;
outline: none;
}
}
textarea {
text-align: left;
margin-bottom: -5px;
}
select {
height: 2em;
}
.select-style {
background-color: white;
border-radius: 0 5px 5px 0;
border: 1px solid $gray-06;
border-left-width: 0;
color: transparentize(#444, 0.5);
display: table-cell;
font-family: $sans-serif;
font-size: 15px;
margin: 0;
overflow: hidden;
padding: 3px 7px;
text-align: left;
width: 100%;
select {
-webkit-appearance: none;
background-image: none;
background: transparent;
border: none;
box-shadow: none;
padding: 5px 8px;
width: 130%;
}
select:focus {
outline: none;
}
&.no-label {
border-left-width: 1px;
}
}
label {
background-color: #fff;
border: 1px solid $gray-06;
border-right: none;
border-radius: 5px 0 0 5px;
color: #111;
display: table-cell;
font-size: 14px;
font-weight: 400;
margin: 0;
padding: 7px 10px;
vertical-align: top;
white-space: nowrap;
width: 25%;
}
input.mce_inline_error {
background-color: lighten($dark-red, 40);
border: 1px solid $dark-red;
}
}
input[type="submit"] {
cursor: pointer;
}