feat: apply cumulative update to address various issues (#10324)
This commit is contained in:
Vladimír Gorej
@@ -1,107 +1,96 @@
|
||||
.auth-btn-wrapper
|
||||
{
|
||||
display: flex;
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
padding: 10px 0;
|
||||
.auth-btn-wrapper {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.btn-done {
|
||||
margin-right: 1em;
|
||||
}
|
||||
justify-content: center;
|
||||
|
||||
.btn-done {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-wrapper
|
||||
{
|
||||
display: flex;
|
||||
.auth-wrapper {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
.authorize
|
||||
{
|
||||
padding-right: 20px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.authorize {
|
||||
padding-right: 20px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-container
|
||||
{
|
||||
margin: 0 0 10px 0;
|
||||
.auth-container {
|
||||
margin: 0 0 10px 0;
|
||||
padding: 10px 20px;
|
||||
|
||||
border-bottom: 1px solid $auth-container-border-color;
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
|
||||
border-bottom: 1px solid $auth-container-border-color;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:last-of-type
|
||||
{
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
h4 {
|
||||
margin: 5px 0 15px 0 !important;
|
||||
}
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
margin: 5px 0 15px 0 !important;
|
||||
}
|
||||
|
||||
.wrapper
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password]
|
||||
{
|
||||
min-width: 230px;
|
||||
}
|
||||
|
||||
.errors
|
||||
{
|
||||
font-size: 12px;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
background-color: #ffeeee;
|
||||
|
||||
color: red;
|
||||
|
||||
margin: 1em;
|
||||
|
||||
@include text_code();
|
||||
|
||||
b
|
||||
{
|
||||
text-transform: capitalize;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
min-width: 230px;
|
||||
}
|
||||
|
||||
.errors {
|
||||
font-size: 12px;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
background-color: #ffeeee;
|
||||
|
||||
color: red;
|
||||
|
||||
margin: 1em;
|
||||
|
||||
@include type.text_code();
|
||||
|
||||
b {
|
||||
text-transform: capitalize;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scopes
|
||||
{
|
||||
h2
|
||||
{
|
||||
font-size: 14px;
|
||||
.scopes {
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
|
||||
@include text_headline();
|
||||
@include type.text_headline();
|
||||
|
||||
a
|
||||
{
|
||||
font-size: 12px;
|
||||
color: $auth-select-all-none-link-font-color;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a {
|
||||
font-size: 12px;
|
||||
color: $auth-select-all-none-link-font-color;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scope-def
|
||||
{
|
||||
padding: 0 0 20px 0;
|
||||
.scope-def {
|
||||
padding: 0 0 20px 0;
|
||||
}
|
||||
|
||||
@@ -1,46 +1,44 @@
|
||||
.btn
|
||||
{
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
@use "mixins";
|
||||
|
||||
.btn {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
padding: 5px 23px;
|
||||
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
|
||||
border: 2px solid $btn-border-color;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1);
|
||||
box-shadow: 0 1px 2px rgba($btn-box-shadow-color, 0.1);
|
||||
|
||||
@include text_headline();
|
||||
@include type.text_headline();
|
||||
|
||||
&.btn-sm
|
||||
{
|
||||
&.btn-sm {
|
||||
font-size: 12px;
|
||||
padding: 4px 23px;
|
||||
}
|
||||
|
||||
&[disabled]
|
||||
{
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&:hover
|
||||
{
|
||||
box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3);
|
||||
&:hover {
|
||||
box-shadow: 0 0 5px rgba($btn-box-shadow-color, 0.3);
|
||||
}
|
||||
|
||||
&.cancel
|
||||
{
|
||||
&.cancel {
|
||||
border-color: $btn-cancel-border-color;
|
||||
background-color: $btn-cancel-background-color;
|
||||
@include text_headline($btn-cancel-font-color);
|
||||
@include type.text_headline($btn-cancel-font-color);
|
||||
}
|
||||
|
||||
&.authorize
|
||||
{
|
||||
&.authorize {
|
||||
line-height: 1;
|
||||
|
||||
display: inline;
|
||||
@@ -49,71 +47,60 @@
|
||||
border-color: $btn-authorize-border-color;
|
||||
background-color: $btn-authorize-background-color;
|
||||
|
||||
span
|
||||
{
|
||||
span {
|
||||
float: left;
|
||||
|
||||
padding: 4px 20px 0 0;
|
||||
}
|
||||
|
||||
svg
|
||||
{
|
||||
svg {
|
||||
fill: $btn-authorize-svg-fill-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.execute
|
||||
{
|
||||
&.execute {
|
||||
background-color: $btn-execute-background-color-alt;
|
||||
color: $btn-execute-font-color;
|
||||
border-color: $btn-execute-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group
|
||||
{
|
||||
.btn-group {
|
||||
display: flex;
|
||||
|
||||
padding: 30px;
|
||||
|
||||
.btn
|
||||
{
|
||||
.btn {
|
||||
flex: 1;
|
||||
|
||||
&:first-child
|
||||
{
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
&:last-child
|
||||
{
|
||||
&:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.authorization__btn
|
||||
{
|
||||
.authorization__btn {
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
.locked
|
||||
{
|
||||
.locked {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.unlocked
|
||||
{
|
||||
opacity: .4;
|
||||
.unlocked {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.opblock-summary-control,
|
||||
.models-control,
|
||||
.model-box-control
|
||||
{
|
||||
.model-box-control {
|
||||
all: inherit;
|
||||
flex: 1;
|
||||
border-bottom: 0;
|
||||
@@ -126,50 +113,41 @@
|
||||
}
|
||||
|
||||
.expand-methods,
|
||||
.expand-operation
|
||||
{
|
||||
.expand-operation {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
svg
|
||||
{
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-methods
|
||||
{
|
||||
.expand-methods {
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover
|
||||
{
|
||||
svg
|
||||
{
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $expand-methods-svg-fill-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
svg
|
||||
{
|
||||
transition: all .3s;
|
||||
svg {
|
||||
transition: all 0.3s;
|
||||
|
||||
fill: $expand-methods-svg-fill-color;
|
||||
}
|
||||
}
|
||||
|
||||
button
|
||||
{
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
&.invalid
|
||||
{
|
||||
@include invalidFormElement();
|
||||
&.invalid {
|
||||
@include mixins.invalidFormElement();
|
||||
}
|
||||
}
|
||||
|
||||
.copy-to-clipboard
|
||||
{
|
||||
.copy-to-clipboard {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -182,45 +160,40 @@ button
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
|
||||
button
|
||||
{
|
||||
button {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
border: none;
|
||||
height: 25px;
|
||||
background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill='#ffffff' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></g></svg>") center center no-repeat;
|
||||
background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill='#ffffff' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></g></svg>")
|
||||
center center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-to-clipboard:active
|
||||
{
|
||||
.copy-to-clipboard:active {
|
||||
background: #5e626f;
|
||||
}
|
||||
|
||||
.opblock-control-arrow
|
||||
{
|
||||
.opblock-control-arrow {
|
||||
border: none;
|
||||
text-align: center;
|
||||
background: none;
|
||||
}
|
||||
|
||||
// overrides for smaller copy button for curl command
|
||||
.curl-command .copy-to-clipboard
|
||||
{
|
||||
.curl-command .copy-to-clipboard {
|
||||
bottom: 5px;
|
||||
right: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
button
|
||||
{
|
||||
button {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// overrides for copy to clipboard button
|
||||
.opblock .opblock-summary .view-line-link.copy-to-clipboard
|
||||
{
|
||||
.opblock .opblock-summary .view-line-link.copy-to-clipboard {
|
||||
height: 26px;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
@@ -1,83 +1,72 @@
|
||||
.errors-wrapper
|
||||
{
|
||||
margin: 20px;
|
||||
padding: 10px 20px;
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
animation: scaleUp .5s;
|
||||
.errors-wrapper {
|
||||
margin: 20px;
|
||||
padding: 10px 20px;
|
||||
|
||||
border: 2px solid $_color-delete;
|
||||
border-radius: 4px;
|
||||
background: rgba($_color-delete, .1);
|
||||
animation: scaleUp 0.5s;
|
||||
|
||||
.error-wrapper
|
||||
{
|
||||
margin: 0 0 10px 0;
|
||||
border: 2px solid $color-delete;
|
||||
border-radius: 4px;
|
||||
background: rgba($color-delete, 0.1);
|
||||
|
||||
.error-wrapper {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.errors {
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
@include type.text_code();
|
||||
}
|
||||
|
||||
.errors
|
||||
{
|
||||
h4
|
||||
{
|
||||
font-size: 14px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
@include text_code();
|
||||
}
|
||||
|
||||
small
|
||||
{
|
||||
color: $errors-wrapper-errors-small-font-color;
|
||||
}
|
||||
|
||||
.message
|
||||
{
|
||||
white-space: pre-line;
|
||||
|
||||
&.thrown
|
||||
{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.error-line
|
||||
{
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
small {
|
||||
color: $errors-wrapper-errors-small-font-color;
|
||||
}
|
||||
|
||||
hgroup
|
||||
{
|
||||
display: flex;
|
||||
.message {
|
||||
white-space: pre-line;
|
||||
|
||||
align-items: center;
|
||||
|
||||
h4
|
||||
{
|
||||
font-size: 20px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
flex: 1;
|
||||
@include text_headline();
|
||||
}
|
||||
&.thrown {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.error-line {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
hgroup {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
flex: 1;
|
||||
@include type.text_headline();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
|
||||
@keyframes scaleUp
|
||||
{
|
||||
0%
|
||||
{
|
||||
transform: scale(.8);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
100%
|
||||
{
|
||||
transform: scale(1);
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,235 +1,214 @@
|
||||
select
|
||||
{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
@use "variables" as *;
|
||||
@use "mixins";
|
||||
@use "type";
|
||||
|
||||
padding: 5px 40px 5px 10px;
|
||||
select {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
border: 2px solid $form-select-border-color;
|
||||
border-radius: 4px;
|
||||
background: $form-select-background-color url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.418 7.859c.271-.268.709-.268.978 0 .27.268.272.701 0 .969l-3.908 3.83c-.27.268-.707.268-.979 0l-3.908-3.83c-.27-.267-.27-.701 0-.969.271-.268.709-.268.978 0L10 11l3.418-3.141z"/></svg>') right 10px center no-repeat;
|
||||
background-size: 20px;
|
||||
box-shadow: 0 1px 2px 0 rgba($form-select-box-shadow-color, .25);
|
||||
padding: 5px 40px 5px 10px;
|
||||
|
||||
@include text_headline();
|
||||
appearance: none;
|
||||
border: 2px solid $form-select-border-color;
|
||||
border-radius: 4px;
|
||||
background: $form-select-background-color
|
||||
url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.418 7.859c.271-.268.709-.268.978 0 .27.268.272.701 0 .969l-3.908 3.83c-.27.268-.707.268-.979 0l-3.908-3.83c-.27-.267-.27-.701 0-.969.271-.268.709-.268.978 0L10 11l3.418-3.141z"/></svg>')
|
||||
right 10px center no-repeat;
|
||||
background-size: 20px;
|
||||
box-shadow: 0 1px 2px 0 rgba($form-select-box-shadow-color, 0.25);
|
||||
|
||||
&[multiple]
|
||||
{
|
||||
margin: 5px 0;
|
||||
padding: 5px;
|
||||
@include type.text_headline();
|
||||
appearance: none;
|
||||
|
||||
background: $form-select-background-color;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
@include invalidFormElement();
|
||||
}
|
||||
}
|
||||
|
||||
.opblock-body select
|
||||
{
|
||||
min-width: 230px;
|
||||
@media (max-width: 768px)
|
||||
{
|
||||
min-width: 180px;
|
||||
}
|
||||
@media (max-width: 640px)
|
||||
{
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
label
|
||||
{
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
@include text_headline();
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=search],
|
||||
input[type=email],
|
||||
input[type=file]
|
||||
{
|
||||
line-height: 1;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 175px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=search],
|
||||
input[type=email],
|
||||
input[type=file],
|
||||
textarea
|
||||
{
|
||||
min-width: 100px;
|
||||
&[multiple] {
|
||||
margin: 5px 0;
|
||||
padding: 8px 10px;
|
||||
padding: 5px;
|
||||
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
background: $form-input-background-color;
|
||||
background: $form-select-background-color;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
@include mixins.invalidFormElement();
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid
|
||||
{
|
||||
@include invalidFormElement();
|
||||
}
|
||||
.opblock-body select {
|
||||
min-width: 230px;
|
||||
@media (max-width: 768px) {
|
||||
min-width: 180px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
@include type.text_headline();
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="email"],
|
||||
input[type="file"] {
|
||||
line-height: 1;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 175px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="email"],
|
||||
input[type="file"],
|
||||
textarea {
|
||||
min-width: 100px;
|
||||
margin: 5px 0;
|
||||
padding: 8px 10px;
|
||||
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
background: $form-input-background-color;
|
||||
|
||||
&.invalid {
|
||||
@include mixins.invalidFormElement();
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
&[disabled] {
|
||||
// opacity: 0.85;
|
||||
background-color: #fafafa;
|
||||
color: #888;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: #fafafa;
|
||||
color: #888;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
select[disabled] {
|
||||
border-color: #888;
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
textarea[disabled] {
|
||||
background-color: #41444e;
|
||||
color: #fff;
|
||||
background-color: #41444e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes shake
|
||||
{
|
||||
10%,
|
||||
90%
|
||||
{
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
@keyframes shake {
|
||||
10%,
|
||||
90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
80%
|
||||
{
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
20%,
|
||||
80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%
|
||||
{
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
30%,
|
||||
50%,
|
||||
70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
60%
|
||||
{
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
40%,
|
||||
60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
textarea
|
||||
{
|
||||
textarea {
|
||||
font-size: 12px;
|
||||
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
background: rgba($form-textarea-background-color, 0.8);
|
||||
|
||||
@include type.text_code();
|
||||
|
||||
&:focus {
|
||||
border: 2px solid $form-textarea-focus-border-color;
|
||||
}
|
||||
|
||||
&.curl {
|
||||
font-size: 12px;
|
||||
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
resize: none;
|
||||
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
background: rgba($form-textarea-background-color,.8);
|
||||
background: $form-textarea-curl-background-color;
|
||||
|
||||
@include text_code();
|
||||
|
||||
&:focus
|
||||
{
|
||||
border: 2px solid $form-textarea-focus-border-color;
|
||||
}
|
||||
|
||||
&.curl
|
||||
{
|
||||
font-size: 12px;
|
||||
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
resize: none;
|
||||
|
||||
border-radius: 4px;
|
||||
background: $form-textarea-curl-background-color;
|
||||
|
||||
@include text_code($form-textarea-curl-font-color);
|
||||
}
|
||||
@include type.text_code($form-textarea-curl-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding: 5px 0 10px;
|
||||
|
||||
.checkbox
|
||||
{
|
||||
padding: 5px 0 10px;
|
||||
transition: opacity 0.5s;
|
||||
|
||||
transition: opacity .5s;
|
||||
color: $form-checkbox-label-font-color;
|
||||
|
||||
color: $form-checkbox-label-font-color;
|
||||
label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
label
|
||||
{
|
||||
display: flex;
|
||||
p {
|
||||
font-weight: normal !important;
|
||||
font-style: italic;
|
||||
|
||||
margin: 0 !important;
|
||||
|
||||
@include type.text_code();
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
& + label > .item {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 1px;
|
||||
background: $form-checkbox-background-color;
|
||||
box-shadow: 0 0 0 2px $form-checkbox-box-shadow-color;
|
||||
|
||||
flex: none;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
font-weight: normal !important;
|
||||
font-style: italic;
|
||||
|
||||
margin: 0 !important;
|
||||
|
||||
@include text_code();
|
||||
}
|
||||
|
||||
input[type=checkbox]
|
||||
{
|
||||
display: none;
|
||||
|
||||
& + label > .item
|
||||
{
|
||||
position: relative;
|
||||
top: 3px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 1px;
|
||||
background: $form-checkbox-background-color;
|
||||
box-shadow: 0 0 0 2px $form-checkbox-box-shadow-color;
|
||||
|
||||
flex: none;
|
||||
|
||||
&:active
|
||||
{
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label > .item
|
||||
{
|
||||
background: $form-checkbox-background-color url('data:image/svg+xml, <svg width="10px" height="8px" viewBox="3 7 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon id="Rectangle-34" stroke="none" fill="#41474E" fill-rule="evenodd" points="6.33333333 15 3 11.6666667 4.33333333 10.3333333 6.33333333 12.3333333 11.6666667 7 13 8.33333333"></polygon></svg>') center center no-repeat;
|
||||
}
|
||||
&:checked + label > .item {
|
||||
background: $form-checkbox-background-color
|
||||
url('data:image/svg+xml, <svg width="10px" height="8px" viewBox="3 7 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon id="Rectangle-34" stroke="none" fill="#41474E" fill-rule="evenodd" points="6.33333333 15 3 11.6666667 4.33333333 10.3333333 6.33333333 12.3333333 11.6666667 7 13 8.33333333"></polygon></svg>')
|
||||
center center no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,104 +1,99 @@
|
||||
.info
|
||||
{
|
||||
margin: 50px 0;
|
||||
@use "sass:color";
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
&.failed-config
|
||||
{
|
||||
max-width: 880px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center
|
||||
.info {
|
||||
margin: 50px 0;
|
||||
|
||||
&.failed-config {
|
||||
max-width: 880px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hgroup.main {
|
||||
margin: 0 0 20px 0;
|
||||
a {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
font-size: 14px;
|
||||
}
|
||||
p,
|
||||
li,
|
||||
table {
|
||||
font-size: 14px;
|
||||
|
||||
hgroup.main
|
||||
{
|
||||
margin: 0 0 20px 0;
|
||||
a
|
||||
{
|
||||
font-size: 12px;
|
||||
}
|
||||
@include type.text_body();
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
@include type.text_body();
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
|
||||
transition: all 0.4s;
|
||||
|
||||
@include type.text_body($info-link-font-color);
|
||||
|
||||
&:hover {
|
||||
color: color.adjust($info-link-font-color-hover, $lightness: -15%);
|
||||
}
|
||||
pre
|
||||
{
|
||||
font-size: 14px;
|
||||
}
|
||||
p, li, table
|
||||
{
|
||||
font-size: 14px;
|
||||
}
|
||||
> div {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
@include text_body();
|
||||
}
|
||||
.base-url {
|
||||
font-size: 12px;
|
||||
font-weight: 300 !important;
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
{
|
||||
@include text_body();
|
||||
}
|
||||
margin: 0;
|
||||
|
||||
a
|
||||
{
|
||||
font-size: 14px;
|
||||
@include type.text_code();
|
||||
}
|
||||
|
||||
transition: all .4s;
|
||||
.title {
|
||||
font-size: 36px;
|
||||
|
||||
@include text_body($info-link-font-color);
|
||||
margin: 0;
|
||||
|
||||
&:hover
|
||||
{
|
||||
color: darken($info-link-font-color-hover, 15%);
|
||||
}
|
||||
}
|
||||
> div
|
||||
{
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
@include type.text_body();
|
||||
|
||||
.base-url
|
||||
{
|
||||
font-size: 12px;
|
||||
font-weight: 300 !important;
|
||||
small {
|
||||
font-size: 10px;
|
||||
|
||||
position: relative;
|
||||
top: -5px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
margin: 0 0 0 5px;
|
||||
padding: 2px 4px;
|
||||
|
||||
vertical-align: super;
|
||||
|
||||
border-radius: 57px;
|
||||
background: $info-title-small-background-color;
|
||||
|
||||
&.version-stamp {
|
||||
background-color: #89bf04;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include text_code();
|
||||
}
|
||||
|
||||
.title
|
||||
{
|
||||
font-size: 36px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
@include text_body();
|
||||
|
||||
small
|
||||
{
|
||||
font-size: 10px;
|
||||
|
||||
position: relative;
|
||||
top: -5px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
margin: 0 0 0 5px;
|
||||
padding: 2px 4px;
|
||||
|
||||
vertical-align: super;
|
||||
|
||||
border-radius: 57px;
|
||||
background: $info-title-small-background-color;
|
||||
|
||||
&.version-stamp
|
||||
{
|
||||
background-color: #89bf04;
|
||||
}
|
||||
|
||||
pre
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include text_headline($info-title-small-pre-font-color);
|
||||
}
|
||||
}
|
||||
@include type.text_headline($info-title-small-pre-font-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,10 @@
|
||||
.markdown, .renderedMarkdown {
|
||||
p, pre {
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
.markdown,
|
||||
.renderedMarkdown {
|
||||
p,
|
||||
pre {
|
||||
margin: 1em auto;
|
||||
|
||||
word-break: break-all; /* Fallback trick */
|
||||
@@ -18,9 +23,9 @@
|
||||
padding: 5px 7px;
|
||||
|
||||
border-radius: 4px;
|
||||
background: rgba($info-code-background-color,.05);
|
||||
background: rgba($info-code-background-color, 0.05);
|
||||
|
||||
@include text_code($info-code-font-color);
|
||||
@include type.text_code($info-code-font-color);
|
||||
}
|
||||
|
||||
pre > code {
|
||||
|
||||
@@ -1,173 +1,159 @@
|
||||
@use "sass:color";
|
||||
@use "variables" as *;
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - -
|
||||
// - - _mixins.scss module
|
||||
// styles for the _mixins.scss module
|
||||
@function calculateRem($size)
|
||||
{
|
||||
$remSize: $size / 16px;
|
||||
@return $remSize * 1rem;
|
||||
@function calculateRem($size) {
|
||||
$remSize: $size / 16px;
|
||||
@return $remSize * 1rem;
|
||||
}
|
||||
|
||||
@mixin font-size($size)
|
||||
{
|
||||
font-size: $size;
|
||||
font-size: calculateRem($size);
|
||||
@mixin font-size($size) {
|
||||
font-size: $size;
|
||||
font-size: calculateRem($size);
|
||||
}
|
||||
|
||||
%clearfix
|
||||
{
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
display: table;
|
||||
%clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
|
||||
content: ' ';
|
||||
}
|
||||
&:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
content: " ";
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin size($width, $height: $width)
|
||||
{
|
||||
width: $width;
|
||||
height: $height;
|
||||
@mixin size($width, $height: $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
$ease: (
|
||||
in-quad: cubic-bezier(.550, .085, .680, .530),
|
||||
in-cubic: cubic-bezier(.550, .055, .675, .190),
|
||||
in-quart: cubic-bezier(.895, .030, .685, .220),
|
||||
in-quint: cubic-bezier(.755, .050, .855, .060),
|
||||
in-sine: cubic-bezier(.470, .000, .745, .715),
|
||||
in-expo: cubic-bezier(.950, .050, .795, .035),
|
||||
in-circ: cubic-bezier(.600, .040, .980, .335),
|
||||
in-back: cubic-bezier(.600, -.280, .735, .045),
|
||||
out-quad: cubic-bezier(.250, .460, .450, .940),
|
||||
out-cubic: cubic-bezier(.215, .610, .355, 1.000),
|
||||
out-quart: cubic-bezier(.165, .840, .440, 1.000),
|
||||
out-quint: cubic-bezier(.230, 1.000, .320, 1.000),
|
||||
out-sine: cubic-bezier(.390, .575, .565, 1.000),
|
||||
out-expo: cubic-bezier(.190, 1.000, .220, 1.000),
|
||||
out-circ: cubic-bezier(.075, .820, .165, 1.000),
|
||||
out-back: cubic-bezier(.175, .885, .320, 1.275),
|
||||
in-out-quad: cubic-bezier(.455, .030, .515, .955),
|
||||
in-out-cubic: cubic-bezier(.645, .045, .355, 1.000),
|
||||
in-out-quart: cubic-bezier(.770, .000, .175, 1.000),
|
||||
in-out-quint: cubic-bezier(.860, .000, .070, 1.000),
|
||||
in-out-sine: cubic-bezier(.445, .050, .550, .950),
|
||||
in-out-expo: cubic-bezier(1.000, .000, .000, 1.000),
|
||||
in-out-circ: cubic-bezier(.785, .135, .150, .860),
|
||||
in-out-back: cubic-bezier(.680, -.550, .265, 1.550)
|
||||
in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53),
|
||||
in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22),
|
||||
in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06),
|
||||
in-sine: cubic-bezier(0.47, 0, 0.745, 0.715),
|
||||
in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035),
|
||||
in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||
in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045),
|
||||
out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
out-quart: cubic-bezier(0.165, 0.84, 0.44, 1),
|
||||
out-quint: cubic-bezier(0.23, 1, 0.32, 1),
|
||||
out-sine: cubic-bezier(0.39, 0.575, 0.565, 1),
|
||||
out-expo: cubic-bezier(0.19, 1, 0.22, 1),
|
||||
out-circ: cubic-bezier(0.075, 0.82, 0.165, 1),
|
||||
out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955),
|
||||
in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
in-out-quart: cubic-bezier(0.77, 0, 0.175, 1),
|
||||
in-out-quint: cubic-bezier(0.86, 0, 0.07, 1),
|
||||
in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95),
|
||||
in-out-expo: cubic-bezier(1, 0, 0, 1),
|
||||
in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86),
|
||||
in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||||
);
|
||||
|
||||
@function ease($key)
|
||||
{
|
||||
@if map-has-key($ease, $key)
|
||||
{
|
||||
@return map-get($ease, $key);
|
||||
}
|
||||
@function ease($key) {
|
||||
@if map-has-key($ease, $key) {
|
||||
@return map-get($ease, $key);
|
||||
}
|
||||
|
||||
@warn 'Unkown \'#{$key}\' in $ease.';
|
||||
@return null;
|
||||
@warn 'Unkown \'#{$key}\' in $ease.';
|
||||
@return null;
|
||||
}
|
||||
|
||||
|
||||
@mixin ease($key)
|
||||
{
|
||||
transition-timing-function: ease($key);
|
||||
@mixin ease($key) {
|
||||
transition-timing-function: ease($key);
|
||||
}
|
||||
|
||||
@mixin text-truncate
|
||||
{
|
||||
overflow: hidden;
|
||||
@mixin text-truncate {
|
||||
overflow: hidden;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@mixin aspect-ratio($width, $height)
|
||||
{
|
||||
position: relative;
|
||||
&:before
|
||||
{
|
||||
display: block;
|
||||
@mixin aspect-ratio($width, $height) {
|
||||
position: relative;
|
||||
&:before {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding-top: ($height / $width) * 100%;
|
||||
width: 100%;
|
||||
padding-top: ($height / $width) * 100%;
|
||||
|
||||
content: '';
|
||||
}
|
||||
> iframe
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
content: "";
|
||||
}
|
||||
> iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$browser-context: 16;
|
||||
|
||||
@function em($pixels, $context: $browser-context)
|
||||
{
|
||||
@if (unitless($pixels))
|
||||
{
|
||||
$pixels: $pixels * 1px;
|
||||
}
|
||||
@function em($pixels, $context: $browser-context) {
|
||||
@if (unitless($pixels)) {
|
||||
$pixels: $pixels * 1px;
|
||||
}
|
||||
|
||||
@if (unitless($context))
|
||||
{
|
||||
$context: $context * 1px;
|
||||
}
|
||||
@if (unitless($context)) {
|
||||
$context: $context * 1px;
|
||||
}
|
||||
|
||||
@return $pixels / $context * 1em;
|
||||
@return $pixels / $context * 1em;
|
||||
}
|
||||
|
||||
@mixin maxHeight($height)
|
||||
{
|
||||
@media (max-height: $height)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
@mixin maxHeight($height) {
|
||||
@media (max-height: $height) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin breakpoint($class)
|
||||
{
|
||||
@if $class == tablet
|
||||
{
|
||||
@media (min-width: 768px) and (max-width: 1024px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
@mixin breakpoint($class) {
|
||||
@if $class == tablet {
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
@content;
|
||||
}
|
||||
|
||||
@else if $class == mobile
|
||||
{
|
||||
@media (min-width: 320px) and (max-width : 736px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
} @else if $class == mobile {
|
||||
@media (min-width: 320px) and (max-width: 736px) {
|
||||
@content;
|
||||
}
|
||||
|
||||
@else if $class == desktop
|
||||
{
|
||||
@media (min-width: 1400px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@else
|
||||
{
|
||||
@warn 'Breakpoint mixin supports: tablet, mobile, desktop';
|
||||
} @else if $class == desktop {
|
||||
@media (min-width: 1400px) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn 'Breakpoint mixin supports: tablet, mobile, desktop';
|
||||
}
|
||||
}
|
||||
|
||||
@mixin invalidFormElement() {
|
||||
animation: shake .4s 1;
|
||||
border-color: $_color-delete;
|
||||
background: lighten($_color-delete, 35%);
|
||||
animation: shake 0.4s 1;
|
||||
border-color: $color-delete;
|
||||
background: color.adjust($color-delete, $lightness: 35%);
|
||||
}
|
||||
|
||||
@mixin method($color) {
|
||||
border-color: $color;
|
||||
background: rgba($color, 0.1);
|
||||
|
||||
.opblock-summary-method {
|
||||
background: $color;
|
||||
}
|
||||
|
||||
.opblock-summary {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
.tab-header .tab-item.active h4 span:after {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,102 +1,95 @@
|
||||
.dialog-ux
|
||||
{
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
.dialog-ux {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.backdrop-ux {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.backdrop-ux
|
||||
{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba($dialog-ux-backdrop-background-color, 0.8);
|
||||
}
|
||||
|
||||
background: rgba($dialog-ux-backdrop-background-color,.8);
|
||||
.modal-ux {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 650px;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
border: 1px solid $dialog-ux-modal-border-color;
|
||||
border-radius: 4px;
|
||||
background: $dialog-ux-modal-background-color;
|
||||
box-shadow: 0 10px 30px 0 rgba($dialog-ux-modal-box-shadow-color, 0.2);
|
||||
}
|
||||
|
||||
.modal-ux-content {
|
||||
overflow-y: auto;
|
||||
|
||||
max-height: 540px;
|
||||
padding: 20px;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
color: $dialog-ux-modal-content-font-color;
|
||||
|
||||
@include type.text_body();
|
||||
}
|
||||
|
||||
.modal-ux
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 650px;
|
||||
margin: 15px 0 0 0;
|
||||
|
||||
transform: translate(-50%,-50%);
|
||||
@include type.text_headline();
|
||||
}
|
||||
}
|
||||
|
||||
border: 1px solid $dialog-ux-modal-border-color;
|
||||
border-radius: 4px;
|
||||
background: $dialog-ux-modal-background-color;
|
||||
box-shadow: 0 10px 30px 0 rgba($dialog-ux-modal-box-shadow-color,.20);
|
||||
.modal-ux-header {
|
||||
display: flex;
|
||||
|
||||
padding: 12px 0;
|
||||
|
||||
border-bottom: 1px solid $dialog-ux-modal-header-border-bottom-color;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.close-modal {
|
||||
padding: 0 10px;
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.modal-ux-content
|
||||
{
|
||||
overflow-y: auto;
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
max-height: 540px;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
|
||||
p
|
||||
{
|
||||
font-size: 12px;
|
||||
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
color: $dialog-ux-modal-content-font-color;
|
||||
|
||||
@include text_body();
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
margin: 15px 0 0 0;
|
||||
|
||||
@include text_headline();
|
||||
}
|
||||
}
|
||||
|
||||
.modal-ux-header
|
||||
{
|
||||
display: flex;
|
||||
|
||||
padding: 12px 0;
|
||||
|
||||
border-bottom: 1px solid $dialog-ux-modal-header-border-bottom-color;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.close-modal
|
||||
{
|
||||
padding: 0 10px;
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
|
||||
h3
|
||||
{
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
|
||||
flex: 1;
|
||||
@include text_headline();
|
||||
}
|
||||
flex: 1;
|
||||
@include type.text_headline();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,366 +1,330 @@
|
||||
.model
|
||||
{
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
@include text_code();
|
||||
.model {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
|
||||
.deprecated
|
||||
{
|
||||
span,
|
||||
td
|
||||
{
|
||||
color: $model-deprecated-font-color !important;
|
||||
}
|
||||
@include type.text_code();
|
||||
|
||||
> td:first-of-type {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
&-toggle
|
||||
{
|
||||
font-size: 10px;
|
||||
|
||||
position: relative;
|
||||
top: 6px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
margin: auto .3em;
|
||||
|
||||
cursor: pointer;
|
||||
transition: transform .15s ease-in;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
&.collapsed
|
||||
{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '';
|
||||
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>') center no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.deprecated {
|
||||
span,
|
||||
td {
|
||||
color: $model-deprecated-font-color !important;
|
||||
}
|
||||
|
||||
&-jump-to-path
|
||||
{
|
||||
position: relative;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.view-line-link
|
||||
{
|
||||
position: absolute;
|
||||
top: -.4em;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
> td:first-of-type {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
&-toggle {
|
||||
font-size: 10px;
|
||||
|
||||
&-title
|
||||
{
|
||||
position: relative;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
|
||||
&:hover .model-hint
|
||||
{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&-hint
|
||||
{
|
||||
position: absolute;
|
||||
top: -1.8em;
|
||||
|
||||
visibility: hidden;
|
||||
|
||||
padding: .1em .5em;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
color: $model-hint-font-color;
|
||||
border-radius: 4px;
|
||||
background: rgba($model-hint-background-color,.7);
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.property
|
||||
{
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
|
||||
&.primitive
|
||||
{
|
||||
color: #6b6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
.external-docs
|
||||
{
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
table.model
|
||||
{
|
||||
tr
|
||||
{
|
||||
&.description
|
||||
{
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
|
||||
td:first-child
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.property-row
|
||||
{
|
||||
&.required td:first-child
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
vertical-align: top;
|
||||
|
||||
&:first-child
|
||||
{
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.star
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
&.extension
|
||||
{
|
||||
color: #777;
|
||||
|
||||
td:last-child
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&.external-docs
|
||||
{
|
||||
td:first-child
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.renderedMarkdown p:first-child
|
||||
{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.models
|
||||
{
|
||||
margin: 30px 0;
|
||||
|
||||
border: 1px solid rgba($section-models-border-color, .3);
|
||||
border-radius: 4px;
|
||||
|
||||
.pointer
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.is-open
|
||||
{
|
||||
padding: 0 0 20px;
|
||||
h4
|
||||
{
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
border-bottom: 1px solid rgba($section-models-isopen-h4-border-bottom-color, .3);
|
||||
}
|
||||
}
|
||||
h4
|
||||
{
|
||||
font-size: 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 10px 20px 10px 10px;
|
||||
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
|
||||
@include text_headline($section-models-h4-font-color);
|
||||
|
||||
svg
|
||||
{
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover
|
||||
{
|
||||
background: rgba($section-models-h4-background-color-hover,.02);
|
||||
}
|
||||
}
|
||||
|
||||
h5
|
||||
{
|
||||
font-size: 16px;
|
||||
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
@include text_headline($section-models-h5-font-color);
|
||||
}
|
||||
|
||||
.model-jump-to-path
|
||||
{
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.model-container
|
||||
{
|
||||
margin: 0 20px 15px;
|
||||
position: relative;
|
||||
|
||||
transition: all .5s;
|
||||
|
||||
border-radius: 4px;
|
||||
background: rgba($section-models-model-container-background-color,.05);
|
||||
|
||||
&:hover
|
||||
{
|
||||
background: rgba($section-models-model-container-background-color,.07);
|
||||
}
|
||||
|
||||
&:first-of-type
|
||||
{
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
&:last-of-type
|
||||
{
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.models-jump-to-path {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 5px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box
|
||||
{
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.model-box
|
||||
{
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
|
||||
margin: auto 0.3em;
|
||||
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease-in;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
&.collapsed {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: "";
|
||||
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>')
|
||||
center no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-jump-to-path {
|
||||
position: relative;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.view-line-link {
|
||||
position: absolute;
|
||||
top: -0.4em;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
position: relative;
|
||||
|
||||
&:hover .model-hint {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-hint {
|
||||
position: absolute;
|
||||
top: -1.8em;
|
||||
|
||||
display: none;
|
||||
|
||||
padding: 0.1em 0.5em;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
color: $model-hint-font-color;
|
||||
border-radius: 4px;
|
||||
background: rgba($section-models-model-box-background-color,.1);
|
||||
background: rgba($model-hint-background-color, 0.7);
|
||||
}
|
||||
|
||||
.model-jump-to-path
|
||||
{
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
&.deprecated
|
||||
{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
.property {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
|
||||
&.primitive {
|
||||
color: #6b6b6b;
|
||||
|
||||
.model-title
|
||||
{
|
||||
font-size: 16px;
|
||||
&.extension {
|
||||
display: block;
|
||||
|
||||
@include text_headline($section-models-model-title-font-color);
|
||||
> td:first-child {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: auto;
|
||||
|
||||
img
|
||||
{
|
||||
margin-left: 1em;
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.model-deprecated-warning
|
||||
{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
margin-right: 1em;
|
||||
|
||||
@include text_headline($_color-delete);
|
||||
}
|
||||
|
||||
|
||||
span
|
||||
{
|
||||
> span.model
|
||||
{
|
||||
.brace-close
|
||||
{
|
||||
padding: 0 0 0 10px;
|
||||
&:after {
|
||||
content: ":\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.external-docs {
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.prop-name
|
||||
{
|
||||
display: inline-block;
|
||||
table.model {
|
||||
tr {
|
||||
&.description {
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
|
||||
margin-right: 1em;
|
||||
td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.property-row {
|
||||
&.required td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
&.extension {
|
||||
color: #777;
|
||||
|
||||
td:last-child {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&.external-docs {
|
||||
td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.renderedMarkdown p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prop-type
|
||||
{
|
||||
color: $prop-type-font-color;
|
||||
section.models {
|
||||
margin: 30px 0;
|
||||
|
||||
border: 1px solid rgba($section-models-border-color, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
padding: 0 0 20px;
|
||||
h4 {
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
border-bottom: 1px solid
|
||||
rgba($section-models-isopen-h4-border-bottom-color, 0.3);
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 10px 20px 10px 10px;
|
||||
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
@include type.text_headline($section-models-h4-font-color);
|
||||
|
||||
svg {
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($section-models-h4-background-color-hover, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
@include type.text_headline($section-models-h5-font-color);
|
||||
}
|
||||
|
||||
.model-jump-to-path {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.model-container {
|
||||
margin: 0 20px 15px;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.5s;
|
||||
|
||||
border-radius: 4px;
|
||||
background: rgba($section-models-model-container-background-color, 0.05);
|
||||
|
||||
&:hover {
|
||||
background: rgba($section-models-model-container-background-color, 0.07);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.models-jump-to-path {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 5px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
background: none;
|
||||
|
||||
&:has(.model-box) {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prop-enum
|
||||
{
|
||||
display: block;
|
||||
.model-box {
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 4px;
|
||||
background: rgba($section-models-model-box-background-color, 0.1);
|
||||
|
||||
.model-jump-to-path {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&.deprecated {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.prop-format
|
||||
{
|
||||
color: $prop-format-font-color;
|
||||
|
||||
.model-title {
|
||||
font-size: 16px;
|
||||
|
||||
@include type.text_headline($section-models-model-title-font-color);
|
||||
|
||||
img {
|
||||
margin-left: 1em;
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.model-deprecated-warning {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
margin-right: 1em;
|
||||
|
||||
@include type.text_headline($color-delete);
|
||||
}
|
||||
|
||||
span {
|
||||
> span.model {
|
||||
.brace-close {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prop-name {
|
||||
display: inline-block;
|
||||
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.prop-type {
|
||||
color: $prop-type-font-color;
|
||||
}
|
||||
|
||||
.prop-enum {
|
||||
display: block;
|
||||
}
|
||||
.prop-format {
|
||||
color: $prop-format-font-color;
|
||||
}
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
.servers
|
||||
{
|
||||
> label
|
||||
{
|
||||
font-size: 12px;
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
margin: -20px 15px 0 0;
|
||||
.servers {
|
||||
> label {
|
||||
font-size: 12px;
|
||||
|
||||
@include text_headline();
|
||||
margin: -20px 15px 0 0;
|
||||
|
||||
select
|
||||
{
|
||||
min-width: 130px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@include type.text_headline();
|
||||
|
||||
select {
|
||||
min-width: 130px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h4.message {
|
||||
padding-bottom: 2em;
|
||||
h4.message {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
table {
|
||||
tr {
|
||||
width: 30em;
|
||||
}
|
||||
td {
|
||||
display: inline-block;
|
||||
max-width: 15em;
|
||||
vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
table {
|
||||
tr {
|
||||
width: 30em;
|
||||
}
|
||||
td {
|
||||
display: inline-block;
|
||||
max-width: 15em;
|
||||
vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
&:first-of-type {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.computed-url {
|
||||
margin: 2em 0;
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
font-size: 16px;
|
||||
margin: 0 1em;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.computed-url {
|
||||
margin: 2em 0;
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
font-size: 16px;
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.servers-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.operation-servers {
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.Resizer.vertical.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,207 +1,188 @@
|
||||
table
|
||||
{
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
@use "type";
|
||||
@use "variables" as *;
|
||||
|
||||
border-collapse: collapse;
|
||||
table {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
&.model
|
||||
{
|
||||
tbody
|
||||
{
|
||||
tr
|
||||
{
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
vertical-align: top;
|
||||
&.model {
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
padding: 0;
|
||||
|
||||
&:first-of-type
|
||||
{
|
||||
width: 174px;
|
||||
padding: 0 0 0 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
vertical-align: top;
|
||||
|
||||
&:first-of-type {
|
||||
width: 174px;
|
||||
padding: 0 0 0 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.headers {
|
||||
td {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
@include type.text_code();
|
||||
}
|
||||
|
||||
&.headers
|
||||
{
|
||||
td
|
||||
{
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
.header-example {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
vertical-align: middle;
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
@include text_code();
|
||||
vertical-align: top;
|
||||
|
||||
&:first-of-type {
|
||||
min-width: 6em;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.header-example
|
||||
{
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
&:has(.model-box) {
|
||||
max-width: 1px; // fits content in available space instead of growing the table beyond its container
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody
|
||||
{
|
||||
tr
|
||||
{
|
||||
td
|
||||
{
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
vertical-align: top;
|
||||
|
||||
&:first-of-type
|
||||
{
|
||||
min-width: 6em;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead
|
||||
{
|
||||
tr
|
||||
{
|
||||
th,
|
||||
td
|
||||
{
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
padding: 12px 0;
|
||||
|
||||
text-align: left;
|
||||
|
||||
border-bottom: 1px solid rgba($table-thead-td-border-bottom-color, .2);
|
||||
|
||||
@include text_body();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parameters-col_description
|
||||
{
|
||||
width: 99%; // forces other columns to shrink to their content widths
|
||||
margin-bottom: 2em;
|
||||
input
|
||||
{
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
select {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.markdown, .renderedMarkdown {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parameter__name
|
||||
{
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
// hack to give breathing room to the name column
|
||||
// TODO: refactor all of this to flexbox
|
||||
margin-right: .75em;
|
||||
|
||||
@include text_headline();
|
||||
|
||||
&.required
|
||||
{
|
||||
thead {
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
span
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
padding: 12px 0;
|
||||
|
||||
&:after
|
||||
{
|
||||
font-size: 10px;
|
||||
text-align: left;
|
||||
|
||||
position: relative;
|
||||
top: -6px;
|
||||
border-bottom: 1px solid rgba($table-thead-td-border-bottom-color, 0.2);
|
||||
|
||||
padding: 5px;
|
||||
|
||||
content: 'required';
|
||||
|
||||
color: rgba($table-parameter-name-required-font-color, .6);
|
||||
}
|
||||
@include type.text_body();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parameters-col_description {
|
||||
width: 99%; // forces other columns to shrink to their content widths
|
||||
margin-bottom: 2em;
|
||||
input {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
select {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.markdown,
|
||||
.renderedMarkdown {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parameter__name {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
// hack to give breathing room to the name column
|
||||
// TODO: refactor all of this to flexbox
|
||||
margin-right: 0.75em;
|
||||
|
||||
@include type.text_headline();
|
||||
|
||||
&.required {
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 10px;
|
||||
|
||||
position: relative;
|
||||
top: -6px;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
content: "required";
|
||||
|
||||
color: rgba($table-parameter-name-required-font-color, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parameter__in,
|
||||
.parameter__extension
|
||||
{
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
.parameter__extension {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
|
||||
@include text_code($table-parameter-in-font-color);
|
||||
@include type.text_code($table-parameter-in-font-color);
|
||||
}
|
||||
|
||||
.parameter__deprecated
|
||||
{
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
.parameter__deprecated {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
|
||||
@include text_code($table-parameter-deprecated-font-color);
|
||||
@include type.text_code($table-parameter-deprecated-font-color);
|
||||
}
|
||||
|
||||
.parameter__empty_value_toggle {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 12px;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
input {
|
||||
margin-right: 7px;
|
||||
width: auto;
|
||||
}
|
||||
input {
|
||||
margin-right: 7px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-container
|
||||
{
|
||||
padding: 20px;
|
||||
.table-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.response-col_description {
|
||||
width: 99%; // forces other columns to shrink to their content widths
|
||||
width: 99%; // forces other columns to shrink to their content widths
|
||||
|
||||
.markdown, .renderedMarkdown {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.markdown,
|
||||
.renderedMarkdown {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.response-col_links {
|
||||
min-width: 6em;
|
||||
min-width: 6em;
|
||||
}
|
||||
|
||||
.response__extension
|
||||
{
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
.response__extension {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
|
||||
@include text_code($table-parameter-in-font-color);
|
||||
@include type.text_code($table-parameter-in-font-color);
|
||||
}
|
||||
|
||||
@@ -1,113 +1,103 @@
|
||||
.topbar
|
||||
{
|
||||
padding: 10px 0;
|
||||
@use "variables" as *;
|
||||
@use "type";
|
||||
|
||||
background-color: $topbar-background-color;
|
||||
.topbar-wrapper
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.topbar {
|
||||
padding: 10px 0;
|
||||
|
||||
background-color: $topbar-background-color;
|
||||
.topbar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.topbar-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.topbar-wrapper
|
||||
{
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
max-width: 300px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
@include type.text_headline($topbar-link-font-color);
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.download-url-wrapper {
|
||||
display: flex;
|
||||
flex: 3;
|
||||
justify-content: flex-end;
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
|
||||
border: 2px solid $topbar-download-url-wrapper-element-border-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
.select-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0;
|
||||
color: #f0f0f0;
|
||||
span {
|
||||
font-size: 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
max-width: 300px;
|
||||
padding: 0 10px 0 0;
|
||||
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include text_headline($topbar-link-font-color);
|
||||
select {
|
||||
flex: 2;
|
||||
|
||||
span
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
border: 2px solid $topbar-download-url-wrapper-element-border-color;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.download-url-wrapper
|
||||
{
|
||||
display: flex;
|
||||
flex: 3;
|
||||
justify-content: flex-end;
|
||||
.download-url-button {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
input[type=text]
|
||||
{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 4px 30px;
|
||||
|
||||
border: 2px solid $topbar-download-url-wrapper-element-border-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
outline: none;
|
||||
}
|
||||
border: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: $topbar-download-url-button-background-color;
|
||||
|
||||
.select-label
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0;
|
||||
color: #f0f0f0;
|
||||
span
|
||||
{
|
||||
font-size: 16px;
|
||||
|
||||
flex: 1;
|
||||
|
||||
padding: 0 10px 0 0;
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
select
|
||||
{
|
||||
flex: 2;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border: 2px solid $topbar-download-url-wrapper-element-border-color;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.download-url-button
|
||||
{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
padding: 4px 30px;
|
||||
|
||||
border: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: $topbar-download-url-button-background-color;
|
||||
|
||||
@include text_headline($topbar-download-url-button-font-color);
|
||||
}
|
||||
@include type.text_headline($topbar-download-url-button-font-color);
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.download-url-wrapper
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.download-url-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
@mixin text_body($color: $text-body-default-font-color)
|
||||
{
|
||||
@use "variables" as *;
|
||||
|
||||
@mixin text_body($color: $text-body-default-font-color) {
|
||||
& {
|
||||
font-family: sans-serif;
|
||||
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text_code($color: $text-code-default-font-color)
|
||||
{
|
||||
font-family: monospace;
|
||||
font-weight: 600;
|
||||
@mixin text_code($color: $text-code-default-font-color) {
|
||||
font-family: monospace;
|
||||
font-weight: 600;
|
||||
|
||||
color: $color;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@mixin text_headline($color: $text-headline-default-font-color)
|
||||
{
|
||||
font-family: sans-serif;
|
||||
@mixin text_headline($color: $text-headline-default-font-color) {
|
||||
font-family: sans-serif;
|
||||
|
||||
color: $color;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
@use "sass:color";
|
||||
|
||||
// Base Colours
|
||||
$black: #000 !default;
|
||||
$white: #fff !default;
|
||||
$gray-50: lighten($black, 92%) !default; //ebebeb
|
||||
$gray-200: lighten($black, 62.75%) !default; // #a0a0a0
|
||||
$gray-300: lighten($black, 56.5%) !default; // #909090
|
||||
$gray-400: lighten($black, 50%) !default; // #808080
|
||||
$gray-500: lighten($black, 43.75%) !default; // #707070
|
||||
$gray-600: lighten($black, 37.5%) !default; // #606060
|
||||
$gray-650: lighten($black, 33.3%) !default; // #555555
|
||||
$gray-700: lighten($black, 31.25%) !default; // #505050
|
||||
$gray-800: lighten($black, 25%) !default; // #404040
|
||||
$gray-900: lighten($black, 18.75%) !default; // #303030
|
||||
$gray-50: color.adjust($black, $lightness: 92%) !default; //ebebeb
|
||||
$gray-200: color.adjust($black, $lightness: 62.75%) !default; // #a0a0a0
|
||||
$gray-300: color.adjust($black, $lightness: 56.5%) !default; // #909090
|
||||
$gray-400: color.adjust($black, $lightness: 50%) !default; // #808080
|
||||
$gray-500: color.adjust($black, $lightness: 43.75%) !default; // #707070
|
||||
$gray-600: color.adjust($black, $lightness: 37.5%) !default; // #606060
|
||||
$gray-650: color.adjust($black, $lightness: 33.3%) !default; // #555555
|
||||
$gray-700: color.adjust($black, $lightness: 31.25%) !default; // #505050
|
||||
$gray-800: color.adjust($black, $lightness: 25%) !default; // #404040
|
||||
$gray-900: color.adjust($black, $lightness: 18.75%) !default; // #303030
|
||||
|
||||
$cod-gray: #1b1b1b !default;
|
||||
$agate-gray: #333333 !default;
|
||||
@@ -41,16 +43,16 @@ $color-info: #4990e2 !default;
|
||||
$color-warning: #ff6060 !default;
|
||||
$color-danger: #f00 !default;
|
||||
|
||||
$color-primary-hover: lighten($color-primary, .5%) !default;
|
||||
$color-primary-hover: color.adjust($color-primary, $lightness: 0.5%) !default;
|
||||
|
||||
$_color-post: #49cc90 !default;
|
||||
$_color-get: #61affe !default;
|
||||
$_color-put: #fca130 !default;
|
||||
$_color-delete: #f93e3e !default;
|
||||
$_color-head: #9012fe !default;
|
||||
$_color-patch: #50e3c2 !default;
|
||||
$_color-disabled: #ebebeb !default;
|
||||
$_color-options: #0d5aa7 !default;
|
||||
$color-post: #49cc90 !default;
|
||||
$color-get: #61affe !default;
|
||||
$color-put: #fca130 !default;
|
||||
$color-delete: #f93e3e !default;
|
||||
$color-head: #9012fe !default;
|
||||
$color-patch: #50e3c2 !default;
|
||||
$color-disabled: #ebebeb !default;
|
||||
$color-options: #0d5aa7 !default;
|
||||
|
||||
// Authorize
|
||||
|
||||
@@ -64,9 +66,9 @@ $btn-font-color: inherit !default;
|
||||
$btn-box-shadow-color: $black !default;
|
||||
|
||||
$btn-authorize-background-color: transparent !default;
|
||||
$btn-authorize-border-color: $_color-post !default;
|
||||
$btn-authorize-font-color: $_color-post !default;
|
||||
$btn-authorize-svg-fill-color: $_color-post !default;
|
||||
$btn-authorize-border-color: $color-post !default;
|
||||
$btn-authorize-font-color: $color-post !default;
|
||||
$btn-authorize-svg-fill-color: $color-post !default;
|
||||
|
||||
$btn-cancel-background-color: transparent !default;
|
||||
$btn-cancel-border-color: $color-warning !default;
|
||||
@@ -82,8 +84,8 @@ $expand-methods-svg-fill-color-hover: $gray-800 !default;
|
||||
|
||||
// Errors
|
||||
|
||||
$errors-wrapper-background-color: $_color-delete !default;
|
||||
$errors-wrapper-border-color: $_color-delete !default;
|
||||
$errors-wrapper-background-color: $color-delete !default;
|
||||
$errors-wrapper-border-color: $color-delete !default;
|
||||
|
||||
$errors-wrapper-errors-small-font-color: $gray-600 !default;
|
||||
|
||||
@@ -97,7 +99,7 @@ $form-input-border-color: $alto-gray !default;
|
||||
$form-input-background-color: $white !default;
|
||||
|
||||
$form-textarea-background-color: $white !default;
|
||||
$form-textarea-focus-border-color: $_color-get !default;
|
||||
$form-textarea-focus-border-color: $color-get !default;
|
||||
|
||||
$form-textarea-curl-background-color: $mako-gray !default;
|
||||
$form-textarea-curl-font-color: $white !default;
|
||||
@@ -109,7 +111,7 @@ $form-checkbox-box-shadow-color: $concrete-gray !default;
|
||||
// Information
|
||||
|
||||
$info-code-background-color: $black !default;
|
||||
$info-code-font-color: $_color-head !default;
|
||||
$info-code-font-color: $color-head !default;
|
||||
|
||||
$info-link-font-color: $color-info !default;
|
||||
$info-link-font-color-hover: $info-link-font-color !default;
|
||||
@@ -166,7 +168,6 @@ $response-content-type-controls-accept-header-small-font-color: $japanese-laurel
|
||||
|
||||
$dialog-ux-backdrop-background-color: $black !default;
|
||||
|
||||
|
||||
$dialog-ux-modal-background-color: $white !default;
|
||||
$dialog-ux-modal-border-color: $gray-50 !default;
|
||||
$dialog-ux-modal-box-shadow-color: $black !default;
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
.swagger-ui
|
||||
{
|
||||
@import '~tachyons-sass/tachyons.scss';
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import 'type';
|
||||
@import 'layout';
|
||||
@import 'buttons';
|
||||
@import 'form';
|
||||
@import 'modal';
|
||||
@import 'models';
|
||||
@import 'servers';
|
||||
@import 'table';
|
||||
@import 'topbar';
|
||||
@import 'information';
|
||||
@import 'authorize';
|
||||
@import 'errors';
|
||||
@include text_body();
|
||||
@import 'split-pane-mode';
|
||||
@import 'markdown';
|
||||
@import '../core/plugins/json-schema-2020-12/components/all';
|
||||
@import '../core/plugins/oas31/components/all';
|
||||
@use "sass:meta";
|
||||
@use "type";
|
||||
|
||||
.swagger-ui {
|
||||
@include type.text_body();
|
||||
@include meta.load-css("~tachyons-sass/tachyons.scss");
|
||||
@include meta.load-css("mixins");
|
||||
@include meta.load-css("variables");
|
||||
@include meta.load-css("type");
|
||||
@include meta.load-css("layout");
|
||||
@include meta.load-css("buttons");
|
||||
@include meta.load-css("form");
|
||||
@include meta.load-css("modal");
|
||||
@include meta.load-css("models");
|
||||
@include meta.load-css("servers");
|
||||
@include meta.load-css("table");
|
||||
@include meta.load-css("topbar");
|
||||
@include meta.load-css("information");
|
||||
@include meta.load-css("authorize");
|
||||
@include meta.load-css("errors");
|
||||
@include meta.load-css("split-pane-mode");
|
||||
@include meta.load-css("markdown");
|
||||
@include meta.load-css("../core/plugins/json-schema-2020-12/components/all");
|
||||
@include meta.load-css("../core/plugins/oas31/components/all");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user