7x31/nginxconfig.io
1
0
Fork 0
mirror of https://github.com/digitalocean/nginxconfig.io.git synced 2025-08-25 01:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

demo

Browse Source
This commit is contained in:
Bálint Szekeres
2019-11-11 00:20:17 +01:00
parent 0f8d62a9ab
commit 4b60c9e481
17 changed files with 332 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/scss/_codes.scss Normal file
View File

@@ -0,0 +1,22 @@
main .file .code,
section.steps .commands {
overflow-x: auto;
font-size: 0.75rem;
line-height: 1.25;
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
pre {
margin-bottom: 0;
font-size: inherit;
code {
display: block;
padding: 8px 8px 12px;
-moz-tab-size: 4;
tab-size: 4;
overflow: visible;
overflow-x: visible;
}
}
}

46
resources/scss/_main.scss
View File

@@ -257,29 +257,6 @@ main {
}
}
.commands {
margin-bottom: 1rem;
line-height: 1.35;
.step {
counter-reset: step-command-counter;
.counter {
display: inline-block;
margin-top: 0.15rem;
&::before {
counter-increment: step-command-counter;
content: counter(step-command-counter);
}
}
& > span:first-of-type .counter {
margin-top: 0;
}
}
}
.file {
margin-bottom: 2rem;
@@ -301,27 +278,4 @@ main {
left: -9999px;
}
}
.commands,
.file .code {
overflow-x: auto;
font-size: 0.75rem;
line-height: 1.25;
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
pre {
margin-bottom: 0;
font-size: inherit;
code {
display: block;
padding: 8px 8px 12px;
-moz-tab-size: 4;
tab-size: 4;
overflow: visible;
overflow-x: visible;
}
}
}
}

25
resources/scss/_steps.scss
View File

@@ -1,5 +1,5 @@
section.steps {
ol {
ol.step-icons {
display: flex;
flex-direction: row;
list-style: none;
@@ -165,4 +165,27 @@ section.steps {
}
}
}
.commands {
margin-bottom: 1rem;
line-height: 1.35;
.step {
counter-reset: step-command-counter;
.counter {
display: inline-block;
margin-top: 0.15rem;
&::before {
counter-increment: step-command-counter;
content: counter(step-command-counter);
}
}
& > span:first-of-type .counter {
margin-top: 0;
}
}
}
}

1
resources/scss/app.scss
View File

@@ -11,6 +11,7 @@
@import 'header';
@import 'steps';
@import 'main';
@import 'codes';
@import 'sidebar';
@import 'footer';

180
resources/scss/layout/_do.scss
View File

@@ -56,6 +56,62 @@
background-color: #e5e5e5;
}
.nav-pills {
margin: 25px 0;
background-color: #ffffff;
border: 1px solid #dde1e8;
border-radius: 5px;
overflow: hidden;
.nav-item {
&:first-child {
.nav-link {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
}
&:last-child {
.nav-link {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right: 0;
}
}
&.disabled {
pointer-events: none;
user-select: none;
opacity: 0.4;
}
.nav-link {
cursor: pointer;
position: relative;
border-right: 1px solid #dde1e8;
border-radius: 0;
&.active {
background-color: #0069ff;
&:hover {
color: #ffffff;
}
}
&.visited {
background-color: #dfeeff;
}
}
}
}
.tab-navigation-buttons {
margin: 20px 0 32px;
text-align: right;
}
header {
padding: 0;
background-color: #031b4e;
@@ -220,73 +276,30 @@
}
}
.nav-pills {
margin: 25px 0;
background-color: #ffffff;
border: 1px solid #dde1e8;
border-radius: 5px;
overflow: hidden;
.nav-pills .nav-item .nav-link {
&.changed {
font-weight: 700;
.nav-item {
&:first-child {
.nav-link {
small {
display: inline;
color: #ccc;
top: 52.5%;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
@include media-breakpoint-up(xl) {
padding-left: 0.3rem;
}
}
}
&:last-child {
.nav-link {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right: 0;
}
}
small {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
color: #999;
.nav-link {
cursor: pointer;
position: relative;
border-right: 1px solid #dde1e8;
border-radius: 0;
&.active {
background-color: #0069ff;
&:hover {
color: #ffffff;
}
}
&.changed {
font-weight: 700;
small {
display: inline;
color: #ccc;
top: 52.5%;
@include media-breakpoint-up(xl) {
padding-left: 0.3rem;
}
}
}
&.visited {
background-color: #dfeeff;
}
small {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
color: #999;
@include media-breakpoint-down(lg) {
right: 0.25rem;
}
}
@include media-breakpoint-down(lg) {
right: 0.25rem;
}
}
}
@@ -324,11 +337,6 @@
}
}
.tab-navigation-buttons {
margin: 20px 0 32px;
text-align: right;
}
.btn-outline-light {
box-shadow: none !important;
color: #666;
@@ -354,4 +362,44 @@
}
}
}
section.steps {
margin-top: 53px;
margin-bottom: 37px;
.card {
border: 1px solid #dee2e6;
background-color: #fafafa;
padding: 0.5rem 40px 0.25rem;
}
.commands-do {
ol {
li + li{
margin-top: 1rem;
}
}
code {
background-color: #e5e8ed;
color: #3b4e76;
border: 1px solid #cbcdd3;
border-radius: 3px;
font-style: italic;
padding-left: 3px;
padding-right: 3px;
}
}
}
main .buttons {
margin-bottom: 30px;
.btn {
margin: 0 10px;
font-weight: 700;
font-size: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
}