Migrate LESS styles to SCSS

.pre-commit-config.yaml

@@ -22,4 +22,4 @@ repos:
           description: This hook handles all frontend linting for Kolibri Studio
           entry: yarn run lint-frontend:format
           language: system
-          files: \.(js|vue|scss|less|css)$
+          files: \.(js|vue|scss|css)$

.stylelintrc.js

@@ -8,8 +8,14 @@ module.exports = {
      * Inline comments explain why rule is ignored
      */
     'selector-max-id': null, // This would require a major refactor
-    'at-rule-no-unknown': null, // we're using LESS
-    'scss/at-rule-no-unknown': null, // we're using LESS
-    'csstree/validator': null // this triggers issues with unknown at rules too.
+    'csstree/validator': null, // this triggers issues with unknown at rules too.
+    'selector-pseudo-element-no-unknown': [ 
+     true,
+     {
+         // In Vue 2.6 and later, `::v-deep` is used for deep selectors.  
+         // This rule allows `::v-deep` to prevent linting errors.
+         ignorePseudoElements: ['v-deep'],
+     }
+    ]
   },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -562,13 +562,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-text-field {
     margin-top: 8px !important;
   }
 
-  .policy-checkbox /deep/ .v-input__slot {
+  .policy-checkbox ::v-deep .v-input__slot {
     margin-bottom: 4px !important;
 
     label {
@@ -593,11 +593,11 @@
   .span-spacing {
     display: flex;
     margin-left: 40px;
-  }
 
-  .span-spacing span {
-    margin-left: 2px;
-    font-size: 16px;
+    span {
+      margin-left: 2px;
+      font-size: 16px;
+    }
   }
 
   .span-spacing-email {

contentcuration/contentcuration/frontend/accounts/pages/Main.vue

@@ -206,20 +206,24 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .main {
     overflow: auto;
     /* stylelint-disable-next-line custom-property-pattern */
     background-color: var(--v-backgroundColor-base);
   }
 
-  .links span:not(:last-child)::after {
-    margin: 0 8px 0 12px;
-    font-size: 14pt;
-    color: var(--v-grey-base);
-    vertical-align: middle;
-    content: '•';
+  .links {
+    span {
+      &:not(:last-child)::after {
+        margin: 0 8px 0 12px;
+        font-size: 14pt;
+        color: var(--v-grey-base);
+        vertical-align: middle;
+        content: '•';
+      }
+    }
   }
 
   .w-100 {

contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue

@@ -68,7 +68,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;

contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue

@@ -69,7 +69,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;

contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue

@@ -93,7 +93,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -55,8 +55,7 @@
 
 </script>
 
-
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   div {
     white-space: nowrap;
@@ -68,9 +67,4 @@
     text-overflow: ellipsis;
   }
 
-  .VBtn:hover::before,
-  .VBtn:focus::before {
-    background-color: transparent;
-  }
-
 </style>

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -62,5 +62,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue

@@ -225,5 +225,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>

contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue

@@ -248,9 +248,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-chip__close {
+  ::v-deep .v-chip__close {
     padding-top: 4px;
   }
 

contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue

@@ -168,5 +168,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>

contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue

@@ -400,7 +400,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .user-table {
     max-width: 1024px;

contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue

@@ -219,6 +219,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue

@@ -236,12 +236,12 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .list-item-disabled {
     opacity: 0.5;
 
-    /deep/ .v-list__tile--link:hover {
+    ::v-deep .v-list__tile--link:hover {
       color: inherit;
       background-color: transparent;
     }

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue

@@ -425,10 +425,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @exercise-answer-correct: #4caf50;
-  @exercise-answer-wrong: #ef5350;
+  $exercise-answer-correct: #4caf50;
+  $exercise-answer-wrong: #ef5350;
 
   .card-border-light {
     /* stylelint-disable-next-line custom-property-pattern */
@@ -448,11 +448,11 @@
     }
 
     &.closed.answer-correct:hover {
-      background-color: fade(@exercise-answer-correct, 15%);
+      background-color: rgba($exercise-answer-correct, 0.15);
     }
 
     &.closed.answer-wrong:hover {
-      background-color: fade(@exercise-answer-wrong, 15%);
+      background-color: rgba($exercise-answer-wrong, 0.15);
     }
 
     .indicator {
@@ -461,11 +461,11 @@
       height: 100%;
 
       &.correct {
-        background-color: @exercise-answer-correct;
+        background-color: $exercise-answer-correct;
       }
 
       &.wrong {
-        background-color: @exercise-answer-wrong;
+        background-color: $exercise-answer-wrong;
       }
     }
   }
@@ -475,8 +475,8 @@
   }
 
   /* Remove the underline on text fields that are not focused */
-  /deep/.no-border.v-text-field > .v-input__control > .v-input__slot::before,
-  /deep/.no-border.v-text-field > .v-input__control > .v-input__slot::after {
+  ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::before,
+  ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::after {
     border-style: none;
   }
 

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue

@@ -453,7 +453,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .item {
     position: relative;

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue

@@ -420,7 +420,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .question-text {
     transition: 0.7s;

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue

@@ -223,7 +223,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .hints-toggle {
     cursor: pointer;
@@ -247,7 +247,7 @@
     /*! rtl:end:ignore */
   }
 
-  /deep/ .v-input--selection-controls {
+  ::v-deep .v-input--selection-controls {
     margin-top: 0;
 
     .accent--text {
@@ -259,7 +259,7 @@
     }
   }
 
-  /deep/ img {
+  ::v-deep img {
     max-width: 100%;
     height: auto;
   }
@@ -268,7 +268,7 @@
     padding: 11px;
   }
 
-  .item-answers-preview /deep/ .checkbox-icon {
+  .item-answers-preview ::v-deep .checkbox-icon {
     top: 8px;
   }
 

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue

@@ -316,7 +316,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .toolbar-item {
     max-width: 50px;

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue

@@ -108,7 +108,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .channel-item {
     background: #ffffff;
@@ -119,12 +119,12 @@
   .channel-tile,
   .v-list__tile__title,
   .v-list__tile__title > h4,
-  /deep/ .channel-tile > .v-list__tile {
+  ::v-deep .channel-tile > .v-list__tile {
     width: 100%;
     max-width: 100%;
   }
 
-  /deep/ .channel-tile > .v-list__tile {
+  ::v-deep .channel-tile > .v-list__tile {
     padding-right: 0;
   }
 
@@ -137,12 +137,13 @@
   }
 
   .text-truncate {
-    /* fix clipping of dangling characters */
+    // Fix clipping of dangling characters
     line-height: 1.3 !important;
   }
 
-  /deep/ .selectedIndeterminate svg {
+  ::v-deep .selectedIndeterminate svg {
     fill: gray !important;
   }
 
 </style>
+