| 1 | .prism-form {
|
| 2 | font-family: "Roboto", "Arial", sans-serif;
|
| 3 | font-weight: 400;
|
| 4 | }
|
| 5 | .prism-input-group {
|
| 6 | display: flex;
|
| 7 | margin-bottom: 16px;
|
| 8 | flex-direction: column;
|
| 9 | }
|
| 10 | .prism-label {
|
| 11 | font-size: 0.8125rem;
|
| 12 | font-family: "Roboto", "Arial", sans-serif;
|
| 13 | line-height: 1.6;
|
| 14 | }
|
| 15 | .prism-input {
|
| 16 | width: 100%;
|
| 17 | border: solid 1px rgba(0, 0, 0, 0.12);
|
| 18 | margin: 4px 0px;
|
| 19 | display: flex;
|
| 20 | outline: none;
|
| 21 | padding: 12px 16px;
|
| 22 | flex-wrap: wrap;
|
| 23 | font-size: 0.8em;
|
| 24 | max-width: 95%;
|
| 25 | appearance: none;
|
| 26 | transition: cubic-bezier(0.4, 0, 0.2, 1);
|
| 27 | font-family: "Roboto", "Arial", sans-serif;
|
| 28 | text-indent: 0.75em;
|
| 29 | padding-left: 12px;
|
| 30 | border-radius: 4px;
|
| 31 | }
|
| 32 | .prism-input[disabled] {
|
| 33 | pointer-events: none;
|
| 34 | }
|
| 35 | .prism-input:not([disabled]):active {
|
| 36 | box-shadow: 0px 1px 4px #9e9e9e;
|
| 37 | border-color: #61b3cf;
|
| 38 | }
|
| 39 | .prism-input:not([disabled]):focus {
|
| 40 | box-shadow: 0px 1px 4px #9e9e9e;
|
| 41 | border-color: #61b3cf;
|
| 42 | }
|
| 43 | .prism-input:not([disabled]):invalid {
|
| 44 | border-color: #f44336;
|
| 45 | }
|
| 46 | .prism-input[readonly], .prism-input:read-only {
|
| 47 | border: none;
|
| 48 | background: none;
|
| 49 | pointer-events: none;
|
| 50 | }
|
| 51 | .prism-input::placeholder {
|
| 52 | color: rgba(0, 0, 0, 0.38);
|
| 53 | }
|
| 54 | .prism-input[readonly]:focus, .prism-input:read-only:focus {
|
| 55 | border: none;
|
| 56 | outline: none;
|
| 57 | pointer-events: none;
|
| 58 | }
|
| 59 | .prism-input[readonly]:active, .prism-input:read-only:active {
|
| 60 | border: none;
|
| 61 | outline: none;
|
| 62 | pointer-events: none;
|
| 63 | }
|
| 64 | .prism-input--focus {
|
| 65 | box-shadow: 0px 1px 4px #9e9e9e;
|
| 66 | border-color: #61b3cf;
|
| 67 | }
|
| 68 | .prism-input--active {
|
| 69 | box-shadow: 0px 1px 4px #9e9e9e;
|
| 70 | border-color: #61b3cf;
|
| 71 | }
|
| 72 | .prism-input--invalid {
|
| 73 | border-color: #f44336;
|
| 74 | }
|
| 75 | .prism-input--disabled {
|
| 76 | pointer-events: none;
|
| 77 | }
|
| 78 | .prism-input--readonly {
|
| 79 | border: none;
|
| 80 | background: none;
|
| 81 | pointer-events: none;
|
| 82 | }
|
| 83 | .prism-input--readonly:focus {
|
| 84 | border: none;
|
| 85 | outline: none;
|
| 86 | pointer-events: none;
|
| 87 | }
|
| 88 | .prism-input--readonly:active {
|
| 89 | border: none;
|
| 90 | outline: none;
|
| 91 | pointer-events: none;
|
| 92 | }
|
| 93 | .prism-select {
|
| 94 | width: 100%;
|
| 95 | border: solid 1px rgba(0, 0, 0, 0.12);
|
| 96 | margin: 4px 0px;
|
| 97 | display: flex;
|
| 98 | outline: none;
|
| 99 | padding: 12px 16px;
|
| 100 | flex-wrap: wrap;
|
| 101 | font-size: 0.8em;
|
| 102 | max-width: 95%;
|
| 103 | appearance: none;
|
| 104 | transition: cubic-bezier(0.4, 0, 0.2, 1);
|
| 105 | font-family: "Roboto", "Arial", sans-serif;
|
| 106 | text-indent: 0.75em;
|
| 107 | padding-left: 12px;
|
| 108 | border-radius: 4px;
|
| 109 | }
|
| 110 | .prism-select[disabled] {
|
| 111 | pointer-events: none;
|
| 112 | }
|
| 113 | .prism-select:not([disabled]):active {
|
| 114 | box-shadow: 0px 1px 4px #9e9e9e;
|
| 115 | border-color: #61b3cf;
|
| 116 | }
|
| 117 | .prism-select:not([disabled]):focus {
|
| 118 | box-shadow: 0px 1px 4px #9e9e9e;
|
| 119 | border-color: #61b3cf;
|
| 120 | }
|
| 121 | .prism-select:not([disabled]):invalid {
|
| 122 | border-color: #f44336;
|
| 123 | }
|
| 124 | .prism-select[readonly], .prism-select:read-only {
|
| 125 | border: none;
|
| 126 | background: none;
|
| 127 | pointer-events: none;
|
| 128 | }
|
| 129 | .prism-select::placeholder {
|
| 130 | color: rgba(0, 0, 0, 0.38);
|
| 131 | }
|
| 132 | .prism-select[readonly]:focus, .prism-select:read-only:focus {
|
| 133 | border: none;
|
| 134 | outline: none;
|
| 135 | pointer-events: none;
|
| 136 | }
|
| 137 | .prism-select[readonly]:active, .prism-select:read-only:active {
|
| 138 | border: none;
|
| 139 | outline: none;
|
| 140 | pointer-events: none;
|
| 141 | }
|
| 142 | .prism-select-wrap {
|
| 143 | position: relative;
|
| 144 | }
|
| 145 | .prism-select-wrap__indicator {
|
| 146 | top: 1em;
|
| 147 | color: rgba(0, 0, 0, 0.38);
|
| 148 | right: 7%;
|
| 149 | position: absolute;
|
| 150 | } |
| \ | No newline at end of file |