mirror of
https://github.com/Redocly/redoc.git
synced 2025-01-27 08:04:07 +03:00
Global styles and Menu style
This commit is contained in:
Cesar
parent
d07e2f0026
commit
06cba79383
|
|
@ -23,7 +23,7 @@ $base-font : Roboto;
|
|||
$base-font-family : sans-serif;
|
||||
$base-font-weight : $regular;
|
||||
$base-font-size : 1em;
|
||||
$base-line-height : 1.4;
|
||||
$base-line-height : 1.55em;
|
||||
$text-color : $black;
|
||||
|
||||
// Heading Font
|
||||
|
|
@ -37,7 +37,7 @@ $h1: 1.85714285714286em;
|
|||
$h2: 1.5714285714285714em;
|
||||
$h3: 1.2857142857142858em;
|
||||
$h4: 1.1428571428571428em;
|
||||
$h5: 1em;
|
||||
$h5: 0.929em;
|
||||
|
||||
// Google Fonts
|
||||
// ---------------------------
|
||||
|
|
@ -50,7 +50,7 @@ $side-bar-width: 260px;
|
|||
$side-bar-bg-color: #FAFAFA;
|
||||
$side-menu-item-color: #384248;
|
||||
$side-menu-even-bg-color: #F0F0F0;
|
||||
$side-menu-active-bg-color: #DEDEDE;
|
||||
$side-menu-active-bg-color: #f0f0f0;
|
||||
$side-menu-item-hpadding: 20px;
|
||||
$side-menu-item-vpadding: 5px;
|
||||
|
||||
|
|
@ -68,40 +68,3 @@ $side-menu-mobile-breakpoint: 1000px;
|
|||
// Border Radius
|
||||
// ---------------------------
|
||||
$border-radius: 2px;
|
||||
|
||||
// Global Styles
|
||||
// ---------------------------
|
||||
@for $index from 1 through 5 {
|
||||
h#{$index}{
|
||||
margin-top: 0;
|
||||
font-family: $headers-font, $headers-font-family;
|
||||
color: $headers-color;
|
||||
font-weight: $headers-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
h1 { font-size: $h1; }
|
||||
h2 { font-size: $h2; }
|
||||
h3 { font-size: $h3; }
|
||||
h4 { font-size: $h4; }
|
||||
h5 { font-size: $h5; }
|
||||
|
||||
p {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
|
||||
a {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 18px;
|
||||
color: $headers-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
|
|||
display: inline-block;
|
||||
font-size: 14px;
|
||||
padding: $cell-padding 0 $cell-padding 0;
|
||||
font-weight: bold;
|
||||
font-weight: $regular;
|
||||
box-sizing: border-box;
|
||||
line-height: $param-name-height;
|
||||
border-left: $line-border;
|
||||
|
|
@ -76,7 +76,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
|
|||
font-size: 12px;
|
||||
line-height: $param-name-height;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.param-type.array:before {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ responses-list, params-list {
|
|||
}
|
||||
|
||||
.method-header {
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: .9em;
|
||||
}
|
||||
|
||||
.method-endpoint {
|
||||
|
|
@ -22,8 +22,8 @@ responses-list, params-list {
|
|||
}
|
||||
|
||||
.method-endpoint > h5 {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 3px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
font-size: .8em;
|
||||
vertical-align: middle;
|
||||
|
|
@ -32,11 +32,11 @@ responses-list, params-list {
|
|||
}
|
||||
|
||||
.api-url {
|
||||
color: lighten($text-color, 30%);
|
||||
color: rgba($text-color, .6);
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
top: 2px;
|
||||
font-size: 1em!important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<h4 class="param-list-header" *ngIf="data.params.length"> Parameters </h4>
|
||||
<h5 class="param-list-header" *ngIf="data.params.length"> Parameters </h5>
|
||||
<template ngFor [ngForOf]="data.params" #paramType="$implicit">
|
||||
<header class="paramType"> {{paramType.place}} Parameters </header>
|
||||
<br>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</template>
|
||||
|
||||
<div *ngIf="data.bodyParam">
|
||||
<h4 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h4>
|
||||
<h5 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h5>
|
||||
|
||||
<div class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
.param-list-header {
|
||||
border-bottom: 1px solid lighten($text-color, 60%);
|
||||
border-bottom: 1px solid rgba($text-color, .3);
|
||||
padding: 0.2em 0;
|
||||
margin: 3em 0 .5em 0;
|
||||
color: $text-color;
|
||||
margin: 3.5em 0 .8em 0;
|
||||
color: rgba($text-color, .5);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,177 +1,219 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.redoc-wrap {
|
||||
position: relative;
|
||||
font-family: $base-font, $base-font-family;
|
||||
font-size: $em-size;
|
||||
line-height: $base-line-height;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
font-family: $base-font, $base-font-family;
|
||||
font-size: $em-size;
|
||||
line-height: $base-line-height;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
side-menu {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
methods-list {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
api-info, .side-bar {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
api-info {
|
||||
padding: 40px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
api-logo {
|
||||
display: block;
|
||||
text-align: center;
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[sticky-sidebar] {
|
||||
width: $side-bar-width;
|
||||
background-color: $side-bar-bg-color;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: $side-bar-width;
|
||||
background-color: $side-bar-bg-color;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
bottom: auto !important;
|
||||
}
|
||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
bottom: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
#api-content {
|
||||
margin-left: $side-bar-width;
|
||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||
padding-top: 3em;
|
||||
margin-left: 0;
|
||||
}
|
||||
margin-left: $side-bar-width;
|
||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||
padding-top: 3em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#api-content:after {
|
||||
content: "";
|
||||
position: absolute;;
|
||||
left:0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
display: none;
|
||||
content: "";
|
||||
position: absolute;;
|
||||
left:0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#api-content.menu-opened:after {
|
||||
display: block;;
|
||||
display: block;;
|
||||
}
|
||||
|
||||
/* global redoc styles */
|
||||
|
||||
:host p {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
@for $index from 1 through 5 {
|
||||
:host h#{$index}{
|
||||
margin-top: 0;
|
||||
font-family: $headers-font, $headers-font-family;
|
||||
color: $headers-color;
|
||||
font-weight: $headers-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
h1 { font-size: $h1; }
|
||||
h2 { font-size: $h2; }
|
||||
h3 { font-size: $h3; }
|
||||
h4 { font-size: $h4; }
|
||||
h5 { font-size: $h5; }
|
||||
|
||||
p {
|
||||
font-family: $base-font, $base-font-family;
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
p > code {
|
||||
color: $red;
|
||||
border: 1px solid rgba(38,50,56,0.1);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 18px;
|
||||
color: $headers-color;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* markdown elements */
|
||||
|
||||
:host .redoc-markdown-block {
|
||||
pre {
|
||||
font-family: Courier, monospace;
|
||||
white-space: pre-wrap;
|
||||
background-color: rgba(38,50,56,0.04);
|
||||
padding: 12px 14px 15px 14px;
|
||||
overflow-x: auto;
|
||||
line-height: normal;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid rgba(38,50,56,0.1);
|
||||
pre {
|
||||
font-family: Courier, monospace;
|
||||
white-space: pre-wrap;
|
||||
background-color: rgba(38,50,56,0.04);
|
||||
padding: 12px 14px 15px 14px;
|
||||
overflow-x: auto;
|
||||
line-height: normal;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid rgba(38,50,56,0.1);
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
|
||||
&:before, &:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
font-family: Courier, monospace;
|
||||
background-color: rgba(38,50,56,0.04);
|
||||
padding: 0.1em 0 0.2em 0;
|
||||
font-size: 1em;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:before, &:after {
|
||||
content: none;
|
||||
}
|
||||
&:before, &:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Courier, monospace;
|
||||
background-color: rgba(0,0,0,0.04);
|
||||
padding: 0.2em 0;
|
||||
font-size: 1em;
|
||||
border-radius: 3px;
|
||||
|
||||
&:before, &:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\\00a0";
|
||||
p:last-of-type {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
p:last-of-type {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
padding: 0 15px;
|
||||
color: #777;
|
||||
border-left: 4px solid #ddd;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 2em;
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
word-break: normal;
|
||||
word-break: keep-all;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
blockquote {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
padding: 0 15px;
|
||||
color: #777;
|
||||
border-left: 4px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
table th {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 2em;
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
word-break: normal;
|
||||
word-break: keep-all;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
header {
|
||||
font-family: $headers-font;
|
||||
font-size: .9em;
|
||||
font-size: $h5;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 12px 0;
|
||||
color: $sample-panel-headers-color;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div id="resources-nav">
|
||||
<h2 class="menu-header"> API reference </h2>
|
||||
<h5 class="menu-header"> API reference </h5>
|
||||
<div *ngFor="var cat of data.menu; #idx = index" class="menu-cat">
|
||||
|
||||
<label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label>
|
||||
|
|
|
|||
|
|
@ -2,152 +2,150 @@
|
|||
$mobile-menu-compact-breakpoint: 550px;
|
||||
|
||||
.menu-header {
|
||||
text-transform: uppercase;
|
||||
color: $headers-color;
|
||||
padding: 0 $side-menu-item-hpadding;
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $headers-color;
|
||||
padding: 0 $side-menu-item-hpadding;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.menu-cat-header {
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
color: $side-menu-item-color;
|
||||
text-transform: uppercase;
|
||||
background-color: $side-bar-bg-color;
|
||||
font-size: $h5;
|
||||
font-family: $headers-font, $headers-font-family;
|
||||
font-weight: $light;
|
||||
cursor: pointer;
|
||||
color: $text-color;
|
||||
text-transform: uppercase;
|
||||
background-color: $side-bar-bg-color;
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-ms-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
display: block;
|
||||
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
|
||||
|
||||
display: block;
|
||||
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
|
||||
}
|
||||
|
||||
.menu-cat:nth-of-type(even) .menu-cat-header {
|
||||
background-color: $side-menu-even-bg-color;
|
||||
}
|
||||
|
||||
.menu-cat .menu-cat-header.active {
|
||||
background-color: darken($side-menu-active-bg-color, 5%);
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $primary-color;
|
||||
background-color: $side-menu-active-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-subitems {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: $regular;
|
||||
color: rgba($text-color, .6);
|
||||
padding: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& li {
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-ms-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
list-style: none inside none;
|
||||
cursor: pointer;
|
||||
background-color: $side-menu-active-bg-color;
|
||||
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
|
||||
padding-left: $side-menu-item-hpadding*2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
& li:hover,
|
||||
& li.active {
|
||||
background: darken($side-menu-active-bg-color, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-subitems.active {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.menu-subitems li {
|
||||
list-style: none inside none;
|
||||
cursor: pointer;
|
||||
|
||||
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
|
||||
padding-left: $side-menu-item-hpadding*2;
|
||||
background-color: $side-bar-bg-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.menu-subitems li:nth-of-type(even) {
|
||||
background-color: $side-menu-even-bg-color;
|
||||
}
|
||||
|
||||
// invert item colors for odd categories
|
||||
.menu-cat:nth-of-type(odd) {
|
||||
.menu-subitems li {
|
||||
background-color: $side-menu-even-bg-color;
|
||||
}
|
||||
|
||||
.menu-subitems li:nth-of-type(even) {
|
||||
background-color: $side-bar-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-cat .menu-subitems {
|
||||
li.active, li.active:nth-of-type(even) {
|
||||
background-color: $side-menu-active-bg-color;
|
||||
}
|
||||
.menu-subitems li.active {
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 3em;
|
||||
display: none;
|
||||
height: 3em;
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
|
||||
background-size: 70%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
line-height: 3em;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
|
||||
background-size: 70%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
.menu-header {
|
||||
padding: 0 10px 0 20px;
|
||||
font-size: 0.95em;
|
||||
|
||||
@media (max-width: $mobile-menu-compact-breakpoint) {
|
||||
display: none;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
padding: 0 10px 0 20px;
|
||||
font-size: 0.95em;
|
||||
|
||||
@media (max-width: $mobile-menu-compact-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
}
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#resources-nav {
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
#resources-nav {
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#resources-nav .menu-header {
|
||||
display: none;
|
||||
}
|
||||
#resources-nav .menu-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-subitems {
|
||||
height: auto;
|
||||
}
|
||||
.menu-subitems {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-tag {
|
||||
text-transform: capitalize;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.selected-endpoint:before {
|
||||
content: "/";
|
||||
padding: 0 2px;
|
||||
color: #ccc;
|
||||
content: "/";
|
||||
padding: 0 2px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.selected-endpoint:empty:before {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selected-item-info {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
max-width: 350px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
max-width: 350px;
|
||||
|
||||
@media (max-width: $mobile-menu-compact-breakpoint) {
|
||||
display: inline-block;
|
||||
padding: 0 20px;
|
||||
max-width: 80%;
|
||||
max-width: calc(100% - 4em);
|
||||
}
|
||||
@media (max-width: $mobile-menu-compact-breakpoint) {
|
||||
display: inline-block;
|
||||
padding: 0 20px;
|
||||
max-width: 80%;
|
||||
max-width: calc(100% - 4em);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user