mirror of
https://github.com/Redocly/redoc.git
synced 2025-02-10 23:10:34 +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-family : sans-serif;
|
||||||
$base-font-weight : $regular;
|
$base-font-weight : $regular;
|
||||||
$base-font-size : 1em;
|
$base-font-size : 1em;
|
||||||
$base-line-height : 1.4;
|
$base-line-height : 1.55em;
|
||||||
$text-color : $black;
|
$text-color : $black;
|
||||||
|
|
||||||
// Heading Font
|
// Heading Font
|
||||||
|
|
@ -37,7 +37,7 @@ $h1: 1.85714285714286em;
|
||||||
$h2: 1.5714285714285714em;
|
$h2: 1.5714285714285714em;
|
||||||
$h3: 1.2857142857142858em;
|
$h3: 1.2857142857142858em;
|
||||||
$h4: 1.1428571428571428em;
|
$h4: 1.1428571428571428em;
|
||||||
$h5: 1em;
|
$h5: 0.929em;
|
||||||
|
|
||||||
// Google Fonts
|
// Google Fonts
|
||||||
// ---------------------------
|
// ---------------------------
|
||||||
|
|
@ -50,7 +50,7 @@ $side-bar-width: 260px;
|
||||||
$side-bar-bg-color: #FAFAFA;
|
$side-bar-bg-color: #FAFAFA;
|
||||||
$side-menu-item-color: #384248;
|
$side-menu-item-color: #384248;
|
||||||
$side-menu-even-bg-color: #F0F0F0;
|
$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-hpadding: 20px;
|
||||||
$side-menu-item-vpadding: 5px;
|
$side-menu-item-vpadding: 5px;
|
||||||
|
|
||||||
|
|
@ -68,40 +68,3 @@ $side-menu-mobile-breakpoint: 1000px;
|
||||||
// Border Radius
|
// Border Radius
|
||||||
// ---------------------------
|
// ---------------------------
|
||||||
$border-radius: 2px;
|
$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;
|
display: inline-block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: $cell-padding 0 $cell-padding 0;
|
padding: $cell-padding 0 $cell-padding 0;
|
||||||
font-weight: bold;
|
font-weight: $regular;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: $param-name-height;
|
line-height: $param-name-height;
|
||||||
border-left: $line-border;
|
border-left: $line-border;
|
||||||
|
|
@ -76,7 +76,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: $param-name-height;
|
line-height: $param-name-height;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-weight: bold;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.param-type.array:before {
|
.param-type.array:before {
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ responses-list, params-list {
|
||||||
}
|
}
|
||||||
|
|
||||||
.method-header {
|
.method-header {
|
||||||
margin-bottom: .5em;
|
margin-bottom: .9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.method-endpoint {
|
.method-endpoint {
|
||||||
|
|
@ -22,8 +22,8 @@ responses-list, params-list {
|
||||||
}
|
}
|
||||||
|
|
||||||
.method-endpoint > h5 {
|
.method-endpoint > h5 {
|
||||||
padding-top: 4px;
|
padding-top: 1px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -32,11 +32,11 @@ responses-list, params-list {
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-url {
|
.api-url {
|
||||||
color: lighten($text-color, 30%);
|
color: rgba($text-color, .6);
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 1px;
|
top: 2px;
|
||||||
font-size: 1em!important;
|
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">
|
<template ngFor [ngForOf]="data.params" #paramType="$implicit">
|
||||||
<header class="paramType"> {{paramType.place}} Parameters </header>
|
<header class="paramType"> {{paramType.place}} Parameters </header>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div *ngIf="data.bodyParam">
|
<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 class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
@import '../../common/styles/variables';
|
@import '../../common/styles/variables';
|
||||||
|
|
||||||
.param-list-header {
|
.param-list-header {
|
||||||
border-bottom: 1px solid lighten($text-color, 60%);
|
border-bottom: 1px solid rgba($text-color, .3);
|
||||||
padding: 0.2em 0;
|
padding: 0.2em 0;
|
||||||
margin: 3em 0 .5em 0;
|
margin: 3.5em 0 .8em 0;
|
||||||
color: $text-color;
|
color: rgba($text-color, .5);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,177 +1,219 @@
|
||||||
@import '../../common/styles/variables';
|
@import '../../common/styles/variables';
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.redoc-wrap {
|
.redoc-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-family: $base-font, $base-font-family;
|
font-family: $base-font, $base-font-family;
|
||||||
font-size: $em-size;
|
font-size: $em-size;
|
||||||
line-height: $base-line-height;
|
line-height: $base-line-height;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
side-menu {
|
side-menu {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
methods-list {
|
methods-list {
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
api-info, .side-bar {
|
api-info, .side-bar {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
api-info {
|
api-info {
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
api-logo {
|
api-logo {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[sticky-sidebar] {
|
[sticky-sidebar] {
|
||||||
width: $side-bar-width;
|
width: $side-bar-width;
|
||||||
background-color: $side-bar-bg-color;
|
background-color: $side-bar-bg-color;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
bottom: auto !important;
|
bottom: auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#api-content {
|
#api-content {
|
||||||
margin-left: $side-bar-width;
|
margin-left: $side-bar-width;
|
||||||
@media (max-width: $side-menu-mobile-breakpoint) {
|
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||||
padding-top: 3em;
|
padding-top: 3em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#api-content:after {
|
#api-content:after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;;
|
position: absolute;;
|
||||||
left:0;
|
left:0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#api-content.menu-opened:after {
|
#api-content.menu-opened:after {
|
||||||
display: block;;
|
display: block;;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* global redoc styles */
|
/* global redoc styles */
|
||||||
|
|
||||||
:host p {
|
@for $index from 1 through 5 {
|
||||||
margin: 0;
|
:host h#{$index}{
|
||||||
margin-bottom: 1em;
|
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 */
|
/* markdown elements */
|
||||||
|
|
||||||
:host .redoc-markdown-block {
|
:host .redoc-markdown-block {
|
||||||
pre {
|
pre {
|
||||||
font-family: Courier, monospace;
|
font-family: Courier, monospace;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
background-color: rgba(38,50,56,0.04);
|
background-color: rgba(38,50,56,0.04);
|
||||||
padding: 12px 14px 15px 14px;
|
padding: 12px 14px 15px 14px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
border: 1px solid rgba(38,50,56,0.1);
|
border: 1px solid rgba(38,50,56,0.1);
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
code {
|
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 {
|
&:before, &:after {
|
||||||
content: none;
|
letter-spacing: -0.2em;
|
||||||
}
|
content: "\\00a0";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
p:last-of-type {
|
||||||
font-family: Courier, monospace;
|
margin-bottom: 1em;
|
||||||
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 {
|
blockquote {
|
||||||
margin-bottom: 1em;
|
margin: 0;
|
||||||
}
|
margin-bottom: 1em;
|
||||||
|
padding: 0 15px;
|
||||||
blockquote {
|
color: #777;
|
||||||
margin: 0;
|
border-left: 4px solid #ddd;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
table th, table td {
|
img {
|
||||||
padding: 6px 13px;
|
max-width: 100%;
|
||||||
border: 1px solid #ddd;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
table th {
|
ul, ol {
|
||||||
text-align: left;
|
padding-left: 2em;
|
||||||
font-weight: bold;
|
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 {
|
header {
|
||||||
font-family: $headers-font;
|
font-family: $headers-font;
|
||||||
font-size: .9em;
|
font-size: $h5;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin: 0 0 12px 0;
|
margin: 0 0 12px 0;
|
||||||
color: $sample-panel-headers-color;
|
color: $sample-panel-headers-color;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="resources-nav">
|
<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">
|
<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>
|
<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;
|
$mobile-menu-compact-breakpoint: 550px;
|
||||||
|
|
||||||
.menu-header {
|
.menu-header {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $headers-color;
|
color: $headers-color;
|
||||||
padding: 0 $side-menu-item-hpadding;
|
padding: 0 $side-menu-item-hpadding;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-cat-header {
|
.menu-cat-header {
|
||||||
font-size: 15px;
|
font-size: $h5;
|
||||||
cursor: pointer;
|
font-family: $headers-font, $headers-font-family;
|
||||||
color: $side-menu-item-color;
|
font-weight: $light;
|
||||||
text-transform: uppercase;
|
cursor: pointer;
|
||||||
background-color: $side-bar-bg-color;
|
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;
|
&:hover,
|
||||||
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
|
&.active {
|
||||||
}
|
color: $primary-color;
|
||||||
|
background-color: $side-menu-active-bg-color;
|
||||||
.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%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-subitems {
|
.menu-subitems {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
font-size: 13px;
|
||||||
height: 0;
|
font-weight: $regular;
|
||||||
overflow: hidden;
|
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 {
|
.menu-subitems li.active {
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-nav {
|
.mobile-nav {
|
||||||
display: none;
|
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;
|
|
||||||
height: 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>');
|
line-height: 3em;
|
||||||
background-size: 70%;
|
box-sizing: border-box;
|
||||||
background-repeat: no-repeat;
|
border-bottom: 1px solid #ccc;
|
||||||
background-position: center;
|
cursor: pointer;
|
||||||
|
|
||||||
float: right;
|
&:after {
|
||||||
vertical-align: middle;
|
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 {
|
float: right;
|
||||||
padding: 0 10px 0 20px;
|
vertical-align: middle;
|
||||||
font-size: 0.95em;
|
}
|
||||||
|
|
||||||
@media (max-width: $mobile-menu-compact-breakpoint) {
|
.menu-header {
|
||||||
display: none;
|
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) {
|
@media (max-width: $side-menu-mobile-breakpoint) {
|
||||||
.mobile-nav {
|
.mobile-nav {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#resources-nav {
|
#resources-nav {
|
||||||
height: 0;
|
height: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#resources-nav .menu-header {
|
#resources-nav .menu-header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-subitems {
|
.menu-subitems {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-tag {
|
.selected-tag {
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-endpoint:before {
|
.selected-endpoint:before {
|
||||||
content: "/";
|
content: "/";
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-endpoint:empty:before {
|
.selected-endpoint:empty:before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-item-info {
|
.selected-item-info {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
|
|
||||||
@media (max-width: $mobile-menu-compact-breakpoint) {
|
@media (max-width: $mobile-menu-compact-breakpoint) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
max-width: calc(100% - 4em);
|
max-width: calc(100% - 4em);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user