mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Use SFC style block.
This commit is contained in:
Dannon Baker
@@ -1,172 +0,0 @@
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
@import "~bootstrap/scss/utilities/spacing";
|
||||
|
||||
@import "scss/theme/blue.scss";
|
||||
@import "scss/mixins";
|
||||
|
||||
|
||||
// TODO: build reusable icon menu? Maybe make into a component?
|
||||
// The existing one has lots of reusability problems
|
||||
|
||||
.operations {
|
||||
margin-bottom: 0;
|
||||
|
||||
ul {
|
||||
@include list_reset();
|
||||
display: flex;
|
||||
li:not(:first-child) {
|
||||
@extend .ml-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// General Layout
|
||||
|
||||
.cloud-auth {
|
||||
|
||||
// header sticks, bottom part scrolls
|
||||
@include scrollingListLayout("header", ".scroll-container");
|
||||
|
||||
// title left, icons right
|
||||
.cloud-auth-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
// top icon menu
|
||||
.operations {
|
||||
|
||||
li {
|
||||
a, a::before {
|
||||
font-size: 1rem;
|
||||
color: $gray-400;
|
||||
}
|
||||
a.active::before,
|
||||
a:hover::before {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cloudKeyHelp a {
|
||||
@include fontawesome($fa-var-info-circle);
|
||||
}
|
||||
.cloudKeyFilter a {
|
||||
@include fontawesome($fa-var-filter);
|
||||
}
|
||||
.createCloudKey a {
|
||||
@include fontawesome($fa-var-plus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Single list item
|
||||
|
||||
.cloud-auth-key {
|
||||
|
||||
header hgroup {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
@extend .my-3;
|
||||
@extend .pt-3;
|
||||
|
||||
// removes wierd double arrows on select
|
||||
.custom-select {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Undo butchering from base.css so side-by-side labels work
|
||||
.form-row {
|
||||
display: flex;
|
||||
input, select {
|
||||
max-width: none;
|
||||
}
|
||||
label {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// button list at bottom of form
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
@extend .pt-3;
|
||||
|
||||
button:not(:first-child) {
|
||||
@extend .ml-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// icon menu
|
||||
|
||||
.operations {
|
||||
.save a {
|
||||
@include fontawesome($fa-var-save)
|
||||
}
|
||||
.delete a {
|
||||
@include fontawesome($fa-var-times);
|
||||
}
|
||||
.details a {
|
||||
@include fontawesome($fa-var-window-minimize);
|
||||
&:hover {
|
||||
@include fontawesome($fa-var-window-maximize);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// reverse icons when key is expanded
|
||||
|
||||
&.expanded .details a {
|
||||
@include fontawesome($fa-var-window-maximize);
|
||||
&:hover {
|
||||
@include fontawesome($fa-var-window-minimize);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
// Delete modal
|
||||
|
||||
#deleteCredentialModal {
|
||||
.modal-body {
|
||||
display: none;
|
||||
}
|
||||
.modal-dialog {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
@@ -207,4 +207,177 @@ export default {
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="./CloudAuth.scss"></style>
|
||||
<style lang="scss">
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
@import "~bootstrap/scss/utilities/spacing";
|
||||
|
||||
@import "scss/theme/blue.scss";
|
||||
@import "scss/mixins";
|
||||
|
||||
|
||||
// TODO: build reusable icon menu? Maybe make into a component?
|
||||
// The existing one has lots of reusability problems
|
||||
|
||||
.operations {
|
||||
margin-bottom: 0;
|
||||
|
||||
ul {
|
||||
@include list_reset();
|
||||
display: flex;
|
||||
li:not(:first-child) {
|
||||
@extend .ml-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// General Layout
|
||||
|
||||
.cloud-auth {
|
||||
|
||||
// header sticks, bottom part scrolls
|
||||
@include scrollingListLayout("header", ".scroll-container");
|
||||
|
||||
// title left, icons right
|
||||
.cloud-auth-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
// top icon menu
|
||||
.operations {
|
||||
|
||||
li {
|
||||
a, a::before {
|
||||
font-size: 1rem;
|
||||
color: $gray-400;
|
||||
}
|
||||
a.active::before,
|
||||
a:hover::before {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cloudKeyHelp a {
|
||||
@include fontawesome($fa-var-info-circle);
|
||||
}
|
||||
.cloudKeyFilter a {
|
||||
@include fontawesome($fa-var-filter);
|
||||
}
|
||||
.createCloudKey a {
|
||||
@include fontawesome($fa-var-plus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Single list item
|
||||
|
||||
.cloud-auth-key {
|
||||
|
||||
header hgroup {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
@extend .my-3;
|
||||
@extend .pt-3;
|
||||
|
||||
// removes wierd double arrows on select
|
||||
.custom-select {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Undo butchering from base.css so side-by-side labels work
|
||||
.form-row {
|
||||
display: flex;
|
||||
input, select {
|
||||
max-width: none;
|
||||
}
|
||||
label {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// button list at bottom of form
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
@extend .pt-3;
|
||||
|
||||
button:not(:first-child) {
|
||||
@extend .ml-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// icon menu
|
||||
|
||||
.operations {
|
||||
.save a {
|
||||
@include fontawesome($fa-var-save)
|
||||
}
|
||||
.delete a {
|
||||
@include fontawesome($fa-var-times);
|
||||
}
|
||||
.details a {
|
||||
@include fontawesome($fa-var-window-minimize);
|
||||
&:hover {
|
||||
@include fontawesome($fa-var-window-maximize);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// reverse icons when key is expanded
|
||||
|
||||
&.expanded .details a {
|
||||
@include fontawesome($fa-var-window-maximize);
|
||||
&:hover {
|
||||
@include fontawesome($fa-var-window-minimize);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
// Delete modal
|
||||
|
||||
#deleteCredentialModal {
|
||||
.modal-body {
|
||||
display: none;
|
||||
}
|
||||
.modal-dialog {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user