(#46): Removing css grid since they are not fully supported by IE11

tnicola · Mar 16, 2019 · 2b1025f · 2b1025f
1 parent c97f537
commit 2b1025f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/lib/src/components/step/joyride-step.component.html b/src/lib/src/components/step/joyride-step.component.html
@@ -20,20 +20,20 @@
                 </ng-template>
             </div>
             <div class="joyride-step__buttons-container">
-                <div class="joyride-step__prev-container" *ngIf="isPrevButtonVisible && !isFirstStep()" (click)="prev()">
+                <div class="joyride-step__prev-container joyride-step__button" *ngIf="isPrevButtonVisible && !isFirstStep()" (click)="prev()">
                     <ng-container *ngTemplateOutlet="customPrevButton ? customPrevButton : defaultPrevButton"></ng-container>
                     <ng-template #defaultPrevButton>
                         <joyride-button class="joyride-step__prev-button" [color]="themeColor">Prev</joyride-button>
                     </ng-template>
                 </div>
-                <div class="joyride-step__next-container" *ngIf="!isLastStep(); else doneButton" (click)="next()">
+                <div class="joyride-step__next-container joyride-step__button" *ngIf="!isLastStep(); else doneButton" (click)="next()">
                     <ng-container *ngTemplateOutlet="customNextButton ? customNextButton : defaulNextButton"></ng-container>
                     <ng-template #defaulNextButton>
                         <joyride-button [color]="themeColor">Next</joyride-button>
                     </ng-template>
                 </div>
                 <ng-template #doneButton>
-                    <div class="joyride-step__done-container" (click)="close()">
+                    <div class="joyride-step__done-container joyride-step__button" (click)="close()">
                         <ng-container *ngTemplateOutlet="customDoneButton ? customDoneButton : defaultDoneButton"></ng-container>
                         <ng-template #defaultDoneButton>
                             <joyride-button class="joyride-step__done-button" [color]="themeColor">Done</joyride-button>

diff --git a/src/lib/src/components/step/joyride-step.component.scss b/src/lib/src/components/step/joyride-step.component.scss
@@ -14,7 +14,7 @@
         box-sizing: border-box;
         position: relative;
         color: #000000;
-        background-color: #FFFFFF;
+        background-color: #ffffff;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -50,9 +50,16 @@
         padding-left: 8px;
     }
     &__buttons-container {
-        display: grid;
-        grid-gap: 5px;
-        grid-template-columns: auto auto;
+        display: flex;
+        flex-direction: row;
+    }
+    &__button{
+        &:first-child {
+            margin-right: 2.5px;
+        }
+        &:last-child {
+            margin-left: 2.5px;
+        }
     }
     &__counter {
         font-weight: bold;
@@ -61,4 +68,4 @@
     &__counter-container {
         margin-right: 10px;
     }
-}
+}