Merge branch 'main' into permissions-app

This commit is contained in:
Ben Haynes
2020-08-29 14:55:52 -04:00
14 changed files with 165 additions and 29 deletions

View File

@@ -407,6 +407,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
.action-delete {
--v-button-background-color: var(--danger-25);
--v-button-color: var(--danger);
@@ -421,8 +423,13 @@ export default defineComponent({
}
.v-form {
padding: var(--content-padding);
padding: calc(var(--content-padding) * 3) var(--content-padding) var(--content-padding);
padding-bottom: var(--content-padding-bottom);
@include breakpoint(small) {
padding: var(--content-padding);
padding-bottom: var(--content-padding-bottom);
}
}
.title-loader {

View File

@@ -141,6 +141,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
.type-title {
margin-bottom: 32px;
}
@@ -151,8 +153,20 @@ export default defineComponent({
grid-template-columns: 1fr 1fr;
}
.field {
grid-column: 1 / span 2;
@include breakpoint(small) {
grid-column: 1;
}
}
.full {
grid-column: 1 / span 2;
@include breakpoint(small) {
grid-column: 1 / span 2;
}
}
.label {

View File

@@ -216,6 +216,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
// The default display: contents doens't play nicely with drag and drop
.v-menu {
display: block;
@@ -257,12 +259,28 @@ export default defineComponent({
}
.field {
.name {
flex-grow: 1;
.interface {
transition: opacity var(--fast) var(--transition);
margin-left: 4px;
color: var(--foreground-subdued);
display: none;
opacity: 0;
@include breakpoint(small) {
display: initial;
}
}
}
&:hover {
.name {
.interface {
opacity: 1;
}
}
}
}

View File

@@ -350,6 +350,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
.action-delete {
--v-button-background-color: var(--danger-25);
--v-button-color: var(--danger);
@@ -372,13 +374,17 @@ export default defineComponent({
display: flex;
align-items: center;
max-width: calc(var(--form-column-max-width) * 2 + var(--form-horizontal-gap));
height: 172px;
height: 112px;
margin-bottom: var(--form-vertical-gap);
padding: 12px;
background-color: var(--background-subdued);
border: 2px solid var(--border-normal);
border-radius: var(--border-radius);
@include breakpoint(small) {
height: 172px;
}
.avatar {
--v-icon-color: var(--foreground-subdued);
@@ -386,14 +392,20 @@ export default defineComponent({
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 144px;
height: 144px;
margin-right: 22px;
width: 84px;
height: 84px;
margin-right: 16px;
overflow: hidden;
background-color: var(--background-normal);
border: solid var(--border-width) var(--border-normal);
border-radius: var(--border-radius);
@include breakpoint(small) {
width: 144px;
height: 144px;
margin-right: 22px;
}
.v-skeleton-loader {
width: 100%;
height: 100%;