Refactor scss
MattIPv4
parent
5a05479d2b
commit
4cc4e7801f
|
|
@ -0,0 +1,63 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 DigitalOcean
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
&[class*="language-"] {
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
|
||||||
|
code {
|
||||||
|
&[class*="language-"] {
|
||||||
|
&,
|
||||||
|
.token {
|
||||||
|
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||||
|
font-size: 13.6px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix Bulma & DO Prism styles interfering with default Prism
|
||||||
|
.token {
|
||||||
|
&.number,
|
||||||
|
&.tag,
|
||||||
|
&.entity,
|
||||||
|
&.operator,
|
||||||
|
&.url {
|
||||||
|
background: transparent;
|
||||||
|
border-radius: initial;
|
||||||
|
display: initial;
|
||||||
|
font-size: inherit;
|
||||||
|
margin: initial;
|
||||||
|
padding: initial;
|
||||||
|
text-align: initial;
|
||||||
|
vertical-align: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-toolbar {
|
||||||
|
> .toolbar {
|
||||||
|
right: calc(.2em + 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: rgba($highlight, .45);
|
||||||
|
color: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 DigitalOcean
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.field-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0 -.5rem;
|
||||||
|
|
||||||
|
.field {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0 .5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .field-row,
|
||||||
|
+ .field {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
&.is-horizontal {
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&.is-aligned-top {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-grouped {
|
||||||
|
> .control {
|
||||||
|
&:last-child {
|
||||||
|
margin: .25rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin: .25rem .75rem 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-changed {
|
||||||
|
input {
|
||||||
|
&:not(.vs__search) {
|
||||||
|
&,
|
||||||
|
&:focus {
|
||||||
|
background: rgba($highlight, .35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox,
|
||||||
|
.radio,
|
||||||
|
.text {
|
||||||
|
background: rgba($highlight, .35);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
&.text {
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-select {
|
||||||
|
.vs__dropdown-toggle { // sass-lint:disable-line class-name-format
|
||||||
|
background: rgba($highlight, .35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
@include sailec-medium;
|
||||||
|
|
||||||
|
color: $dark-blue;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
&.text {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $dark-grey;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
&.is-static {
|
||||||
|
background: $panel;
|
||||||
|
border: 1px solid $border;
|
||||||
|
color: $dark-grey;
|
||||||
|
padding: 0 ($margin * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.control {
|
||||||
|
&:not(.is-expanded) {
|
||||||
|
+ .control {
|
||||||
|
&:not(.is-expanded) {
|
||||||
|
margin-top: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-body {
|
||||||
|
&.is-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
> .field {
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: .75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox,
|
||||||
|
.radio {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
|
||||||
|
.pretty {
|
||||||
|
&.p-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.state {
|
||||||
|
.icon {
|
||||||
|
&::before {
|
||||||
|
color: $panel;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: $dark-grey;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-left: calc(#{$margin / 2} + 1.5em);
|
||||||
|
text-indent: initial;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 DigitalOcean
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
.modal-card {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 DigitalOcean
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 1.5rem 0 2rem;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
// The presets panel has a custom header with a dropdown indicator
|
||||||
|
&.presets {
|
||||||
|
.header-group,
|
||||||
|
.buttons-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-group {
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
&.is-tiny {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message,
|
||||||
|
.buttons-group {
|
||||||
|
margin: 1rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-group {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
ul {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom navigation buttons bottom right of the panels
|
||||||
|
.navigation-buttons {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 1.5rem 1.5rem 0;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
margin-left: .5rem;
|
||||||
|
|
||||||
|
i + span,
|
||||||
|
span + i {
|
||||||
|
margin: 0 0 0 .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 DigitalOcean
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.setup {
|
||||||
|
.panel {
|
||||||
|
p {
|
||||||
|
color: $dark-blue;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
margin: 0 1rem;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0 0 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 DigitalOcean
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
a {
|
||||||
|
&::after {
|
||||||
|
background: $dark-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Light blue color if the user has gone past a tab
|
||||||
|
&.is-before {
|
||||||
|
a {
|
||||||
|
color: mix($dark-grey, $primary);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background: rgba($primary, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-blue;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background: $dark-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If a user has changed something in the tab, we'll make the text dark always
|
||||||
|
&.is-changed {
|
||||||
|
a {
|
||||||
|
color: $dark-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
// Support having a remove button inline with the normal tab text
|
||||||
|
&.domain {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-right: .25rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.remove {
|
||||||
|
padding-left: .25rem;
|
||||||
|
transition: color $transition;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: $danger;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle having the remove icon as well as the add icon
|
||||||
|
i {
|
||||||
|
font-size: .75em;
|
||||||
|
|
||||||
|
&.fa-plus {
|
||||||
|
margin: 0 .35rem 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 DigitalOcean
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// sass-lint:disable class-name-format
|
||||||
|
.v-select {
|
||||||
|
&.vs--open {
|
||||||
|
> ul {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vs__dropdown-toggle {
|
||||||
|
border-color: $primary;
|
||||||
|
box-shadow: 0 0 2px rgba($success, .5);
|
||||||
|
|
||||||
|
.vs__selected {
|
||||||
|
top: .75em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
display: block !important; // sass-lint:disable-line no-important
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vs__dropdown-toggle {
|
||||||
|
box-shadow: none;
|
||||||
|
padding: 0 16px;
|
||||||
|
transition: border $transition, box-shadow $transition;
|
||||||
|
|
||||||
|
.vs__selected-options {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.vs__selected {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
transition: opacity $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vs__search {
|
||||||
|
&,
|
||||||
|
&:focus {
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vs__actions {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// sass-lint:enable class-name-format
|
||||||
|
|
@ -24,445 +24,18 @@ $highlight: #f2c94c;
|
||||||
$pretty--color-dark: $primary;
|
$pretty--color-dark: $primary;
|
||||||
$pretty--color-default: $primary;
|
$pretty--color-default: $primary;
|
||||||
@import "~pretty-checkbox/src/pretty-checkbox";
|
@import "~pretty-checkbox/src/pretty-checkbox";
|
||||||
|
|
||||||
$vs-border-color: $border;
|
$vs-border-color: $border;
|
||||||
$vs-border-radius: $border-radius;
|
$vs-border-radius: $border-radius;
|
||||||
$vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
|
$vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
|
||||||
$vs-state-active-bg: $primary;
|
$vs-state-active-bg: $primary;
|
||||||
@import "~vue-select/src/scss/vue-select";
|
@import "~vue-select/src/scss/vue-select";
|
||||||
|
|
||||||
.tabs {
|
@import "tabs";
|
||||||
ul {
|
@import "panel";
|
||||||
li {
|
@import "fields";
|
||||||
display: flex;
|
@import "vue-select";
|
||||||
flex-direction: row;
|
@import "modals";
|
||||||
flex-wrap: nowrap;
|
@import "setup";
|
||||||
|
@import "code";
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
a {
|
|
||||||
&::after {
|
|
||||||
background: $dark-blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-before {
|
|
||||||
a {
|
|
||||||
color: mix($dark-grey, $primary);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background: rgba($primary, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $dark-blue;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background: $dark-blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-changed {
|
|
||||||
a {
|
|
||||||
color: $dark-blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
&.domain {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding-right: .25rem;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.remove {
|
|
||||||
padding-left: .25rem;
|
|
||||||
transition: color $transition;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $danger;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background: $danger;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: .75em;
|
|
||||||
|
|
||||||
&.fa-plus {
|
|
||||||
margin: 0 .35rem 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 1.5rem 0 2rem;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
&.presets {
|
|
||||||
.header-group,
|
|
||||||
.buttons-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-group {
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
&.is-tiny {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.message,
|
|
||||||
.buttons-group {
|
|
||||||
margin: 1rem 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-group {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
ul {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-buttons {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin: 1.5rem 1.5rem 0;
|
|
||||||
|
|
||||||
.button {
|
|
||||||
margin-left: .5rem;
|
|
||||||
|
|
||||||
i + span,
|
|
||||||
span + i {
|
|
||||||
margin: 0 0 0 .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0 -.5rem;
|
|
||||||
|
|
||||||
.field {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0 .5rem;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .field-row,
|
|
||||||
+ .field {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
&.is-horizontal {
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&.is-aligned-top {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-grouped {
|
|
||||||
> .control {
|
|
||||||
&:last-child {
|
|
||||||
margin: .25rem 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin: .25rem .75rem 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-changed {
|
|
||||||
input {
|
|
||||||
&:not(.vs__search) {
|
|
||||||
&,
|
|
||||||
&:focus {
|
|
||||||
background: rgba($highlight, .35);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox,
|
|
||||||
.radio,
|
|
||||||
.text {
|
|
||||||
background: rgba($highlight, .35);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
&.text {
|
|
||||||
padding: .25rem .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-select {
|
|
||||||
.vs__dropdown-toggle { // sass-lint:disable-line class-name-format
|
|
||||||
background: rgba($highlight, .35);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
@include sailec-medium;
|
|
||||||
|
|
||||||
color: $dark-blue;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
&.text {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $dark-grey;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0 .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
&.is-static {
|
|
||||||
background: $panel;
|
|
||||||
border: 1px solid $border;
|
|
||||||
color: $dark-grey;
|
|
||||||
padding: 0 ($margin * 1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.control {
|
|
||||||
&:not(.is-expanded) {
|
|
||||||
+ .control {
|
|
||||||
&:not(.is-expanded) {
|
|
||||||
margin-top: .25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-body {
|
|
||||||
&.is-vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
> .field {
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: .75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox,
|
|
||||||
.radio {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
padding: .25rem .5rem;
|
|
||||||
|
|
||||||
.pretty {
|
|
||||||
&.p-icon {
|
|
||||||
font-size: 18px;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
.state {
|
|
||||||
.icon {
|
|
||||||
&::before {
|
|
||||||
color: $panel;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
color: $dark-grey;
|
|
||||||
font-size: 14px;
|
|
||||||
padding-left: calc(#{$margin / 2} + 1.5em);
|
|
||||||
text-indent: initial;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// sass-lint:disable class-name-format
|
|
||||||
.v-select {
|
|
||||||
&.vs--open {
|
|
||||||
> ul {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__dropdown-toggle {
|
|
||||||
border-color: $primary;
|
|
||||||
box-shadow: 0 0 2px rgba($success, .5);
|
|
||||||
|
|
||||||
.vs__selected {
|
|
||||||
top: .75em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul {
|
|
||||||
display: block !important; // sass-lint:disable-line no-important
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity $transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__dropdown-toggle {
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0 16px;
|
|
||||||
transition: border $transition, box-shadow $transition;
|
|
||||||
|
|
||||||
.vs__selected-options {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.vs__selected {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
transition: opacity $transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__search {
|
|
||||||
&,
|
|
||||||
&:focus {
|
|
||||||
background: none;
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs__actions {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// sass-lint:enable class-name-format
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
.modal-card {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setup {
|
|
||||||
.panel {
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: $dark-blue;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
margin: 0 1rem;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0 0 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
&[class*="language-"] {
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
|
|
||||||
code {
|
|
||||||
&[class*="language-"] {
|
|
||||||
&,
|
|
||||||
.token {
|
|
||||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
|
||||||
font-size: 13.6px;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 1.4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fix Bulma interfering with Prism
|
|
||||||
.token {
|
|
||||||
&.number,
|
|
||||||
&.tag,
|
|
||||||
&.entity,
|
|
||||||
&.operator,
|
|
||||||
&.url {
|
|
||||||
background: transparent;
|
|
||||||
border-radius: initial;
|
|
||||||
display: initial;
|
|
||||||
font-size: inherit;
|
|
||||||
margin: initial;
|
|
||||||
padding: initial;
|
|
||||||
text-align: initial;
|
|
||||||
vertical-align: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-toolbar {
|
|
||||||
> .toolbar {
|
|
||||||
right: calc(.2em + 16px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background: rgba($highlight, .45);
|
|
||||||
color: inherit;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue