lbry.tech/app/sass/pages/_api.scss
netop://ウエハ e260ae0e28 In progress
2019-07-10 12:34:19 -05:00

361 lines
5.4 KiB
SCSS

.__slate {
width: 100%;
height: 100%;
position: relative;
&::after {
@include clearfix;
}
}
.api-header {
padding: 2rem;
position: relative;
&::after {
width: 100%; height: 1px;
bottom: -1px; left: 0;
background-color: $lbry-gray-2;
content: "";
position: absolute;
}
}
.api-toc {
width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
bottom: 0;
background-color: $lbry-white;
border-right: 1px solid $lbry-gray-1;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
z-index: 3;
@media (min-width: 801px) {
left: 0;
}
@media (max-width: 800px) {
height: calc(100% - 4rem);
top: 4rem;
padding-top: 3.5rem;
transition: left 0.2s;
-webkit-overflow-scrolling: touch;
&:not(.active) {
left: -200px;
}
&.active {
left: 0;
}
}
}
.api-toc__select,
.api-toc__search-field {
width: 100%;
border-top: none;
border-right: none;
border-bottom: 1px solid $lbry-gray-1;
border-left: none;
}
.api-toc__select {
background-position-x: 95%;
}
.api-toc__search {
position: relative;
}
.api-toc__search-field {
padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
border-radius: 0; // TODO: Put this rule in components on inputs
font-size: 0.8rem;
line-height: 2rem;
}
.api-toc__search-clear {
width: 1.25rem; height: 1.25rem;
top: 0.6rem; right: 0.75rem;
background-color: $lbry-black;
border-radius: 50%;
color: $lbry-white;
cursor: pointer;
font-size: 1rem;
line-height: 1.15;
position: absolute;
text-align: center;
transition: opacity 0.2s;
&:not(.active) {
opacity: 0;
visibility: hidden;
}
&.active {
opacity: 1;
visibility: visible;
}
}
.api-toc__title {
padding: 0.25rem 0.5rem 0.25rem 0.75rem;
opacity: 0.3;
pointer-events: none;
text-transform: uppercase;
}
.api-toc__commands {
font-size: 0.8rem;
line-height: 1.33;
list-style-type: none;
padding-top: 0.25rem;
padding-bottom: 1rem;
}
.api-toc__command {
&:hover {
background-color: $lbry-gray-2;
}
a {
padding: 0.25rem 0.5rem 0.25rem 0.75rem;
display: block;
}
}
.api-content {
@media (min-width: 801px) {
width: calc(100% - 200px);
float: right;
}
}
.api-documentation {
display: grid;
@media (min-width: 1201px) {
grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
}
@media (max-width: 1200px) {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
div {
&:empty {
display: none;
}
}
}
h1 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
h3 {
font-size: 0.8rem;
letter-spacing: 0.1rem;
margin-bottom: 0.25rem;
text-transform: uppercase;
}
p,
ol,
ul {
line-height: 1.5;
margin-bottom: 1rem;
}
ol,
ul {
@media (min-width: 801px) {
font-size: 1rem;
}
@media (max-width: 800px) {
font-size: 0.8rem;
}
}
p {
font-size: 1rem;
}
pre {
font-size: 0.8rem;
}
table {
width: 100%;
border: 1px solid rgba($lbry-white, 0.1);
border-radius: 0.3rem;
border-spacing: 0;
font-size: 0.8rem;
line-height: 1.33;
}
thead {
display: none;
}
th,
td {
padding: 0.5rem 1rem 0.5rem 0.5rem;
}
th {
border-bottom: 1px solid rgba($lbry-white, 0.1);
}
tr:nth-child(even) {
background-color: rgba($lbry-white, 0.1);
}
}
.api-content__body {
padding: 2rem;
border-bottom: 1px solid $lbry-gray-1;
a {
transition: color 0.2s;
&:not(:hover) {
color: $lbry-teal-3;
}
&:hover {
color: $lbry-teal-5;
}
}
}
.api-content__body-arguments {
border: 1px solid $lbry-gray-2;
border-radius: 3px;
list-style-type: none;
}
.api-content__body-argument {
display: flex;
&:not(:last-of-type) {
border-bottom: 1px solid $lbry-gray-2;
}
&:nth-child(even) {
background-color: rgba($lbry-gray-1, 0.2);
}
.left,
.right {
padding: 0.5rem 0.75rem;
}
.left {
width: 30%;
float: left;
word-wrap: break-word;
@media (min-width: 801px) {
border-right: 1px solid $lbry-gray-2;
}
span {
color: $lbry-gray-3;
font-size: 0.8rem;
&:not(:first-of-type) {
margin-left: 0.5rem;
}
}
}
.right {
width: 70%;
float: right;
word-wrap: break-word;
}
&::after {
@include clearfix;
}
}
.api-content__example,
.api-content__intro {
padding: 2rem;
background-color: rgba($lbry-black, 0.9);
border-bottom: 1px solid rgba($lbry-white, 0.1);
color: $lbry-white;
position: relative;
pre {
background-color: $lbry-black;
}
}
.api-content__items {
width: 100%;
padding: 1rem 2rem;
top: 4rem; right: 0;
background-color: $lbry-black;
color: $lbry-white;
position: sticky;
z-index: 10;
// GOOD OL' SAFARI
position: -webkit-sticky; // sass-lint:disable-line no-duplicate-properties
}
.api-content__item {
padding: 0.25rem 0.75rem;
border-radius: 0.2rem;
display: inline-block;
font-size: 0.8rem;
transition: background-color 0.2s;
&.menu {
@media (min-width: 801px) {
display: none;
}
}
&:not(:last-of-type) {
margin-right: 0.5rem;
}
&:not(:hover) {
background-color: $lbry-gray-5;
}
&.active,
&:hover {
background-color: $lbry-teal-4;
}
}
pre {
&[data-api-example-type] {
&:not(.active) {
display: none;
}
}
}