refactor: remove bootstrap 3 css classes

docs/concepts/localization.md

@@ -34,7 +34,7 @@ To localize simple texts, just apply the `translate` pipe to the key:
 **\*.component.html**
 
 ```html
-<span class="hidden-xs">{{ 'header.wishlists.text' | translate }}</span>
+<span>{{ 'header.wishlists.text' | translate }}</span>
 ```
 
 ### Localization with Parameters

docs/guides/testing-jest.md

@@ -340,7 +340,7 @@ Try to avoid general class names.
 :warning: **Wrong Selector**
 
 ```typescript
-const selectedLanguage = element.getElementsByClassName('hidden-xs');
+const selectedLanguage = element.getElementsByClassName('d-none');
 ```
 
 :heavy_check_mark: **Correct Selector**

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-page.component.html

@@ -6,7 +6,7 @@ <h1>
     {{ orderTemplate?.title }}
     <a
       (click)="editOrderTemplateDialog.show()"
-      class="btn btn-default btn-tool float-right"
+      class="btn btn-secondary float-right"
       [title]="'account.order_template.edit.heading' | translate"
       data-testing-id="order-template-details-edit"
       >{{ 'account.order_template.order_template.edit.rename' | translate }}</a
@@ -15,7 +15,7 @@ <h1>
 
   <div class="section">
     <ng-container *ngIf="orderTemplate.itemsCount && orderTemplate.itemsCount > 0; else noItems" class="section">
-      <div class="list-header d-none d-md-flex">
+      <div class="list-header d-md-flex">
         <div class="col-6 list-header-item">{{ 'account.order_template.table.header.item' | translate }}</div>
         <div class="col-2 list-header-item text-right">
           {{ 'shopping_cart.qty.heading' | translate }}

src/app/extensions/order-templates/pages/account-order-template/account-order-template-list/account-order-template-list.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="orderTemplates && orderTemplates.length > 0; else noOrderTemplate" class="section">
-  <div class="list-header d-none d-md-flex">
+  <div class="list-header d-md-flex">
     <div class="list-header-item col-5">{{ 'account.order_template.list.table.template' | translate }}</div>
     <div class="list-header-item col-3">{{ 'account.order_template.list.table.created' | translate }}</div>
     <div class="list-header-item col-2">{{ 'account.order_template.list.table.item' | translate }}</div>

src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html

@@ -9,7 +9,7 @@ <h1>{{ 'quickorder.page.title' | translate }}</h1>
     <div class="col-md-8">
       <h3>{{ 'quickorder.page.subtitle' | translate }}</h3>
       <p>{{ 'quickorder.page.subtitle.description' | translate }}</p>
-      <div class="list-header d-md-flex">
+      <div class="list-header d-sm-flex">
         <div class="col-md-6 list-header-item no-seperator">{{ 'quickorder.page.product.id' | translate }}</div>
         <div class="col-md-2 list-header-item no-seperator">{{ 'quickorder.page.product.quantity' | translate }}</div>
       </div>

src/app/extensions/quoting/shared/quote-edit/quote-edit.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="quote$ | async as quote">
-  <form [formGroup]="form" class="form-horizontal form-horizontal-inline">
+  <form [formGroup]="form" class="form-horizontal">
     <div class="row">
       <label class="col-4 col-md-3 col-xl-2 col-form-label">{{
         'quote.edit.unsubmitted.quote_no.label' | translate

src/app/extensions/wishlists/pages/account-wishlist-detail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.html

@@ -5,13 +5,13 @@
     </div>
     <div class="col-9 col-md-10 list-item column-price">
       <div class="row">
-        <div class="col-md-7 col-xs-12 text-left">
+        <div class="col-md-7 text-left">
           <div class="pli-description">
             <ish-product-name></ish-product-name>
             <ish-product-id></ish-product-id>
             <ish-product-variation-display></ish-product-variation-display>
             <ish-product-bundle-display></ish-product-bundle-display>
-            <div class="hidden-xs">
+            <div class="d-none d-sm-block">
               <label>{{ 'account.wishlist.table.added_on' | translate }}</label>
               {{ wishlistItemData?.creationDate | ishDate: 'shortDate' }}
             </div>

src/app/pages/account-addresses/account-addresses/account-addresses.component.html

@@ -41,7 +41,7 @@ <h1>
           <h3>{{ 'account.addresses.preferredinvoiceandshipping.heading' | translate }}</h3>
           <ish-address [address]="preferredInvoiceToAddress"></ish-address>
 
-          <div class="col-xs-11 col-sm-7 col-md-5">
+          <div class="col-sm-7 col-md-5">
             <form [formGroup]="preferredAddressForm">
               <ish-select-address
                 [form]="preferredAddressForm"
@@ -74,7 +74,7 @@ <h3>{{ 'account.addresses.preferredinvoice.heading' | translate }}</h3>
           <ng-template #noInvoiceToAddress>
             <p class="no-address-info">{{ 'account.addresses.no_preferred_invoice_address.text' | translate }}</p>
           </ng-template>
-          <div class="col-xs-11 col-sm-7 col-md-5">
+          <div class="col-sm-7 col-md-5">
             <form [formGroup]="preferredAddressForm">
               <ish-select-address
                 [form]="preferredAddressForm"
@@ -96,7 +96,7 @@ <h3>{{ 'account.addresses.preferredshipping.heading' | translate }}</h3>
           <ng-template #noShipToAddress>
             <p class="no-address-info">{{ 'account.addresses.no_preferred_shipping_address.text' | translate }}</p>
           </ng-template>
-          <div class="col-xs-11 col-sm-7 col-md-5">
+          <div class="col-sm-7 col-md-5">
             <form [formGroup]="preferredAddressForm">
               <ish-select-address
                 [form]="preferredAddressForm"
@@ -116,7 +116,7 @@ <h3>{{ 'account.addresses.preferredshipping.heading' | translate }}</h3>
           <h3>{{ 'account.addresses.heading' | translate }}</h3>
           <div *ngFor="let currentAddress of furtherAddresses" class="list-item-row">
             <div class="row">
-              <div class="col-xs-11 col-sm-7 col-md-5">
+              <div class="col-sm-7 col-md-5">
                 <div class="float-right">
                   <!-- delete address: is only possible if the customer has more than one address -->
                   <a

src/app/pages/account-order/account-order/account-order.component.html

@@ -1,7 +1,7 @@
 <div class="float-right">
   <ul class="share-tools">
     <li>
-      <a href="javascript:window.print();" class="link-print pull-right" rel="nofollow">
+      <a href="javascript:window.print();" class="link-print" rel="nofollow">
         <fa-icon [icon]="['fas', 'print']"></fa-icon>
         <span class="share-label">{{ 'account.orderdetails.print_link.text' | translate }}</span>
       </a>

src/app/pages/account-payment/account-payment/account-payment.component.html

@@ -35,7 +35,7 @@ <h4>
 </ng-template>
 
 <ng-template #paymentWidget let-pi="pi" let-isPreferred="isPreferred">
-  <div class="col-xs-11 col-sm-7 col-md-5">
+  <div class="col-sm-7 col-md-5">
     <div class="float-right">
       <a
         class="btn-tool"

src/app/pages/basket/shopping-basket/shopping-basket.component.html

@@ -35,7 +35,7 @@ <h1 class="d-flex flex-wrap align-items-baseline">
           <ish-lazy-basket-add-to-quote></ish-lazy-basket-add-to-quote>
           <ish-lazy-basket-create-order-template
             *ngIf="basket"
-            [class]="'btn btn-default'"
+            [class]="'btn btn-secondary'"
             [products]="basket.lineItems"
           ></ish-lazy-basket-create-order-template>
         </div>

src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html

@@ -42,8 +42,7 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
                         paymentMethod.paymentCosts | ishPrice
                       }}&nbsp;
                       <span *ngIf="paymentMethod.paymentCostsThreshold" class="text-muted">
-                        <span class="hidden-xs">-&nbsp;</span
-                        >{{ 'checkout.payment.payment_cost_threshold.text' | translate }}
+                        <span>-&nbsp;</span>{{ 'checkout.payment.payment_cost_threshold.text' | translate }}
                         <span class="text-nowrap">{{ paymentMethod.paymentCostsThreshold | ishPrice }}</span>
                       </span>
                     </p>

src/app/pages/checkout-payment/payment-concardis-creditcard-cvc-detail/payment-concardis-creditcard-cvc-detail.component.html

@@ -3,9 +3,9 @@
     <ish-input
       [form]="cvcDetailForm"
       controlName="cvcDetail"
-      inputClass="col-xs-7 col-sm-7 col-md-5"
+      inputClass="col-7 col-md-5"
       label="checkout.credit_card.cvc.label"
-      labelClass="col-xs-5 col-sm-5 col-md-7"
+      labelClass="col-5 col-md-7"
       markRequiredLabel="on"
       [errorMessages]="{
         required: 'checkout.credit_card.cvc.error.default'

src/app/pages/checkout-payment/payment-concardis-creditcard/payment-concardis-creditcard.component.html

@@ -72,11 +72,11 @@
     <label class="col-form-label col-md-4" for="cvcInput"
       >{{ 'checkout.credit_card.cvc.label' | translate }}<span class="required">*</span></label
     >
-    <div class="col-xs-10 col-sm-3 col-md-2">
+    <div class="col-sm-3 col-md-2">
       <div id="a_verification_container" class="iframe-container"></div>
       <small *ngIf="errorMessage.cvc?.message" class="form-text">{{ errorMessage.cvc.messageKey | translate }}</small>
     </div>
-    <div class="pull-left">
+    <div>
       <ng-template #CVCHelp>
         <span [innerHTML]="'checkout.credit_card.cvc.popover.content' | translate"></span>
       </ng-template>

src/app/pages/checkout-payment/payment-cybersource-creditcard/payment-cybersource-creditcard.component.html

@@ -75,7 +75,7 @@
         errorMessage.securityCode.message | translate
       }}</small>
     </div>
-    <div class="pull-left">
+    <div>
       <ng-template #CVCHelp>
         <span [innerHTML]="'checkout.credit_card.cvc.popover.content' | translate"></span>
       </ng-template>

src/app/pages/product/product-bundle-parts/product-bundle-parts.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="visible$ | async" class="col-xs-12 bundled-product-list">
+<div *ngIf="visible$ | async" class="bundled-product-list">
   <h3>{{ 'product.productBundle.products.heading' | translate }}</h3>
 
   <div class="product-list row">

src/app/pages/product/product-detail/product-detail.component.html

@@ -40,7 +40,7 @@ <h1>
       <ish-product-add-to-basket [class]="'btn-lg btn-block'"></ish-product-add-to-basket>
 
       <ish-lazy-product-add-to-order-template
-        [class]="'btn btn-default btn-block'"
+        [class]="'btn btn-secondary btn-block'"
       ></ish-lazy-product-add-to-order-template>
 
       <ish-lazy-product-add-to-quote [class]="'btn-block'"></ish-lazy-product-add-to-quote>

src/app/pages/product/retail-set-parts/retail-set-parts.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="visible$ | async" class="col-xs-12 bundled-product-list">
+<div *ngIf="visible$ | async" class="bundled-product-list">
   <h3>{{ 'product.retailSet.products.heading' | translate }}</h3>
 
   <div class="product-list row">

src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html

@@ -45,7 +45,7 @@ <h1 *ngIf="pagelet.hasParam('Heading1')">{{ pagelet.stringParam('Heading1') }}</
       <h2 *ngIf="pagelet.hasParam('Heading2')">{{ pagelet.stringParam('Heading2') }}</h2>
       <p
         *ngIf="pagelet.hasParam('Description')"
-        class="hidden-xs"
+        class="d-none d-sm-inline"
         [ishServerHtml]="pagelet.stringParam('Description')"
       ></p>
       <a

src/app/shared/components/basket/basket-validation-items/basket-validation-items.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="lineItems && lineItems.length">
-  <div class="row list-header hidden-xs">
+  <div class="row list-header d-md-flex">
     <div class="col-md-6 list-header-item">{{ 'checkout.pli.desc.heading' | translate }}</div>
     <div class="col-md-2 list-header-item column-price">{{ 'shopping_cart.qty.heading' | translate }}</div>
     <div class="col-md-2 list-header-item column-price">{{ 'checkout.pli.price.heading' | translate }}</div>

src/app/shared/components/basket/basket-validation-products/basket-validation-products.component.html

@@ -4,7 +4,7 @@
       {{ item.message }}
     </div>
     <div class="alert-box-body">
-      <div class="row list-header hidden-xs">
+      <div class="row list-header d-md-flex">
         <div class="col-md-10 list-header-item">{{ 'checkout.pli.desc.heading' | translate }}</div>
         <div class="col-md-2 list-header-item column-price">{{ 'checkout.pli.price.heading' | translate }}</div>
       </div>

src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html

@@ -34,7 +34,7 @@ <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
           (confirmed)="deleteAddress($event)"
         >
           <p>{{ 'checkout.address.delete.confirmation.text' | translate }}</p>
-          <small class="help-block">{{ 'checkout.address.delete.confirmation.deletionhint' | translate }}</small>
+          <small class="text-muted">{{ 'checkout.address.delete.confirmation.deletionhint' | translate }}</small>
         </ish-modal-dialog>
       </div>
 

src/app/shared/components/filter/filter-navigation-badges/filter-navigation-badges.component.html

@@ -1,13 +1,13 @@
 <div *ngIf="selected" class="row">
-  <div class="col-md-10 col-xs-12">
+  <div class="col-md-10">
     <div *ngFor="let select of selected" class="filter-navigation-badges">
       <a (click)="apply(select.searchParameter)">
         {{ select.filterName }}: {{ select.displayName }}
         <fa-icon [icon]="['fas', 'times']" class="form-control-feedback"></fa-icon>
       </a>
     </div>
   </div>
-  <div *ngIf="selected.length" class="col-md-2 col-xs-12 text-right">
+  <div *ngIf="selected.length" class="col-md-2 text-right">
     <a (click)="clear()">{{ 'product.remove_all_product_filters.text' | translate }}</a>
   </div>
 </div>

src/app/shared/components/filter/filter-navigation-badges/filter-navigation-badges.component.spec.ts

@@ -59,7 +59,7 @@ describe('Filter Navigation Badges Component', () => {
     fixture.detectChanges();
     expect(element).toMatchInlineSnapshot(`
       <div class="row">
-        <div class="col-md-10 col-xs-12">
+        <div class="col-md-10">
           <div class="filter-navigation-badges">
             <a>
               Color: blue <fa-icon class="form-control-feedback" ng-reflect-icon="fas,times"></fa-icon
@@ -74,7 +74,7 @@ describe('Filter Navigation Badges Component', () => {
             <a> HDD: 456 <fa-icon class="form-control-feedback" ng-reflect-icon="fas,times"></fa-icon></a>
           </div>
         </div>
-        <div class="col-md-2 col-xs-12 text-right"><a>product.remove_all_product_filters.text</a></div>
+        <div class="col-md-2 text-right"><a>product.remove_all_product_filters.text</a></div>
       </div>
     `);
   });

src/app/shared/components/filter/filter-navigation-horizontal/filter-navigation-horizontal.component.html

@@ -1,10 +1,7 @@
 <h3>{{ 'product.product_filters.heading' | translate }}</h3>
 
 <div *ngIf="filterNavigation" class="row justify-content-left">
-  <div
-    *ngFor="let element of filterNavigation.filter; trackBy: trackByFn"
-    class="filter-dropdown col-md-3 col-sm-6 col-xs-12"
-  >
+  <div *ngFor="let element of filterNavigation.filter; trackBy: trackByFn" class="filter-dropdown col-sm-6 col-md-3">
     <ish-filter-dropdown [filterElement]="element" (applyFilter)="applyFilter.emit($event)"></ish-filter-dropdown>
   </div>
 </div>

src/app/shared/components/order/order-list/order-list.component.html

@@ -43,25 +43,19 @@
 
             <!-- Order No -->
             <div class="col-12 col-md-2 order-md-4 list-item">
-              <label class="d-xl-none d-lg-none d-md-none control-label">
-                {{ 'account.orderlist.orderDetails.orderNo.label' | translate }}</label
-              >
+              <label class="d-md-none"> {{ 'account.orderlist.orderDetails.orderNo.label' | translate }}</label>
               <a [routerLink]="'/account/orders/' + order.id">{{ order.documentNo }}</a>
             </div>
 
             <!-- Order items count -->
             <div class="col-12 col-md-1 order-md-5 list-item">
-              <label class="d-xl-none d-lg-none d-md-none control-label">
-                {{ 'account.orderlist.orderDetails.items.label' | translate }}</label
-              >
+              <label class="d-md-none"> {{ 'account.orderlist.orderDetails.items.label' | translate }}</label>
               {{ order.totalProductQuantity }}
             </div>
 
             <!-- Order status -->
             <div class="col-12 col-md-2 order-md-6 list-item">
-              <label class="d-xl-none d-lg-none d-md-none control-label">
-                {{ 'account.orderlist.orderDetails.status.label' | translate }}</label
-              >
+              <label class="d-md-none"> {{ 'account.orderlist.orderDetails.status.label' | translate }}</label>
               <span class="badge badge-info">{{ order.status }}</span>
             </div>
 

src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html

@@ -17,7 +17,7 @@
     </div>
   </div>
   <div
-    class="col-4 col-xs-3 col-sm-2 switch-layout"
+    class="col-4 col-sm-2 switch-layout"
     [ngClass]="{ 'col-md-2': sortOptions?.length, 'col-md-5': !sortOptions?.length }"
   >
     <div class="sort-by align-items-center justify-content-end">
@@ -47,7 +47,7 @@
       </a>
     </div>
   </div>
-  <div *ngIf="sortOptions?.length" class="col-8 col-xs-9 col-sm-12 col-md-3 pull-right sort-by">
+  <div *ngIf="sortOptions?.length" class="col-8 col-sm-12 col-md-3 sort-by">
     <select
       class="form-control sort-by-filter"
       id="SortingAttribute"

src/app/shared/components/product/product-row/product-row.component.html

@@ -8,7 +8,7 @@
 
   <div class="col-9 col-md-10">
     <div class="row">
-      <div class="col-md-7 col-xs-12">
+      <div class="col-md-7">
         <ish-product-name></ish-product-name>
 
         <ish-product-rating></ish-product-rating>

src/app/shared/components/promotion/promotion-details/promotion-details.component.html

@@ -24,7 +24,7 @@ <h3 [ishServerHtml]="promotion.longTitle"></h3>
       <ng-template #title> <h3 [ishServerHtml]="promotion.title"></h3> </ng-template>
 
       <p *ngIf="promotion.ruleDescription" [ishServerHtml]="promotion.ruleDescription"></p>
-      <p *ngIf="promotion.legalContentMessage" class="help-block" [ishServerHtml]="promotion.legalContentMessage"></p>
+      <p *ngIf="promotion.legalContentMessage" class="text-muted" [ishServerHtml]="promotion.legalContentMessage"></p>
       <p *ngIf="promotion.externalUrl">
         <a [href]="promotion.externalUrl" rel="nofollow" target="_blank">{{ promotion.externalUrl }}</a>
       </p>

src/styles/global/buttons.scss

@@ -29,8 +29,7 @@
     vertical-align: baseline;
   }
 
-  &.btn-secondary,
-  &.btn-default {
+  &.btn-secondary {
     color: $button-default-color;
     background-color: $button-default-bg;
     border-color: $button-default-border;

src/styles/global/forms/forms.scss

@@ -20,16 +20,6 @@
   }
 }
 
-.form-horizontal {
-  &.form-horizontal-inline {
-    @media (max-width: $screen-xs-max) {
-      label {
-        padding-top: $space-default / 2;
-      }
-    }
-  }
-}
-
 input[type='file'] {
   padding: 0;
   border: none;