kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace color values with variables for easier theming

Browse Source 
Replaced all color values with variables in scss files and
added associated variables to _variables.scss file
This commit is contained in:
Stuart Nichols
2017-10-16 15:06:51 +01:00
parent 9eae562767
commit 1a02364c2f
12 changed files with 326 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/style/_layout.scss
View File

@@ -34,11 +34,11 @@
cursor: pointer;
transition: all .2s;
border-bottom: 1px solid rgba(#3b4151, .3);
border-bottom: 1px solid rgba($opblock-tag-border-bottom-color, .3);
&:hover
{
background: rgba(#000,.02);
background: rgba($opblock-tag-background-color-hover,.02);
}
}
@@ -127,9 +127,9 @@
{
margin: 0 0 15px 0;
border: 1px solid #000;
border: 1px solid $opblock-border-color;
border-radius: 4px;
box-shadow: 0 0 3px rgba(#000,.19);
box-shadow: 0 0 3px rgba($opblock-box-shadow-color,.19);
.tab-header
{
@@ -168,7 +168,7 @@
content: '';
transform: translateX(-50%);
background: #888;
background: $opblock-tab-header-tab-item-active-h4-span-after-background-color;
}
}
}
@@ -181,7 +181,7 @@
{
.opblock-summary
{
border-bottom: 1px solid #000;
border-bottom: 1px solid $opblock-isopen-summary-border-bottom-color;
}
}
@@ -194,8 +194,8 @@
min-height: 50px;
background: rgba(#fff,.8);
box-shadow: 0 1px 2px rgba(#000,.1);
background: rgba($opblock-isopen-section-header-background-color,.8);
box-shadow: 0 1px 2px rgba($opblock-isopen-section-header-box-shadow-color,.1);
label
{
@@ -239,10 +239,10 @@
text-align: center;
border-radius: 3px;
background: #000;
text-shadow: 0 1px 0 rgba(#000,.1);
background: $opblock-summary-method-background-color;
text-shadow: 0 1px 0 rgba($opblock-summary-method-text-shadow-color,.1);
@include text_headline(#fff);
@include text_headline($opblock-summary-method-font-color);
}
.opblock-summary-path,
@@ -377,7 +377,7 @@
margin: 20px 0;
padding: 10px 10px;
border: 2px solid #d8dde7;
border: 2px solid $operational-filter-input-border-color;
}
}
@@ -420,7 +420,7 @@
content: '';
background: rgba(#000,.2);
background: rgba($tab-list-item-first-background-color,.2);
}
}
@@ -525,7 +525,7 @@
{
font-size: 11px;
@include text_code(#999);
@include text_code($response-col-status-undocumented-font-color);
}
}
@@ -541,7 +541,7 @@
{
font-size: 11px;
@include text_code(#999);
@include text_code($response-col-links-font-color);
}
}
@@ -558,9 +558,9 @@
padding: 10px;
border-radius: 4px;
background: #41444e;
background: $response-col-description-inner-markdown-background-color;
@include text_code(#fff);
@include text_code($response-col-description-inner-markdown-font-color);
p
{
@@ -569,10 +569,10 @@
a
{
@include text_code(#89bf04);
@include text_code($response-col-description-inner-markdown-link-font-color);
text-decoration: underline;
&:hover {
color: #81b10c;
color: $response-col-description-inner-markdown-link-font-color-hover;
}
}
}
@@ -593,13 +593,13 @@
hyphens: auto;
border-radius: 4px;
background: #41444e;
background: $opblock-body-background-color;
overflow-wrap: break-word;
@include text_code(#fff);
@include text_code($opblock-body-font-color);
span
{
color: #fff !important;
color: $opblock-body-font-color !important;
}
.headerline
@@ -613,8 +613,8 @@
margin: 0 0 20px 0;
padding: 30px 0;
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
background: $scheme-container-background-color;
box-shadow: 0 1px 2px 0 rgba($scheme-container-box-shadow-color,.15);
.schemes
{
@@ -648,14 +648,14 @@
margin: 0 0 20px 0;
padding: 30px 0;
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
background: $server-container-background-color;
box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
.computed-url {
margin: 2em 0;
code {
color: grey;
color: $server-container-computed-url-code-font-color;
display: inline-block;
padding: 4px;
font-size: 16px;
@@ -755,8 +755,8 @@
animation: rotation 1s infinite linear, opacity .5s;
opacity: 1;
border: 2px solid rgba(#555, .1);
border-top-color: rgba(#000, .6);
border: 2px solid rgba($loading-container-before-border-color, .1);
border-top-color: rgba($loading-container-before-border-top-color, .6);
border-radius: 100%;
backface-visibility: hidden;
@@ -777,11 +777,11 @@
&.controls-accept-header {
select {
border-color: green;
border-color: $response-content-type-controls-accept-header-select-border-color;
}
small {
color: green;
color: $response-content-type-controls-accept-header-small-font-color;
font-size: .7em;
}
}