Add mixins, auto import

* add SASS mixins file * add first mixin for language-dependent colons spacing * auto import variables and mixins in files
c2corg · Mar 9, 2021 · 13115d3 · 13115d3
1 parent b859e10
commit 13115d3
Show file tree

Hide file tree

Showing 49 changed files with 30 additions and 103 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -61,8 +61,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/assets/sass/variables.scss';
-
 $sidemenu-width: 200px;
 $body-height: calc(100vh - #{$navbar-height});
 

diff --git a/src/assets/sass/main.scss b/src/assets/sass/main.scss
@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './mixins.scss';
 @import './scrollbar.scss';
 @import './external-links.scss';
 

diff --git a/src/assets/sass/mixins.scss b/src/assets/sass/mixins.scss
@@ -0,0 +1,14 @@
+@mixin colon {
+  :lang(fr) &:after {
+    content: '\00a0:';
+  }
+  :lang(it) &:after,
+  :lang(de) &:after,
+  :lang(en) &:after,
+  :lang(es) &:after,
+  :lang(ca) &:after,
+  :lang(eu) &:after,
+  :lang(zh) &:after {
+    content: ':';
+  }
+}
diff --git a/src/components/association-editor/AssociationItems.vue b/src/components/association-editor/AssociationItems.vue
@@ -268,8 +268,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .association-items {
   margin-bottom: 1rem;
 

diff --git a/src/components/cards/DocumentCard.vue b/src/components/cards/DocumentCard.vue
@@ -59,8 +59,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .document-card-container {
   position: relative;
 

diff --git a/src/components/cards/FeedCard.vue b/src/components/cards/FeedCard.vue
@@ -169,8 +169,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 @media screen and (max-width: $tablet) {
   .feed-card {
     border-left: 0 !important;

diff --git a/src/components/cards/utils/CardContainer.vue b/src/components/cards/utils/CardContainer.vue
@@ -26,8 +26,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .card {
   transition: 0.1s;
   border: $card-border;

diff --git a/src/components/cards/utils/CardRow.vue b/src/components/cards/utils/CardRow.vue
@@ -5,8 +5,6 @@
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 div {
   padding: 0.4rem 0.8rem;
   font-size: 0.9rem;

diff --git a/src/components/cards/utils/CardTitle.vue b/src/components/cards/utils/CardTitle.vue
@@ -7,8 +7,6 @@
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .card-header-title {
   padding: 0.4rem 0.8rem;
   display: block;

diff --git a/src/components/datatable/cell-renderers/DocumentActivities.vue b/src/components/datatable/cell-renderers/DocumentActivities.vue
@@ -9,8 +9,6 @@ export default Vue.extend({});
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/sass/variables.scss';
-
 .cell-activities {
   font-size: 26px;
 }

diff --git a/src/components/gdpr/GdprBanner.vue b/src/components/gdpr/GdprBanner.vue
@@ -70,8 +70,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/sass/variables.scss';
-
 .gdpr-content {
   z-index: 30;
   position: fixed;

diff --git a/src/components/generics/Activities.vue b/src/components/generics/Activities.vue
@@ -28,8 +28,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 @media print {
   /*write the activity's title instead of the icon*/
   .replace-icon-by-names-on-print {

diff --git a/src/components/generics/ContentBox.vue b/src/components/generics/ContentBox.vue
@@ -15,8 +15,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 //default
 $cb-shadow: 0;
 $cb-border-top: 0;

diff --git a/src/components/generics/Markdown.vue b/src/components/generics/Markdown.vue
@@ -164,8 +164,6 @@ export default {
 
 <style lang="scss">
 // Not scoped syle, because CSS selector are not explicitly present in template
-@import '@/assets/sass/variables.scss';
-
 .markdown-content:not(:last-child) {
   margin-bottom: 1.5rem;
 }

diff --git a/src/components/generics/icons/IconCondition.vue b/src/components/generics/icons/IconCondition.vue
@@ -14,7 +14,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .icon-condition-excellent {
   color: green;
 }

diff --git a/src/components/generics/inputs/InputActivity.vue b/src/components/generics/inputs/InputActivity.vue
@@ -50,8 +50,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .input-item {
   font-size: 40px;
   margin: 4px;

diff --git a/src/components/generics/inputs/InputEventActivity.vue b/src/components/generics/inputs/InputEventActivity.vue
@@ -46,8 +46,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .input-item {
   font-size: 40px;
   margin: 4px;

diff --git a/src/components/generics/inputs/InputMultiSelect.vue b/src/components/generics/inputs/InputMultiSelect.vue
@@ -36,8 +36,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .has-error {
   box-shadow: 0px 0px 8px 0px $danger;
   // border: 1px solid $danger;

diff --git a/src/components/generics/inputs/InputOrientation.vue b/src/components/generics/inputs/InputOrientation.vue
@@ -57,8 +57,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .input-orientation > g > path {
   fill: #ddd;
   transition: 0.1s;

diff --git a/src/components/generics/inputs/InputSimple.vue b/src/components/generics/inputs/InputSimple.vue
@@ -85,8 +85,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 select,
 input {
   min-width: 15rem;

diff --git a/src/components/image-viewer/ImageViewer.vue b/src/components/image-viewer/ImageViewer.vue
@@ -268,8 +268,6 @@ export default {
 </style>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 $headerHeight: 3rem;
 $paginationHeight: 30px;
 

diff --git a/src/views/Navigation.vue b/src/views/Navigation.vue
@@ -241,8 +241,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 nav {
   max-width: 100vw;
   height: $navbar-height;
@@ -376,8 +374,6 @@ nav {
 </style>
 
 <style lang="scss">
-@import '@/assets/sass/variables.scss';
-
 @media screen and (max-width: $tablet) {
   .add-button .dropdown-content {
     position: fixed;

diff --git a/src/views/SideMenu.vue b/src/views/SideMenu.vue
@@ -111,8 +111,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 $brandLogoHeight: 70px;
 $brandLogoMargin: 5px;
 

diff --git a/src/views/document/utils/DocumentViewHeader.vue b/src/views/document/utils/DocumentViewHeader.vue
@@ -107,8 +107,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .button-bar {
   font-size: 1.5rem;
 }

diff --git a/src/views/document/utils/FollowButton.vue b/src/views/document/utils/FollowButton.vue
@@ -56,8 +56,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .follow-button-yellow {
   color: $yellow !important;
 }

diff --git a/src/views/document/utils/TagsButton.vue b/src/views/document/utils/TagsButton.vue
@@ -57,8 +57,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .todo-button.active {
   color: $yellow !important;
 }

diff --git a/src/views/document/utils/boxes/AssociatedDocuments.vue b/src/views/document/utils/boxes/AssociatedDocuments.vue
@@ -121,8 +121,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .title {
   margin-bottom: 0.2rem !important;
 }

diff --git a/src/views/document/utils/boxes/CommentsBox.vue b/src/views/document/utils/boxes/CommentsBox.vue
@@ -198,8 +198,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .discourse-post {
   border-top: 6px solid $color-base-c2c;
   margin-bottom: 1.5rem;

diff --git a/src/views/document/utils/boxes/ToolBox.vue b/src/views/document/utils/boxes/ToolBox.vue
@@ -359,8 +359,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .toolbox-button {
   cursor: pointer;
 

diff --git a/src/views/document/utils/boxes/ToolBoxButton.vue b/src/views/document/utils/boxes/ToolBoxButton.vue
@@ -51,8 +51,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .toolbox-button {
   display: block;
   cursor: pointer;

diff --git a/src/views/document/utils/field-viewers/ConditionLevels.vue b/src/views/document/utils/field-viewers/ConditionLevels.vue
@@ -59,8 +59,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/sass/variables.scss';
-
 @media screen and (max-width: $tablet) {
   thead {
     display: none;

diff --git a/src/views/document/utils/field-viewers/LabelValue.vue b/src/views/document/utils/field-viewers/LabelValue.vue
@@ -22,17 +22,8 @@ export default {
 };
 </script>
 
-<style scoped>
-:lang(fr) .label-value-label:after {
-  content: '\00a0:';
-}
-:lang(it) .label-value-label:after,
-:lang(de) .label-value-label:after,
-:lang(en) .label-value-label:after,
-:lang(es) .label-value-label:after,
-:lang(ca) .label-value-label:after,
-:lang(eu) .label-value-label:after,
-:lang(zh) .label-value-label:after {
-  content: ':';
+<style scoped lang="scss">
+.label-value-label {
+  @include colon;
 }
 </style>
diff --git a/src/views/document/utils/windows/MergeDocumentWindow.vue b/src/views/document/utils/windows/MergeDocumentWindow.vue
@@ -115,8 +115,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .modal-card-body,
 .modal-card,
 .modal {

diff --git a/src/views/documents/DocumentsView.vue b/src/views/documents/DocumentsView.vue
@@ -253,8 +253,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 $section-padding: 1.5rem; //TODO find this variable
 $header-height: 34px;
 $header-padding-bottom: 1.5rem; //TODO find this variable

diff --git a/src/views/documents/utils/PageSelector.vue b/src/views/documents/utils/PageSelector.vue
@@ -97,8 +97,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .pagination-link {
   height: 1.75em;
 }

diff --git a/src/views/documents/utils/QueryItems.vue b/src/views/documents/utils/QueryItems.vue
@@ -263,8 +263,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .title-input {
   display: inline-flex;
   margin-bottom: 0 !important;

diff --git a/src/views/portals/FeedView.vue b/src/views/portals/FeedView.vue
@@ -66,8 +66,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 @media screen and (max-width: $tablet) {
   .feed-view {
     padding-left: 0;

diff --git a/src/views/portals/HomeBanner.vue b/src/views/portals/HomeBanner.vue
@@ -54,8 +54,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 section {
   background-image: url('~@/assets/img/backgrounds/alexbuisse-greenland-800w.jpg');
   background-size: cover;

diff --git a/src/views/portals/YetiView.vue b/src/views/portals/YetiView.vue
@@ -1024,8 +1024,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 $section-padding: 1.5rem; //TODO find this variable
 $box-padding: 1.25rem; //TODO find this variable
 $header-height: 34px;

diff --git a/src/views/portals/utils/DashboardLink.vue b/src/views/portals/utils/DashboardLink.vue
@@ -39,8 +39,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .dashboard-link {
   .activity-icons {
     line-height: 1;

diff --git a/src/views/portals/utils/ForumWidget.vue b/src/views/portals/utils/ForumWidget.vue
@@ -140,8 +140,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables.scss';
-
 .forum-row {
   display: flex;
   color: $text;