@syncfusion/ej2-schedule 26.1.40 → 26.1.41-16103

package/styles/recurrence-editor/_layout.scss

@@ -1,525 +1,415 @@
-@include export-module('recurrence-editor-layout') {
-  .e-recurrenceeditor {
-    .e-editor {
-      display: flex;
-      flex-flow: row wrap;
-      margin: 0 auto;
-      max-width: 1240px;
-    }
-
-    .e-recurrence-table {
-      table-layout: fixed;
-      width: 100%;
-
-      &.e-repeat-content-wrapper td:last-child {
-        width: 27%;
-      }
-
-      &.e-month-expand-wrapper td:first-child {
-        width: 24%;
-      }
-
-      .e-repeat-content {
-        display: inline-block;
-        font-weight: normal;
-        padding: 18px 0 0 8px;
-      }
-
-      .e-input-wrapper {
-        float: none;
-        width: 100%;
-      }
-
-      .e-week-position {
-        min-width: $recurrence-week-position-min-width;
-        position: relative;
-        right: 20px;
-      }
-
-      .e-day-position {
-        min-width: 120px;
-      }
-
-      .e-monthday-element {
-        padding-left: 10px;
-      }
-    }
-
-    .e-input-wrapper-side.e-form-left {
-      padding: $recurrence-left-padding;
-    }
-
-    .e-form-left {
-      padding: 0 8px 16px 0;
-    }
-
-    .e-form-right,
-    .e-input-wrapper-side.e-form-right {
-      padding: 0 0 10px;
-    }
-
-    .e-input-wrapper {
-      float: left;
-      width: 50%;
-
-      div {
-        margin-bottom: 2.5%;
-      }
-    }
-
-    .e-input-wrapper.e-end-on-date,
-    .e-input-wrapper.e-end-on-count {
-      padding-right: 0;
-      margin-top: $recurrence-end-on-date-margin-top;
-    }
-
-    &.e-rtl {
-      .e-end-on > div,
-      .e-month-expander > div > div {
-        float: right;
-      }
-
-      .e-form-left,
-      .e-input-wrapper-side.e-form-left {
-        padding: 0 0 10px 8px;
-      }
-
-      .e-form-right,
-      .e-input-wrapper-side.e-form-right {
-        padding: 0 8px 10px 0;
-      }
-
-      .e-recurrence-table .e-monthday-element {
-        position: relative;
-        right: 10px;
-      }
-
-      .e-week-position {
-        left: 20px;
-        right: 0;
-      }
-
-      .e-input-wrapper-side.e-end-on .e-end-on-label,
-      .e-input-wrapper-side.e-non-week > .e-month-expander-label {
-        padding-right: 0;
-      }
-
-      .e-end-on-label {
-        margin-bottom: 5px;
-      }
-
-      .e-input-wrapper-side.e-end-on .e-end-on-left {
-        padding: 0 0 0 8px;
-      }
-
-      .e-input-wrapper.e-end-on-date,
-      .e-input-wrapper.e-end-on-count {
-        padding: 0 8px 0 0;
-      }
-
-      .e-recurrenceeditor {
-        .e-recurrence-table {
-          &.e-month-expand-wrapper td:first-child {
-            width: 30px;
-          }
-        }
-      }
-    }
-
-    .e-days {
-      .e-week-expander-label {
-        font-size: $recurrence-label-font-nrml-size;
-        font-weight: $recurrence-label-font-weight;
-        margin-bottom: 8px;
-      }
-
-      button {
-        border-radius: 50%;
-        flex-flow: row wrap;
-        height: 35px;
-        margin: 0 8px 10px;
-        width: 35px;
-      }
-    }
-
-    .e-hide-recurrence-element {
-      display: none;
-    }
-
-    .e-half-space {
-      width: 20%;
-    }
-
-    .e-year-expander {
-      margin-bottom: 11px;
-    }
-
-    .e-month-expander tr:first-child .e-input-wrapper {
-      padding-bottom: 11px;
-    }
-
-    .e-month-expander-checkbox-wrapper.e-input-wrapper {
-      padding-top: 3px;
-
-      .e-month-type .e-label {
-        display: none;
-      }
-    }
-
-    .e-input-wrapper-side {
-      float: left;
-      padding: 16px 20px 0;
-      width: 50%;
-
-      &.e-end-on {
-        .e-end-on-left {
-          padding-right: 16px;
-        }
-      }
-
-      &.e-non-week > .e-input-wrapper {
-        margin: 0;
-      }
-
-      &.e-non-week > .e-month-expander-label {
-        font-size: $recurrence-label-font-nrml-size;
-        font-weight: $recurrence-label-font-weight;
-        margin-bottom: $recurrence-month-label-bottom;
-        padding-right: 16px;
-      }
-    }
-
-    .e-input-wrapper-side .e-days .e-form-left {
-      padding-bottom: 6px;
-    }
-
-    .e-input-wrapper-side .e-non-week .e-form-left {
-      padding-bottom: 12px;
-    }
-
-    .e-input-wrapper-side.e-form-right {
-      margin-bottom: 11px;
-    }
-  }
-
-  .e-bigger {
-    .e-recurrenceeditor {
-      padding: 0;
-
-      .e-input-wrapper-side.e-form-left {
-        padding: 0 12px 11px 0;
-      }
-
-      .e-form-left {
-        padding: 0 12px 14px 0;
-      }
-
-      .e-recurrence-table .e-monthday-element {
-        padding-left: 70px;
-      }
-
-      .e-week-position {
-        min-width: $recurrence-week-position-bgr-min-width;
-        right: 0;
-      }
-
-      .e-day-position {
-        min-width: $recurrence-day-position-bgr-min-width;
-        padding-left: $recurrence-day-position-bgr-padding-left;
-      }
-
-      .e-input-wrapper-side.e-non-week > .e-month-expander-label {
-        font-size: $recurrence-label-font-bgr-size;
-        margin-bottom: $recurrence-month-label-bottom-bgr;
-        font-weight: $recurrence-label-font-weight;
-      }
-
-      .e-input-wrapper-side.e-end-on .e-end-on-left {
-        padding-right: $recurrence-end-bgr-padding-right;
-      }
-
-      .e-end-on-label {
-        margin-bottom: 0;
-      }
-
-      .e-days .e-week-expander-label {
-        font-size: $recurrence-label-font-bgr-size;
-        margin-bottom: 8px;
-      }
-
-      .e-input-wrapper-side.e-end-on .e-end-on-label {
-        font-size: $recurrence-label-font-bgr-size;
-        margin-bottom: 1px;
-      }
-
-      .e-month-expander tr:first-child .e-input-wrapper,
-      .e-year-expander {
-        margin-bottom: 11px;
-      }
-
-      .e-recurrence-table {
-        &.e-month-expand-wrapper td:first-child {
-          width: 30px;
-        }
-      }
-
-      .e-days {
-        button {
-          height: 40px;
-          width: 40px;
-        }
-      }
-
-      &.e-rtl {
-
-        .e-form-left,
-        .e-input-wrapper-side.e-form-left {
-          padding: 0 0 10px 12px;
-        }
-
-        .e-form-right,
-        .e-input-wrapper-side.e-form-right {
-          padding: 0 12px 10px 0;
-        }
-
-        .e-recurrence-table .e-monthday-element,
-        .e-recurrence-table .e-day-position {
-          padding: 0 64px 0 0;
-        }
-
-        .e-input-wrapper-side.e-end-on .e-end-on-label,
-        .e-input-wrapper-side.e-non-week > .e-month-expander-label {
-          padding-right: 0;
-        }
-
-        .e-end-on-label {
-          margin-bottom: 5px;
-        }
-
-        .e-input-wrapper-side.e-end-on .e-end-on-left {
-          padding: 0 0 0 12px;
-        }
-
-        .e-input-wrapper.e-end-on-date,
-        .e-input-wrapper.e-end-on-count {
-          padding: 0 12px 0 0;
-        }
-
-        .e-recurrence-table .e-week-position {
-          left: 0;
-        }
-      }
-    }
-  }
-
-  .e-device {
-    .e-recurrenceeditor {
-      .e-recurrence-table {
-        &.e-repeat-content-wrapper td:last-child {
-          width: 25%;
-        }
-
-        &.e-month-expand-wrapper td:first-child {
-          width: 20%;
-        }
-      }
-
-      .e-week-expander-label {
-        margin-bottom: 6px;
-      }
-
-      .e-month-expander-label {
-        font-size: 12px;
-        margin-bottom: 5px;
-      }
-
-      .e-footer-content {
-        padding: 12px;
-      }
-
-      .e-form-left,
-      .e-input-wrapper-side.e-form-left {
-        padding: 0 3px 10px 0;
-      }
-
-      .e-form-right,
-      .e-input-wrapper-side.e-form-right {
-        padding: 0 0 10px 3px;
-      }
-
-      .e-input-wrapper.e-end-on-date,
-      .e-input-wrapper.e-end-on-count {
-        padding: 0 0 0 10px;
-      }
-
-      .e-input-wrapper-side.e-end-on .e-end-on-left {
-        padding-right: 10px;
-      }
-
-      &.e-end-on {
-        padding-right: 0;
-
-        .e-end-on-label {
-          float: none;
-          font-size: 12px;
-          font-weight: $recurrence-label-font-weight;
-          margin-bottom: $recurrence-label-bottom;
-        }
-
-        .e-end-on-left {
-          padding-right: 0;
-        }
-      }
-
-      .e-recurrence-table .e-monthday-element,
-      .e-recurrence-table .e-day-position {
-        padding-left: 20px;
-      }
-
-      .e-recurrence-table .e-monthday-element {
-        margin-left: 20px;
-      }
-
-      .e-week-position {
-        right: 0;
-        padding-right: 10px;
-      }
-
-      &.e-rtl {
-        .e-input-wrapper-side.e-end-on .e-end-on-left {
-          padding-right: 0;
-        }
-
-        .e-input-wrapper.e-end-on-date,
-        .e-input-wrapper.e-end-on-count {
-          padding: 0 10px 0 0;
-        }
-
-        .e-recurrence-table .e-monthday-element {
-          padding: 0 20px 0 0;
-        }
-
-        .e-recurrence-table .e-day-position {
-          padding: 0 50px 0 0;
-        }
-
-        .e-week-position {
-          left: 0;
-        }
-      }
-    }
-
-    &.e-recurrence-dialog {
-      .e-dlg-header-content {
-        background: none;
-        box-shadow: none;
-        padding-bottom: 10px;
-      }
-
-      .e-editor {
-        .e-input-wrapper-side.e-end-on .e-end-on-label {
-          margin-bottom: $recurrence-label-bottom;
-        }
-      }
-
-      .e-footer-content {
-        padding: 16px 8px;
-      }
-    }
-  }
-
-  @media (max-width: 1024px) {
-    .e-recurrenceeditor {
-
-      .e-editor {
-
-        .e-input-wrapper-side.e-end-on {
-          width: 100%;
-        }
-
-        .e-input-wrapper-side.e-non-week {
-          width: 65%;
-        }
-      }
-    }
-  }
-
-  @media (max-width: 580px) {
-    .e-recurrenceeditor {
-      margin-left: auto;
-      margin-right: auto;
-      width: 100%;
-
-      .e-editor {
-        flex-direction: column;
-
-        >.e-input-wrapper.e-form-left {
-          margin-top: 0;
-        }
-
-        .e-input-wrapper-side.e-non-week > .e-month-expander-label,
-        .e-input-wrapper-side.e-end-on .e-end-on-label {
-          margin-bottom: $recurrence-month-label-bottom;
-        }
-
-        > div {
-          margin-top: 20px;
-        }
-
-        > .e-input-wrapper {
-          width: 100%;
-        }
-
-        .e-input-wrapper-side.e-end-on {
-          width: 100%;
-
-          .e-input-wrapper {
-            width: 50%;
-          }
-        }
-
-        .e-form-left,
-        .e-input-wrapper-side.e-form-left {
-          padding: 0 0 10px;
-        }
-
-        .e-input-wrapper.e-end-on-date,
-        .e-input-wrapper.e-end-on-count {
-          padding: 0 0 0 10px;
-        }
-
-        .e-input-wrapper-side.e-end-on .e-end-on-left {
-          padding-right: 10px;
-        }
-
-        .e-form-right,
-        .e-input-wrapper-side.e-form-right {
-          padding-left: 0;
-        }
-
-        .e-input-wrapper-side.e-days {
-          width: 100%;
-        }
-
-        .e-input-wrapper-side.e-non-week {
-          width: 65%;
-        }
-
-        .e-recurrence-table .e-day-position {
-          padding-left: 50px;
-        }
-      }
-
-      &.e-rtl {
-        .e-input-wrapper-side.e-end-on .e-end-on-left {
-          padding-right: 0;
-        }
-
-        .e-input-wrapper.e-end-on-date,
-        .e-input-wrapper.e-end-on-count {
-          padding: 0 10px 0 0;
-        }
-      }
-    }
-  }
-}
+@include export-module('recurrence-editor-layout') {
+  .e-recurrenceeditor {
+    .e-editor {
+      display: flex;
+      flex-flow: row wrap;
+      margin: 0 auto;
+      max-width: 1240px;
+    }
+
+    .e-recurrence-table {
+      table-layout: fixed;
+      width: 100%;
+
+      &.e-repeat-content-wrapper td:last-child {
+        width: 27%;
+      }
+
+      &.e-month-expand-wrapper td:first-child {
+        width: 24%;
+      }
+
+      .e-repeat-content {
+        display: inline-block;
+        font-weight: normal;
+        padding: 18px 0 0 8px;
+      }
+
+      .e-input-wrapper {
+        float: none;
+        width: 100%;
+      }
+
+      .e-week-position {
+        min-width: $recurrence-week-position-min-width;
+        position: relative;
+        right: 20px;
+      }
+
+      .e-day-position {
+        min-width: 120px;
+      }
+
+      .e-monthday-element {
+        padding-left: 10px;
+      }
+    }
+
+    .e-input-wrapper-side.e-form-left {
+      padding: $recurrence-left-padding;
+    }
+
+    .e-form-left {
+      padding: 0 8px 16px 0;
+    }
+
+    .e-form-right,
+    .e-input-wrapper-side.e-form-right {
+      padding: 0 0 10px;
+    }
+
+    .e-input-wrapper {
+      float: left;
+      width: 50%;
+
+      div {
+        margin-bottom: 2.5%;
+      }
+    }
+
+    .e-input-wrapper.e-end-on-date,
+    .e-input-wrapper.e-end-on-count {
+      padding-right: 0;
+      margin-top: $recurrence-end-on-date-margin-top;
+    }
+
+    &.e-rtl {
+      .e-end-on > div,
+      .e-month-expander > div > div {
+        float: right;
+      }
+
+      .e-form-left,
+      .e-input-wrapper-side.e-form-left {
+        padding: 0 0 10px 8px;
+      }
+
+      .e-form-right,
+      .e-input-wrapper-side.e-form-right {
+        padding: 0 8px 10px 0;
+      }
+
+      .e-recurrence-table .e-monthday-element {
+        position: relative;
+        right: 10px;
+      }
+
+      .e-week-position {
+        left: 20px;
+        right: 0;
+      }
+
+      .e-input-wrapper-side.e-end-on .e-end-on-label,
+      .e-input-wrapper-side.e-non-week > .e-month-expander-label {
+        padding-right: 0;
+      }
+
+      .e-end-on-label {
+        margin-bottom: 5px;
+      }
+
+      .e-input-wrapper-side.e-end-on .e-end-on-left {
+        padding: 0 0 0 8px;
+      }
+
+      .e-input-wrapper.e-end-on-date,
+      .e-input-wrapper.e-end-on-count {
+        padding: 0 8px 0 0;
+      }
+
+      .e-recurrenceeditor {
+        .e-recurrence-table {
+          &.e-month-expand-wrapper td:first-child {
+            width: 30px;
+          }
+        }
+      }
+    }
+
+    .e-days {
+      .e-week-expander-label {
+        font-size: $recurrence-label-font-nrml-size;
+        font-weight: $recurrence-label-font-weight;
+        margin-bottom: 8px;
+      }
+
+      button {
+        border-radius: 50%;
+        flex-flow: row wrap;
+        height: 35px;
+        margin: 0 8px 10px;
+        width: 35px;
+      }
+    }
+
+    .e-hide-recurrence-element {
+      display: none;
+    }
+
+    .e-half-space {
+      width: 20%;
+    }
+
+    .e-year-expander {
+      margin-bottom: 11px;
+    }
+
+    .e-month-expander tr:first-child .e-input-wrapper {
+      padding-bottom: 11px;
+    }
+
+    .e-month-expander-checkbox-wrapper.e-input-wrapper {
+      padding-top: 3px;
+
+      .e-month-type .e-label {
+        display: none;
+      }
+    }
+
+    .e-input-wrapper-side {
+      float: left;
+      padding: 16px 20px 0;
+      width: 50%;
+
+      &.e-end-on {
+        .e-end-on-left {
+          padding-right: 16px;
+        }
+      }
+
+      &.e-non-week > .e-input-wrapper {
+        margin: 0;
+      }
+
+      &.e-non-week > .e-month-expander-label {
+        font-size: $recurrence-label-font-nrml-size;
+        font-weight: $recurrence-label-font-weight;
+        margin-bottom: $recurrence-month-label-bottom;
+        padding-right: 16px;
+      }
+    }
+
+    .e-input-wrapper-side .e-days .e-form-left {
+      padding-bottom: 6px;
+    }
+
+    .e-input-wrapper-side .e-non-week .e-form-left {
+      padding-bottom: 12px;
+    }
+
+    .e-input-wrapper-side.e-form-right {
+      margin-bottom: 11px;
+    }
+  }
+
+  .e-device {
+    .e-recurrenceeditor {
+      .e-recurrence-table {
+        &.e-repeat-content-wrapper td:last-child {
+          width: 25%;
+        }
+
+        &.e-month-expand-wrapper td:first-child {
+          width: 20%;
+        }
+      }
+
+      .e-week-expander-label {
+        margin-bottom: 6px;
+      }
+
+      .e-month-expander-label {
+        font-size: 12px;
+        margin-bottom: 5px;
+      }
+
+      .e-footer-content {
+        padding: 12px;
+      }
+
+      .e-form-left,
+      .e-input-wrapper-side.e-form-left {
+        padding: 0 3px 10px 0;
+      }
+
+      .e-form-right,
+      .e-input-wrapper-side.e-form-right {
+        padding: 0 0 10px 3px;
+      }
+
+      .e-input-wrapper.e-end-on-date,
+      .e-input-wrapper.e-end-on-count {
+        padding: 0 0 0 10px;
+      }
+
+      .e-input-wrapper-side.e-end-on .e-end-on-left {
+        padding-right: 10px;
+      }
+
+      &.e-end-on {
+        padding-right: 0;
+
+        .e-end-on-label {
+          float: none;
+          font-size: 12px;
+          font-weight: $recurrence-label-font-weight;
+          margin-bottom: $recurrence-label-bottom;
+        }
+
+        .e-end-on-left {
+          padding-right: 0;
+        }
+      }
+
+      .e-recurrence-table .e-monthday-element,
+      .e-recurrence-table .e-day-position {
+        padding-left: 20px;
+      }
+
+      .e-recurrence-table .e-monthday-element {
+        margin-left: 20px;
+      }
+
+      .e-week-position {
+        right: 0;
+        padding-right: 10px;
+      }
+
+      &.e-rtl {
+        .e-input-wrapper-side.e-end-on .e-end-on-left {
+          padding-right: 0;
+        }
+
+        .e-input-wrapper.e-end-on-date,
+        .e-input-wrapper.e-end-on-count {
+          padding: 0 10px 0 0;
+        }
+
+        .e-recurrence-table .e-monthday-element {
+          padding: 0 20px 0 0;
+        }
+
+        .e-recurrence-table .e-day-position {
+          padding: 0 50px 0 0;
+        }
+
+        .e-week-position {
+          left: 0;
+        }
+      }
+    }
+
+    &.e-recurrence-dialog {
+      .e-dlg-header-content {
+        background: none;
+        box-shadow: none;
+        padding-bottom: 10px;
+      }
+
+      .e-editor {
+        .e-input-wrapper-side.e-end-on .e-end-on-label {
+          margin-bottom: $recurrence-label-bottom;
+        }
+      }
+
+      .e-footer-content {
+        padding: 16px 8px;
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .e-recurrenceeditor {
+
+      .e-editor {
+
+        .e-input-wrapper-side.e-end-on {
+          width: 100%;
+        }
+
+        .e-input-wrapper-side.e-non-week {
+          width: 65%;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 580px) {
+    .e-recurrenceeditor {
+      margin-left: auto;
+      margin-right: auto;
+      width: 100%;
+
+      .e-editor {
+        flex-direction: column;
+
+        >.e-input-wrapper.e-form-left {
+          margin-top: 0;
+        }
+
+        .e-input-wrapper-side.e-non-week > .e-month-expander-label,
+        .e-input-wrapper-side.e-end-on .e-end-on-label {
+          margin-bottom: $recurrence-month-label-bottom;
+        }
+
+        > div {
+          margin-top: 20px;
+        }
+
+        > .e-input-wrapper {
+          width: 100%;
+        }
+
+        .e-input-wrapper-side.e-end-on {
+          width: 100%;
+
+          .e-input-wrapper {
+            width: 50%;
+          }
+        }
+
+        .e-form-left,
+        .e-input-wrapper-side.e-form-left {
+          padding: 0 0 10px;
+        }
+
+        .e-input-wrapper.e-end-on-date,
+        .e-input-wrapper.e-end-on-count {
+          padding: 0 0 0 10px;
+        }
+
+        .e-input-wrapper-side.e-end-on .e-end-on-left {
+          padding-right: 10px;
+        }
+
+        .e-form-right,
+        .e-input-wrapper-side.e-form-right {
+          padding-left: 0;
+        }
+
+        .e-input-wrapper-side.e-days {
+          width: 100%;
+        }
+
+        .e-input-wrapper-side.e-non-week {
+          width: 65%;
+        }
+
+        .e-recurrence-table .e-day-position {
+          padding-left: 50px;
+        }
+      }
+
+      &.e-rtl {
+        .e-input-wrapper-side.e-end-on .e-end-on-left {
+          padding-right: 0;
+        }
+
+        .e-input-wrapper.e-end-on-date,
+        .e-input-wrapper.e-end-on-count {
+          padding: 0 10px 0 0;
+        }
+      }
+    }
+  }
+}