pitchum/debianize-mobilizon
pitchum/debianize-mobilizon
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Add mixins to handle RTL languages

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-11-04 18:14:36 +01:00
parent 547e222f5f
commit 39ea05a04a
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
36 changed files with 164 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/src/App.vue
View File

@ -246,7 +246,6 @@ export default class App extends Vue {
/* Icons */ /* Icons */
$mdi-font-path: "~@mdi/font/fonts"; $mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons"; @import "~@mdi/font/scss/materialdesignicons";
@import "common"; @import "common";
#mobilizon { #mobilizon {

5
js/src/common.scss
View File

@ -1,3 +1,4 @@
@use "@/styles/_mixins" as *;
@import "variables.scss"; @import "variables.scss";
@import "~bulma"; @import "~bulma";
@ -39,7 +40,7 @@ $color-black: #000;
border-radius: 5px; border-radius: 5px;
padding: 0.2rem; padding: 0.2rem;
white-space: nowrap; white-space: nowrap;
margin-right: 0.2rem; @include margin-right(0.2rem);
} }
.mention-suggestion { .mention-suggestion {
@ -48,7 +49,7 @@ $color-black: #000;
.mention .mention { .mention .mention {
background: initial; background: initial;
margin-right: 0; @include margin-right(0);
} }
.select select { .select select {

13
js/src/components/Account/ActorCard.vue
View File

@ -53,6 +53,7 @@ export default class ActorCard extends Vue {
</style> </style>
<style lang="scss"> <style lang="scss">
@use "@/styles/_mixins" as *;
.tooltip { .tooltip {
display: block !important; display: block !important;
z-index: 10000; z-index: 10000;
@ -105,7 +106,7 @@ export default class ActorCard extends Vue {
} }
&[x-placement^="right"] { &[x-placement^="right"] {
margin-left: 5px; @include margin-left(5px);
.tooltip-arrow { .tooltip-arrow {
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
@ -114,13 +115,13 @@ export default class ActorCard extends Vue {
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
left: -5px; left: -5px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; @include margin-left(0);
margin-right: 0; @include margin-right(0);
} }
} }
&[x-placement^="left"] { &[x-placement^="left"] {
margin-right: 5px; @include margin-right(5px);
.tooltip-arrow { .tooltip-arrow {
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
@ -129,8 +130,8 @@ export default class ActorCard extends Vue {
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
right: -5px; right: -5px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; @include margin-left(0);
margin-right: 0; @include margin-right(0);
} }
} }

3
js/src/components/Account/ActorInline.vue
View File

@ -26,6 +26,7 @@ export default class ActorInline extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
div.actor-inline { div.actor-inline {
align-items: flex-start; align-items: flex-start;
display: inline-flex; display: inline-flex;
@ -36,7 +37,7 @@ div.actor-inline {
flex-basis: auto; flex-basis: auto;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-right: 0.5rem; @include margin-right(0.5rem);
} }
div.actor-name { div.actor-name {
flex-basis: auto; flex-basis: auto;

3
js/src/components/Address/AddressInfo.vue
View File

@ -103,6 +103,7 @@ export default class AddressInfo extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
address { address {
font-style: normal; font-style: normal;
display: flex; display: flex;
@ -118,7 +119,7 @@ address {
} }
span.icon { span.icon {
padding-right: 1rem; @include padding-right(1rem);
} }
} }
</style> </style>

13
js/src/components/Comment/Comment.vue
View File

@ -336,6 +336,7 @@ export default class Comment extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
form.reply { form.reply {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -355,7 +356,7 @@ form.reply {
} }
& > small { & > small {
margin-left: 0.3rem; @include margin-left(0.3rem);
} }
} }
@ -365,14 +366,14 @@ form.reply {
.editor { .editor {
flex: 1; flex: 1;
padding-right: 10px; @include padding-right(10px);
margin-bottom: 0; margin-bottom: 0;
} }
} }
a.comment-link { a.comment-link {
text-decoration: none; text-decoration: none;
margin-left: 5px; @include margin-left(5px);
color: $text; color: $text;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -416,7 +417,7 @@ a.comment-link {
} }
.media-left { .media-left {
margin-right: 0.5rem; @include margin-right(5px);
} }
} }
@ -427,7 +428,7 @@ a.comment-link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-right: 10px; @include margin-right(10px);
.vertical-border { .vertical-border {
width: 3px; width: 3px;
@ -516,7 +517,7 @@ article {
} }
.reply-action .icon { .reply-action .icon {
padding-right: 0.4rem; @include padding-right(0.4rem);
} }
.visually-hidden { .visually-hidden {

3
js/src/components/Comment/CommentTree.vue
View File

@ -363,6 +363,7 @@ export default class CommentTree extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
form.new-comment { form.new-comment {
padding-bottom: 1rem; padding-bottom: 1rem;
@ -373,7 +374,7 @@ form.new-comment {
.field { .field {
flex: 1; flex: 1;
padding-right: 10px; @include padding-right(10px);
margin-bottom: 0; margin-bottom: 0;
&.notify-participants { &.notify-participants {

5
js/src/components/Discussion/DiscussionComment.vue
View File

@ -148,6 +148,7 @@ export default class DiscussionComment extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
article.comment { article.comment {
display: flex; display: flex;
border-top: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9;
@ -163,7 +164,7 @@ article.comment {
padding: 0 1rem 0.3em; padding: 0 1rem 0.3em;
.name { .name {
margin-right: auto; @include margin-right(auto);
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
@ -216,7 +217,7 @@ article.comment {
::v-deep blockquote { ::v-deep blockquote {
border-left: 0.2em solid #333; border-left: 0.2em solid #333;
display: block; display: block;
padding-left: 1em; @include padding-left(1em);
} }
::v-deep p { ::v-deep p {

3
js/src/components/Discussion/DiscussionListItem.vue
View File

@ -83,6 +83,7 @@ export default class DiscussionListItem extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.discussion-minimalist-card-wrapper { .discussion-minimalist-card-wrapper {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
@ -92,7 +93,7 @@ export default class DiscussionListItem extends Vue {
align-items: center; align-items: center;
.calendar-icon { .calendar-icon {
margin-right: 1rem; @include margin-right(1rem);
} }
.title-info-wrapper { .title-info-wrapper {

7
js/src/components/Editor.vue
View File

@ -376,6 +376,7 @@ export default class EditorComponent extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@use "@/styles/_mixins" as *;
@import "./Editor/style.scss"; @import "./Editor/style.scss";
$color-black: #000; $color-black: #000;
@ -392,7 +393,7 @@ $color-white: #eee;
border: 0; border: 0;
color: $color-black; color: $color-black;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
margin-right: 0.2rem; @include margin-right(0.2rem);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
@ -464,7 +465,7 @@ $color-white: #eee;
ul, ul,
ol { ol {
padding-left: 1rem; @include padding-left(1rem);
} }
ul { ul {
@ -480,7 +481,7 @@ $color-white: #eee;
blockquote { blockquote {
border-left: 3px solid rgba($color-black, 0.1); border-left: 3px solid rgba($color-black, 0.1);
color: rgba($color-black, 0.8); color: rgba($color-black, 0.8);
padding-left: 0.8rem; @include padding-left(0.8rem);
font-style: italic; font-style: italic;
p { p {

5
js/src/components/Event/EventCard.vue
View File

@ -133,6 +133,7 @@ export default class EventCard extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@use "@/styles/_event-card"; @use "@/styles/_event-card";
a.card { a.card {
@ -170,7 +171,7 @@ a.card {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0; right: 0;
margin-right: -3px; @include margin-right(-3px);
z-index: 10; z-index: 10;
max-width: 40%; max-width: 40%;
@ -214,7 +215,7 @@ a.card {
align-items: flex-end; align-items: flex-end;
align-self: flex-start; align-self: flex-start;
margin-bottom: 15px; margin-bottom: 15px;
margin-left: 0rem; @include margin-left(0);
} }
& > .media-content { & > .media-content {

3
js/src/components/Event/EventListViewCard.vue
View File

@ -128,6 +128,7 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
article.box { article.box {
div.content { div.content {
padding: 5px; padding: 5px;
@ -148,7 +149,7 @@ article.box {
div.date-component { div.date-component {
flex: 0; flex: 0;
margin-right: 16px; @include margin-right(16px);
} }
.title { .title {

3
js/src/components/Event/EventMap.vue
View File

@ -152,10 +152,11 @@ export default class EventMap extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.modal-card-head { .modal-card-head {
justify-content: flex-end; justify-content: flex-end;
button.delete { button.delete {
margin-right: 1rem; @include margin-right(1rem);
} }
} }

3
js/src/components/Event/EventMetadataItem.vue
View File

@ -131,11 +131,12 @@ export default class EventMetadataItem extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.card .media { .card .media {
align-items: center; align-items: center;
& > button { & > button {
margin-left: 1rem; @include margin-left(1rem);
} }
} }
</style> </style>

3
js/src/components/Event/EventMinimalistCard.vue
View File

@ -131,6 +131,7 @@ export default class EventMinimalistCard extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@use "@/styles/_event-card"; @use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass"; @import "~bulma/sass/utilities/mixins.sass";
@import "@/variables.scss"; @import "@/variables.scss";
@ -163,7 +164,7 @@ export default class EventMinimalistCard extends Vue {
} }
.calendar-icon { .calendar-icon {
margin-right: 1rem; @include margin-right(1rem);
} }
.title-info-wrapper { .title-info-wrapper {

5
js/src/components/Event/EventParticipationCard.vue
View File

@ -392,6 +392,7 @@ export default class EventParticipationCard extends mixins(
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@use "@/styles/_event-card"; @use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass"; @import "~bulma/sass/utilities/mixins.sass";
@ -400,7 +401,7 @@ article.box {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0; right: 0;
margin-right: -5px; @include margin-left(-5px);
z-index: 10; z-index: 10;
max-width: 40%; max-width: 40%;
@ -516,7 +517,7 @@ article.box {
figure, figure,
span.icon { span.icon {
padding-right: 3px; @include padding-right(3px);
} }
} }

5
js/src/components/Event/OrganizerPicker.vue
View File

@ -121,6 +121,7 @@ export default class OrganizerPicker extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
::v-deep .list-item { ::v-deep .list-item {
box-sizing: content-box; box-sizing: content-box;
@ -133,11 +134,11 @@ export default class OrganizerPicker extends Vue {
figure.image, figure.image,
span.icon.media-left { span.icon.media-left {
margin-right: 0.5rem; @include margin-right(0.5rem);
} }
span.icon.media-left { span.icon.media-left {
margin-left: -0.25rem; @include margin-left(-0.25rem);
} }
} }
} }

3
js/src/components/Group/GroupMemberCard.vue
View File

@ -86,6 +86,7 @@ export default class GroupMemberCard extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.card { .card {
.card-content { .card-content {
display: flex; display: flex;
@ -113,7 +114,7 @@ export default class GroupMemberCard extends Vue {
figure, figure,
span.icon { span.icon {
padding-right: 3px; @include padding-right(3px);
} }
} }
} }

5
js/src/components/Group/GroupSection.vue
View File

@ -33,6 +33,7 @@ export default class GroupSection extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
section { section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -44,7 +45,7 @@ section {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-right: 0.5rem; @include padding-right(0.5rem);
} }
.main-slot { .main-slot {
@ -68,7 +69,7 @@ div.group-section-title {
::v-deep & > a { ::v-deep & > a {
align-self: center; align-self: center;
margin-right: 5px; @include margin-right(5px);
color: var(--title-color); color: var(--title-color);
} }

3
js/src/components/NavBar.vue
View File

@ -338,6 +338,7 @@ export default class NavBar extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
nav { nav {
.navbar-item { .navbar-item {
a.button { a.button {
@ -370,7 +371,7 @@ nav {
} }
.navbar-item.has-dropdown a.navbar-link figure { .navbar-item.has-dropdown a.navbar-link figure {
margin-right: 0.75rem; @include margin-right(0.75rem);
display: flex; display: flex;
align-items: center; align-items: center;
} }

5
js/src/components/PictureUpload.vue
View File

@ -51,13 +51,14 @@
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/_mixins" as *;
.root { .root {
display: flex; display: flex;
align-items: center; align-items: center;
} }
figure.image { figure.image {
margin-right: 30px; @include margin-right(30px);
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
@ -99,7 +100,7 @@ figure.image {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-right: 5px; @include margin-right(5px);
} }
} }
} }

3
js/src/components/Post/PostListItem.vue
View File

@ -71,6 +71,7 @@ export default class PostListItem extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@import "~bulma/sass/utilities/mixins.sass"; @import "~bulma/sass/utilities/mixins.sass";
.post-minimalist-card-wrapper { .post-minimalist-card-wrapper {
@ -100,7 +101,7 @@ export default class PostListItem extends Vue {
} }
::v-deep .icon { ::v-deep .icon {
vertical-align: middle; vertical-align: middle;
margin-right: 5px; @include margin-right(5px);
} }
::v-deep .tags { ::v-deep .tags {

3
js/src/components/Resource/ResourceItem.vue
View File

@ -82,6 +82,7 @@ export default class ResourceItem extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.resource-wrapper { .resource-wrapper {
display: flex; display: flex;
flex: 1; flex: 1;
@ -137,7 +138,7 @@ a {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 6px; @include margin-right(6px);
vertical-align: middle; vertical-align: middle;
} }

3
js/src/components/Todo/CompactTodo.vue
View File

@ -66,7 +66,8 @@ export default class Todo extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
span.details { span.details {
margin-left: 1rem; @include margin-left(1rem);
} }
</style> </style>

6
js/src/styles/_event-card.scss
View File

@ -1,9 +1,11 @@
@use "@/styles/_mixins" as *;
.event-organizer { .event-organizer {
display: flex; display: flex;
align-items: center; align-items: center;
.organizer-name { .organizer-name {
padding-left: 5px; @include padding-left(5px);
font-weight: 600; font-weight: 600;
} }
} }
@ -13,6 +15,6 @@
align-items: center; align-items: center;
& > span:not(.icon) { & > span:not(.icon) {
padding-left: 5px; @include padding-left(5px);
} }
} }

55
js/src/styles/_mixins.scss Normal file
View File

@ -0,0 +1,55 @@
@mixin margin($block-start, $inline-end, $block-end, $inline-start) {
@include margin-left($inline-start);
@include margin-right($inline-end);
margin-top: $block-start;
margin-bottom: $block-end;
}
@mixin padding($block-start, $inline-end, $block-end, $inline-start) {
@include padding-left($inline-start);
@include padding-right($inline-end);
padding-top: $block-start;
padding-bottom: $block-end;
}
@mixin margin-left($value) {
@supports (margin-inline-start: $value) {
margin-inline-start: $value;
}
@supports not (margin-inline-start: $value) {
margin-left: $value;
}
}
@mixin margin-right($value) {
@supports (margin-inline-end: $value) {
margin-inline-end: $value;
}
@supports not (margin-inline-end: $value) {
margin-right: $value;
}
}
@mixin padding-left($value) {
@supports (padding-inline-start: $value) {
padding-inline-start: $value;
}
@supports not (padding-inline-start: $value) {
padding-left: $value;
}
}
@mixin padding-right($value) {
@supports (padding-inline-end: $value) {
padding-inline-end: $value;
}
@supports not (padding-inline-end: $value) {
padding-right: $value;
}
}

2
js/src/views/Account/children/EditIdentity.vue
View File

@ -215,7 +215,7 @@ h1 {
} }
::v-deep .buttons > *:not(:last-child) .button { ::v-deep .buttons > *:not(:last-child) .button {
margin-right: 0.5rem; @include margin-right(0.5rem);
} }
</style> </style>

3
js/src/views/Discussions/Discussion.vue
View File

@ -496,6 +496,7 @@ export default class Discussion extends mixins(GroupMixin) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
div.container.section { div.container.section {
background: white; background: white;
padding: 1rem 5% 4rem; padding: 1rem 5% 4rem;
@ -507,7 +508,7 @@ div.container.section {
h1.title { h1.title {
margin-bottom: 0; margin-bottom: 0;
margin-right: 10px; @include margin-right(10px);
} }
form.title-edit { form.title-edit {

3
js/src/views/Event/Edit.vue
View File

@ -459,6 +459,7 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
main section > .container { main section > .container {
background: $white; background: $white;
@ -537,7 +538,7 @@ section {
.navbar-end { .navbar-end {
justify-content: flex-end; justify-content: flex-end;
margin-left: auto; @include margin-left(auto);
} }
} }
} }

11
js/src/views/Event/Event.vue
View File

@ -1151,6 +1151,7 @@ export default class Event extends EventMixin {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.section { .section {
padding: 1rem 2rem 4rem; padding: 1rem 2rem 4rem;
} }
@ -1192,7 +1193,7 @@ div.sidebar {
span { span {
line-height: 2.7rem; line-height: 2.7rem;
padding-right: 6px; @include padding-right(6px);
} }
} }
} }
@ -1239,7 +1240,7 @@ div.sidebar {
min-width: 20rem; min-width: 20rem;
flex: 1; flex: 1;
@media all and (min-width: 672px) { @media all and (min-width: 672px) {
padding-left: 1rem; @include padding-left(1rem);
} }
.sticky { .sticky {
@ -1281,7 +1282,7 @@ div.sidebar {
::v-deep blockquote { ::v-deep blockquote {
border-left: 0.2em solid #333; border-left: 0.2em solid #333;
display: block; display: block;
padding-left: 1em; @include padding-left(1rem);
} }
::v-deep p { ::v-deep p {
@ -1327,7 +1328,7 @@ a.dropdown-item,
button.dropdown-item { button.dropdown-item {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
padding-right: 1rem; @include padding-right(1rem);
text-align: right; text-align: right;
} }
@ -1362,7 +1363,7 @@ a.participations-link {
align-items: flex-end; align-items: flex-end;
align-self: flex-start; align-self: flex-start;
margin-bottom: 7px; margin-bottom: 7px;
margin-left: 0rem; @include margin-left(0);
} }
} }
.title { .title {

19
js/src/views/Group/Group.vue
View File

@ -1057,6 +1057,7 @@ export default class Group extends mixins(GroupMixin) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@import "~bulma/sass/utilities/mixins.sass"; @import "~bulma/sass/utilities/mixins.sass";
div.container { div.container {
margin-bottom: 3rem; margin-bottom: 3rem;
@ -1074,7 +1075,7 @@ div.container {
.header .breadcrumb { .header .breadcrumb {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-left: 0.5rem; @include margin-left(0.5rem);
} }
.block-container { .block-container {
@ -1132,7 +1133,7 @@ div.container {
align-content: space-between; align-content: space-between;
& > span { & > span {
margin-right: 0.5rem; @include margin-right(0.5rem);
} }
} }
@ -1165,10 +1166,10 @@ div.container {
margin: 0 0.5rem; margin: 0 0.5rem;
&:first-child { &:first-child {
margin-left: 0; @include margin-left(0);
} }
&:last-child { &:last-child {
margin-right: 0; @include margin-right(0);
} }
} }
@ -1259,7 +1260,7 @@ div.container {
justify-content: center; justify-content: center;
::v-deep .b-tooltip { ::v-deep .b-tooltip {
padding-right: 0.5em; @include padding-right(0.5em);
} }
} }
@ -1274,7 +1275,7 @@ div.container {
} }
figure:not(:first-child) { figure:not(:first-child) {
margin-left: -10px; @include margin-left(-10px);
} }
} }
} }
@ -1291,9 +1292,9 @@ div.container {
.group-metadata { .group-metadata {
min-width: 20rem; min-width: 20rem;
flex: 1; flex: 1;
padding-left: 1rem; @include padding-left(1rem);
@include mobile { @include mobile {
padding-left: 0; @include padding-left(0);
} }
.sticky { .sticky {
@ -1330,7 +1331,7 @@ div.container {
.menu-dropdown { .menu-dropdown {
::v-deep .dropdown-item, ::v-deep .dropdown-item,
::v-deep .has-link a { ::v-deep .has-link a {
padding-right: 1rem; @include padding-right(1rem);
} }
} }

5
js/src/views/Home.vue
View File

@ -609,6 +609,7 @@ export default class Home extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@import "~bulma/sass/utilities/mixins.sass"; @import "~bulma/sass/utilities/mixins.sass";
main > div > .container { main > div > .container {
@ -623,7 +624,7 @@ main > div > .container {
.events-recent { .events-recent {
& > h3 { & > h3 {
padding-left: 0.75rem; @include padding-left(0.75rem);
} }
.columns { .columns {
@ -637,7 +638,7 @@ main > div > .container {
margin: 0.5rem auto 1rem; margin: 0.5rem auto 1rem;
h3.subtitle { h3.subtitle {
margin-left: 7px; @include margin-left(7px);
} }
} }

3
js/src/views/Posts/Edit.vue
View File

@ -368,6 +368,7 @@ export default class EditPost extends mixins(GroupMixin, PostMixin) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.container.section { .container.section {
background: $white; background: $white;
} }
@ -388,7 +389,7 @@ form {
.navbar-end { .navbar-end {
justify-content: flex-end; justify-content: flex-end;
margin-left: auto; @include margin-left(auto);
} }
} }
} }

5
js/src/views/Posts/Post.vue
View File

@ -368,6 +368,7 @@ export default class Post extends mixins(GroupMixin, PostMixin) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
article.post { article.post {
background: $white !important; background: $white !important;
header { header {
@ -417,7 +418,7 @@ article.post {
flex-direction: column; flex-direction: column;
*:not(:first-child) { *:not(:first-child) {
padding-left: 5px; @include padding-left(5px);
} }
} }
} }
@ -478,7 +479,7 @@ article.post {
button.dropdown-item { button.dropdown-item {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
padding-right: 1rem; @include padding-right(1rem);
text-align: right; text-align: right;
} }
} }

14
js/src/views/Resources/ResourceFolder.vue
View File

@ -754,6 +754,8 @@ export default class Resources extends Mixins(ResourceMixin) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.container.section { .container.section {
background: $white; background: $white;
@ -766,7 +768,7 @@ nav.breadcrumb ul {
align-items: center; align-items: center;
li:last-child .dropdown { li:last-child .dropdown {
margin-left: 5px; @include margin-left(5px);
a { a {
justify-content: left; justify-content: left;
@ -785,14 +787,14 @@ nav.breadcrumb ul {
align-items: center; align-items: center;
::v-deep .b-checkbox.checkbox { ::v-deep .b-checkbox.checkbox {
margin-left: 10px; @include margin-left(10px);
} }
.actions { .actions {
margin-right: 5px; @include margin-right(5px);
& > * { & > * {
margin-left: 5px; @include margin-left(5px);
} }
} }
} }
@ -810,11 +812,11 @@ nav.breadcrumb ul {
.resource-checkbox { .resource-checkbox {
align-self: center; align-self: center;
padding-left: 10px; @include padding-left(10px);
opacity: 0.3; opacity: 0.3;
::v-deep .b-checkbox.checkbox { ::v-deep .b-checkbox.checkbox {
margin-right: 0.25rem; @include margin-right(0.25rem);
} }
} }

4
js/src/views/Settings/Notifications.vue
View File

@ -780,6 +780,7 @@ export default class Notifications extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.field { .field {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -790,11 +791,12 @@ export default class Notifications extends Vue {
text-decoration: underline; text-decoration: underline;
text-decoration-color: #fea72b; text-decoration-color: #fea72b;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
margin-left: 5px; @include margin-left(5px);
} }
} }
::v-deep .buttons > *:not(:last-child) .button { ::v-deep .buttons > *:not(:last-child) .button {
margin-right: 0.5rem; margin-right: 0.5rem;
@include margin-right(0.5rem);
} }
</style> </style>