Spaces:
Running
Running
File size: 1,885 Bytes
f2bee8a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
@import "../../css/units.css";
@import "../../css/colors.css";
.question-container {
margin: $space;
border: 1px solid $ui-black-transparent-default;
border-radius: $space;
border-width: 2px;
padding: 1rem;
background: white;
}
.question-label {
font-size: 0.75rem;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: $text-primary-light;
padding-bottom: $space;
}
.question-input {
display: flex; /* Keeps the input from going outside this container */
position: relative;
}
/* tw: input should not look different in dark mode */
[theme="dark"] .question-input input {
color: $text-primary-light;
background: $ui-secondary-light;
border-color: $ui-tertiary-light;
}
[theme="dark"] .question-input input:hover,
[theme="dark"] .question-input input:focus {
border-color: $motion-primary;
}
.question-submit-button {
position: absolute;
top: calc($space / 2);
width: calc(2rem - $space);
height: calc(2rem - $space);
border: none;
border-radius: 100%;
color: white;
background: $motion-primary;
}
[dir="ltr"] .question-submit-button {
right: calc($space / 2);
}
[dir="rtl"] .question-submit-button {
left: calc($space / 2);
}
/* Input overrides: width, font-weight, focus outline and padding */
.question-input > input {
width: 100%;
font-weight: normal;
}
[dir="ltr"] .question-input > input {
padding: 0 2rem 0 .75rem; /* To make room for the submit button */
}
[dir="rtl"] .question-input > input {
padding: 0 .75rem 0 2rem; /* To make room for the submit button */
}
.question-input > input:focus {
box-shadow: 0px 0px 0px 3px $motion-transparent;
}
.question-submit-button-icon {
width: calc(2rem - $space);
height: calc(2rem - $space);
position: relative;
right: -7px;
left: -7px;
}
|