Replace 'extend' with actual CSS and/or mixins

owncloud · Nov 30, 2022 · 385d160 · 385d160
1 parent 8e6520f
commit 385d160
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 54 deletions.
diff --git a/packages/design-system/src/components/OcAccordion/OcAccordion.vue b/packages/design-system/src/components/OcAccordion/OcAccordion.vue
@@ -158,8 +158,7 @@ export default {
   }
 
   &-title {
-    @extend .oc-mb-rm;
-
+    margin-bottom: 0;
     display: block;
     font-size: var(--oc-font-size-large);
 

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
-    <ol class="oc-breadcrumb-list oc-flex">
+    <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
         v-for="(item, index) in items"
         :key="index"
@@ -52,12 +52,12 @@
       <label
         ref="mobileDropdown"
         tabindex="0"
-        class="oc-breadcrumb-drop-label"
+        class="oc-breadcrumb-drop-label oc-flex oc-flex-middle oc-flex-between"
         @keydown.enter="$refs.mobileDropdown.click()"
       >
         <span
           v-if="currentFolder"
-          class="oc-breadcrumb-drop-label-text"
+          class="oc-breadcrumb-drop-label-text oc-text-truncate"
           aria-current="page"
           v-text="currentFolder.text"
         />
@@ -177,9 +177,9 @@ export default {
   overflow: hidden;
 
   &-list {
-    @extend .oc-visible\@s;
-    @extend .oc-m-rm;
-    @extend .oc-p-rm;
+    @media (max-width: $oc-breakpoint-xsmall-max) {
+      display: none !important;
+    }
 
     list-style: none;
     align-items: baseline;
@@ -234,12 +234,13 @@ export default {
   /* stylelint-enable */
 
   &-drop {
-    @extend .oc-hidden\@s;
+    @media (min-width: $oc-breakpoint-small-default) {
+      display: none !important;
+    }
 
     .oc-drop > .oc-card > ol {
-      @extend .oc-m-rm;
-      @extend .oc-p-rm;
-
+      margin: 0;
+      padding: 0;
       list-style: none;
 
       > li a,
@@ -261,18 +262,10 @@ export default {
     }
 
     &-label {
-      @extend .oc-flex;
-      @extend .oc-flex-middle;
-      @extend .oc-flex-between;
-
       border: $global-border-width solid var(--oc-color-swatch-primary-muted);
       cursor: pointer;
       height: $global-control-height;
       padding: var(--oc-space-small);
-
-      &-text {
-        @extend .oc-text-truncate;
-      }
     }
   }
 }

diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default">
-  <ol class="oc-breadcrumb-list oc-flex">
+  <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
       <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
@@ -23,7 +23,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <!---->
     </li>
   </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label oc-flex oc-flex-middle oc-flex-between"><span aria-current="page" class="oc-breadcrumb-drop-label-text oc-text-truncate">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
     </label>
     <oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
@@ -51,7 +51,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
 
 exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead">
-  <ol class="oc-breadcrumb-list oc-flex">
+  <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
       <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
@@ -72,7 +72,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <!---->
     </li>
   </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label oc-flex oc-flex-middle oc-flex-between"><span aria-current="page" class="oc-breadcrumb-drop-label-text oc-text-truncate">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
     </label>
     <oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">

diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -360,7 +360,7 @@ export default {
       var(--oc-color-swatch-primary-muted)
     );
     &-filled {
-      @extend .oc-background-primary-gradient;
+      @include oc-background-primary-gradient;
       color: var(--oc-color-swatch-inverse-default) !important;
 
       span > svg {

diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -33,8 +33,6 @@ export default {
 @import '../../styles/styles';
 
 .oc-loader {
-  @extend .oc-position-relative;
-
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: #f8f8f8;
@@ -47,20 +45,20 @@ export default {
   overflow: hidden;
   vertical-align: baseline;
   width: 100%;
+  position: relative;
 
   &-flat {
     border-radius: 0 !important;
     height: 5px !important;
   }
 
   &::after {
-    @extend .oc-position-absolute;
-    @extend .oc-display-block;
-
     background: var(--oc-color-text-muted);
     content: '';
     height: 100%;
     width: 0;
+    display: block;
+    position: absolute;
 
     animation: {
       duration: 1.4s;

diff --git a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-progress-pie" :data-fill="_fill">
     <div class="oc-progress-pie-container" />
-    <label v-if="showLabel" class="oc-progress-pie-label" v-text="_label" />
+    <label v-if="showLabel" class="oc-progress-pie-label oc-text-muted" v-text="_label" />
   </div>
 </template>
 <script>
@@ -104,8 +104,6 @@ $default-size: 64px;
   }
 
   &-label {
-    @extend .oc-text-muted;
-
     color: var(--oc-color-text-muted) !important;
     left: 50%;
     position: absolute;

diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -2,7 +2,7 @@
   <oc-grid
     flex
     :role="isFilter ? undefined : 'search'"
-    class="oc-search"
+    class="oc-search oc-flex-middle"
     :class="{ 'oc-search-small': small }"
   >
     <div class="oc-width-expand oc-position-relative">
@@ -227,7 +227,7 @@ export default {
       return 'medium'
     },
     inputClass() {
-      const classes = ['oc-search-input']
+      const classes = ['oc-search-input', 'oc-input']
 
       this.icon && classes.push('oc-search-input-icon')
       !this.buttonHidden && classes.push('oc-search-input-button')
@@ -287,8 +287,6 @@ export default {
 @import '../../styles/styles';
 
 .oc-search {
-  @extend .oc-flex-middle;
-
   min-width: $form-width-medium;
 
   &-button {
@@ -313,8 +311,6 @@ export default {
   }
 
   &-input {
-    @extend .oc-input;
-
     border-radius: 25px;
     border: 1px solid var(--oc-color-input-border);
     color: var(--oc-color-input-text-muted);

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -7,7 +7,7 @@
         v-bind="additionalAttributes"
         ref="input"
         :aria-invalid="ariaInvalid"
-        class="oc-text-input oc-rounded"
+        class="oc-text-input oc-input oc-rounded"
         :class="{
           'oc-text-input-warning': !!warningMessage,
           'oc-text-input-danger': !!errorMessage
@@ -276,8 +276,6 @@ export default {
 @import '../../styles/styles';
 
 .oc-text-input {
-  @extend .oc-input;
-
   background-color: var(--oc-color-input-bg);
   border: 1px solid var(--oc-color-input-border);
   color: var(--oc-color-input-text-muted);
@@ -309,10 +307,9 @@ export default {
   }
 
   &-message {
-    @extend .oc-flex;
-    @extend .oc-flex-middle;
-    @extend .oc-mt-xs;
-
+    display: flex;
+    align-items: center;
+    margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
 }

diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -230,9 +230,9 @@ export default {
   }
 
   &-message {
-    @extend .oc-flex;
-    @extend .oc-flex-middle;
-    @extend .oc-mt-xs;
+    display: flex;
+    align-items: center;
+    margin-top: var(--oc-space-xsmall);
 
     min-height: $oc-font-size-default * 1.5;
   }

diff --git a/packages/design-system/src/styles/theme/background.scss b/packages/design-system/src/styles/theme/background.scss
@@ -1,3 +1,10 @@
+@mixin oc-background-primary-gradient {
+  background:
+    linear-gradient(90deg,
+      var(--oc-color-swatch-primary-muted) 0%,
+      var(--oc-color-swatch-primary-gradient) 100%);
+}
+
 .oc-background-selected {
   background-color: var(--oc-color-background-highlight) !important;
 }
@@ -8,11 +15,9 @@
 
 /* stylelint-disable */
 .oc-background-primary-gradient {
-  background:
-    linear-gradient(90deg,
-    var(--oc-color-swatch-primary-muted) 0%,
-    var(--oc-color-swatch-primary-gradient) 100%);
+  @include oc-background-primary-gradient;
 }
+
 /* stylelint-enable */
 
 .oc-background-secondary {

diff --git a/packages/web-app-files/src/components/Spaces/ReadmeContentModal.vue b/packages/web-app-files/src/components/Spaces/ReadmeContentModal.vue
@@ -13,7 +13,7 @@
         <textarea
           id="description-input-area"
           v-model="readmeContent"
-          class="oc-width-1-1 oc-height-1-1 oc-text-input"
+          class="oc-width-1-1 oc-height-1-1 oc-input oc-text-input"
           rows="30"
         ></textarea>
       </template>