Skip to content

Commit 60eaca7

Browse files
committed
[#109 #110] Improve the select inputs
1 parent e322b80 commit 60eaca7

File tree

10 files changed

+501
-42
lines changed

10 files changed

+501
-42
lines changed

prefix_finder/frontend/static/css/main.css

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ table {
5757
text-align: center;
5858
}
5959

60-
.u-material-icons, .dropdown::before, .homepage__select:after {
60+
.u-material-icons, .selectize-control.single .selectize-input:after, .dropdown::before, .homepage__select:after {
6161
font-family: 'Material Icons';
6262
font-weight: normal;
6363
font-style: normal;
@@ -255,6 +255,7 @@ input[type='button'],
255255
input[type='reset'],
256256
input[type="submit"] {
257257
border: 0;
258+
cursor: pointer;
258259
}
259260

260261
button {
@@ -1266,4 +1267,142 @@ fieldset {
12661267
display: block;
12671268
padding: 5px 10px;
12681269
}
1269-
/*# sourceMappingURL=main2.css.map */
1270+
1271+
/* Customization Styles for the autocomplete plugin. */
1272+
.selectize-input {
1273+
border: 0;
1274+
min-width: 200px;
1275+
padding: 0 30px 0 5px;
1276+
padding-leftt: 5px;
1277+
}
1278+
.selectize-input > input {
1279+
font-weight: 300 !important;
1280+
padding: 20px;
1281+
position: relative !important;
1282+
}
1283+
1284+
.selectize-control {
1285+
display: inline-block;
1286+
}
1287+
1288+
.selectize-control.single .selectize-input:after {
1289+
content: 'keyboard_arrow_down';
1290+
display: block;
1291+
position: absolute;
1292+
padding: 0;
1293+
top: 10px;
1294+
right: 0;
1295+
margin-top: 0;
1296+
width: auto;
1297+
height: auto;
1298+
border: 0 !important;
1299+
line-height: .8;
1300+
}
1301+
1302+
.selectize-control.single .selectize-input.dropdown-active:after {
1303+
margin: 0;
1304+
border: 0;
1305+
}
1306+
1307+
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder,
1308+
.selectize-control.plugin-drag_drop .ui-sortable-helper,
1309+
.selectize-dropdown-header,
1310+
.selectize-control.plugin-remove_button [data-value] .remove,
1311+
.selectize-input,
1312+
.selectize-input.focus,
1313+
.selectize-input.dropdown-active,
1314+
.selectize-dropdown,
1315+
.selectize-dropdown [data-selectable] .highlight {
1316+
border-radius: 0 !important;
1317+
box-shadow: none;
1318+
}
1319+
1320+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-control {
1321+
bottom: -9px;
1322+
margin-top: -9px;
1323+
}
1324+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-control.single .selectize-input:after {
1325+
font-size: 2rem;
1326+
color: rgba(0, 166, 171, 0.8);
1327+
}
1328+
@media (max-width: 64em) {
1329+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-control.single .selectize-input:after {
1330+
font-size: 1.4rem;
1331+
}
1332+
}
1333+
@media (max-width: 39.9375em) {
1334+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-control.single .selectize-input:after {
1335+
font-size: 1.1rem;
1336+
}
1337+
}
1338+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-input {
1339+
border-bottom: 2px solid rgba(0, 166, 171, 0.6);
1340+
max-width: 450px;
1341+
white-space: nowrap;
1342+
overflow: hidden;
1343+
line-height: 1;
1344+
padding-right: 50px;
1345+
text-overflow: ellipsis;
1346+
}
1347+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-input .item,
1348+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-input > input {
1349+
color: #00a6ab;
1350+
font-size: 2rem;
1351+
}
1352+
@media (max-width: 64em) {
1353+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-input .item,
1354+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-input > input {
1355+
font-size: 1.4rem;
1356+
}
1357+
}
1358+
@media (max-width: 39.9375em) {
1359+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-input .item,
1360+
.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select.homepage__select .selectize-input > input {
1361+
font-size: 1.1rem;
1362+
}
1363+
}
1364+
.filter .dropdown {
1365+
padding: 0 5px;
1366+
}
1367+
.filter .selectize-control > input,
1368+
.filter .selectize-input.full {
1369+
background-color: transparent !important;
1370+
height: 42px !important;
1371+
}
1372+
.filter .selectize-input {
1373+
width: 225px;
1374+
white-space: nowrap;
1375+
overflow: hidden;
1376+
text-overflow: ellipsis;
1377+
}
1378+
.filter .selectize-control {
1379+
bottom: 0;
1380+
width: 100%;
1381+
margin-top: 0;
1382+
}
1383+
.filter .selectize-control input {
1384+
font-size: 18px;
1385+
padding: 10px 0 !important;
1386+
}
1387+
.filter .selectize-control.single .selectize-input:after {
1388+
display: none;
1389+
}
1390+
.filter .selectize-control .item {
1391+
padding: 12px 0;
1392+
}
1393+
.filter .selectize-control .selectize-input,
1394+
.filter .selectize-control .item,
1395+
.filter .selectize-control > input {
1396+
font-size: 18px !important;
1397+
background: transparent !important;
1398+
min-height: 42px;
1399+
}
1400+
.filter .selectize-dropdown {
1401+
border-top: 1px solid #00a6ab;
1402+
border-color: #00a6ab !important;
1403+
top: 46px !important;
1404+
}
1405+
.filter .selectize-dropdown,
1406+
.filter .selectize-dropdown-content {
1407+
width: 100% !important;
1408+
}

0 commit comments

Comments
 (0)