Refactor scss
This commit is contained in:
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-default: $primary;
|
||||
@import "~pretty-checkbox/src/pretty-checkbox";
|
||||
|
||||
$vs-border-color: $border;
|
||||
$vs-border-radius: $border-radius;
|
||||
$vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
|
||||
$vs-state-active-bg: $primary;
|
||||
@import "~vue-select/src/scss/vue-select";
|
||||
|
||||
.tabs {
|
||||
ul {
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&: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;
|
||||
}
|
||||
@import "tabs";
|
||||
@import "panel";
|
||||
@import "fields";
|
||||
@import "vue-select";
|
||||
@import "modals";
|
||||
@import "setup";
|
||||
@import "code";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue