1054d554d8
Previously, with the min width of 220px per item, several API list items were truncated. This commit increases the min width per item to 330px, which allows almost all items to have their full text shown. It also increases the API list page's max content width from 50em (800px) to 62.5em (1000px) to allow items to be shown on three columns despite their increased width. This increase in the content width shouldn't negatively affect UX, since the API list page uses a multi-column layout (i.e. it does not contain 1000px-lines of text.) Before: ![api-list before][1] After: ![api-list after][2] [1]: https://user-images.githubusercontent.com/8604205/109396457-5f5e1f00-793a-11eb-80cf-1418f409325a.png [2]: https://user-images.githubusercontent.com/8604205/109396659-499d2980-793b-11eb-95d3-f54250f7fab5.png PR Close #41051
149 lines
2.9 KiB
SCSS
149 lines
2.9 KiB
SCSS
/* API LIST STYLES */
|
|
|
|
aio-api-list {
|
|
.api-filter {
|
|
display: flex;
|
|
margin: 0 auto;
|
|
|
|
@media (max-width: 600px) {
|
|
flex-direction: column;
|
|
margin: 16px auto;
|
|
}
|
|
|
|
/* API FILTER MENU */
|
|
aio-select {
|
|
width: 200px;
|
|
|
|
@media screen and (max-width: 600px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.form-select-menu,
|
|
.form-search {
|
|
margin: 8px;
|
|
|
|
@media screen and (max-width: 600px) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
aio-select:first-child {
|
|
.form-select-menu {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.form-search {
|
|
position: relative;
|
|
float: left;
|
|
|
|
input {
|
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
box-sizing: border-box;
|
|
border: 1px solid $white;
|
|
border-radius: 4px;
|
|
color: $darkgray;
|
|
@include font-size(14);
|
|
@include line-height(32);
|
|
outline: none;
|
|
padding: 4px 16px 4px 32px;
|
|
transition: all .2s;
|
|
width: 182px;
|
|
|
|
@include placeholder {
|
|
@include font-size(14);
|
|
color: $mediumgray;
|
|
}
|
|
|
|
&:focus {
|
|
border: 1px solid $blue-400;
|
|
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.material-icons {
|
|
color: $blue-grey-600;
|
|
@include font-size(20);
|
|
left: 8px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 12px;
|
|
width: 20px;
|
|
z-index: $layer-1;
|
|
}
|
|
}
|
|
|
|
/* API SEARCH ICON */
|
|
.material-icons {
|
|
right: 48px;
|
|
}
|
|
}
|
|
|
|
/* LAYOUT */
|
|
|
|
.api-list-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px 0;
|
|
position: relative;
|
|
|
|
@media handheld and (max-width: $phone-breakpoint),
|
|
screen and (max-device-width: $phone-breakpoint),
|
|
screen and (max-width: $tablet-breakpoint) {
|
|
padding: 24px 0 0;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* API CLASS LIST */
|
|
.api-list {
|
|
list-style: none;
|
|
margin: 0 0 32px -8px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
|
|
@media screen and (max-width: 600px) {
|
|
margin: 0 0 0 -8px;
|
|
}
|
|
|
|
li {
|
|
@include font-size(14);
|
|
margin: 8px 0;
|
|
@include line-height(14);
|
|
padding: 0;
|
|
float: left;
|
|
width: 33%;
|
|
overflow: hidden;
|
|
min-width: 330px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
a {
|
|
color: $blue-grey-600;
|
|
@include line-height(16);
|
|
padding: 0 16px;
|
|
text-decoration: none;
|
|
transition: all .3s;
|
|
|
|
&:hover {
|
|
background: $blue-grey-50;
|
|
color: $blue-500;
|
|
}
|
|
|
|
&.deprecated-api-item {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|