@xenknight/framework7 0.0.2

package/components/calendar/calendar.less

@@ -0,0 +1,448 @@
+/* === Calendar/Datepicker === */
+@import './calendar-vars.less';
+.calendar {
+  overflow: hidden;
+  height: var(--f7-calendar-height);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &.modal-in {
+    display: flex;
+  }
+  @media (orientation: landscape) and (max-height: 415px) {
+    &.calendar-sheet {
+      height: var(--f7-calendar-sheet-landscape-height);
+    }
+    &.calendar-modal {
+      height: calc(100vh - var(--f7-navbar-height));
+    }
+  }
+  &.calendar-inline,
+  &.calendar-popover .calendar {
+    position: relative;
+  }
+}
+.calendar-sheet {
+  --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
+  background: var(--f7-calendar-sheet-bg-color);
+  padding-bottom: var(--f7-safe-area-bottom);
+  height: calc(var(--f7-calendar-height) + var(--f7-safe-area-bottom));
+  &:before {
+    z-index: 600;
+  }
+}
+.calendar-sheet,
+.calendar-modal,
+.calendar-popover {
+  .toolbar:before {
+    display: none;
+  }
+}
+.calendar-popover {
+  width: var(--f7-calendar-popover-width);
+  .toolbar-top,
+  .calendar-header {
+    border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
+    overflow: hidden;
+  }
+  .calendar-header + .toolbar-top {
+    border-radius: 0;
+  }
+  .toolbar-bottom,
+  .calendar-footer {
+    border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
+  }
+  .calendar {
+    height: var(--f7-calendar-popover-height);
+    position: relative;
+    z-index: 1;
+  }
+  .calendar-month-picker,
+  .calendar-year-picker,
+  .calendar-time-picker {
+    border-radius: var(--f7-popover-border-radius);
+    .picker {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+.calendar-header {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  padding: var(--f7-calendar-header-padding);
+  background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
+  height: var(--f7-calendar-header-height);
+  line-height: var(--f7-calendar-header-height);
+  font-size: var(--f7-calendar-header-font-size);
+  font-weight: var(--f7-calendar-header-font-weight);
+  a {
+    color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  }
+}
+.calendar-footer {
+  width: 100%;
+  flex-shrink: 0;
+  padding: var(--f7-calendar-footer-padding);
+  background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
+  height: var(--f7-calendar-footer-height);
+  font-size: var(--f7-calendar-header-font-size);
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  align-items: center;
+  position: relative;
+  a {
+    color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  }
+  .hairline(top, var(--f7-calendar-footer-border-color, var(--f7-bars-border-color)));
+}
+.calendar-modal {
+  position: absolute;
+  height: var(--f7-calendar-modal-height);
+  overflow: hidden;
+  top: 50%;
+  left: 50%;
+  min-width: 300px;
+  max-width: var(--f7-calendar-modal-max-width);
+  transform: translate3d(-50%, 100vh, 0);
+  transition-property: transform;
+  display: flex;
+  z-index: 13500;
+  background: var(--f7-calendar-modal-bg-color);
+  width: 90%;
+  border-radius: var(--f7-calendar-modal-border-radius);
+  box-shadow: var(--f7-calendar-modal-box-shadow);
+  transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
+  &.modal-in,
+  &.modal-out {
+    transition-duration: 400ms;
+  }
+  &.modal-in {
+    transform: translate3d(-50%, -50%, 0);
+  }
+  &.modal-out {
+    transform: translate3d(-50%, 100vh, 0);
+  }
+}
+.calendar-week-header {
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+  font-size: var(--f7-calendar-week-header-font-size);
+  background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
+  height: var(--f7-calendar-week-header-height);
+  padding-left: var(--f7-safe-area-left);
+  padding-right: var(--f7-safe-area-right);
+  .calendar-week-day {
+    flex-shrink: 1;
+    width: calc(100% / 7);
+    text-align: center;
+    line-height: var(--f7-calendar-week-header-height);
+  }
+}
+.calendar-months {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 10;
+}
+.calendar-months-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: 300ms;
+}
+.calendar-month {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.calendar-row {
+  height: (100% / 6);
+  display: flex;
+  flex-shrink: 1;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding-left: var(--f7-safe-area-left);
+  padding-right: var(--f7-safe-area-right);
+}
+.calendar-modal,
+.calendar-popover {
+  .calendar-months:first-child .calendar-row:first-child {
+    .hairline-remove(top);
+  }
+}
+.calendar-day {
+  flex-shrink: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: (100% / 7);
+  text-align: center;
+  cursor: pointer;
+  z-index: 20;
+  color: var(--f7-calendar-day-text-color);
+  height: 100%;
+  font-size: var(--f7-calendar-day-font-size);
+  &-today &-number {
+    color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
+    background-color: var(--f7-calendar-today-bg-color);
+  }
+  &-prev,
+  &-next {
+    color: var(--f7-calendar-prev-next-text-color);
+  }
+  &-disabled {
+    color: var(--f7-calendar-disabled-text-color);
+    cursor: auto;
+  }
+  &-selected &-number {
+    color: var(--f7-calendar-selected-text-color);
+    background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
+  }
+  &-number {
+    display: inline-block;
+    border-radius: 50%;
+    position: relative;
+    width: var(--f7-calendar-day-size);
+    height: var(--f7-calendar-day-size);
+    line-height: var(--f7-calendar-day-size);
+  }
+  &-events {
+    position: absolute;
+    display: flex;
+    left: 0;
+    width: 100%;
+    top: 100%;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+  }
+  &-event {
+    width: var(--f7-calendar-event-dot-size);
+    height: var(--f7-calendar-event-dot-size);
+    border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
+    background-color: var(--f7-calendar-event-bg-color);
+    + .calendar-day-event {
+      margin-left: 2px;
+    }
+  }
+}
+.calendar-day-selected-range,
+.calendar-day-selected-left,
+.calendar-day-selected-right {
+  position: relative;
+  &:before {
+    width: 100%;
+    height: var(--f7-calendar-day-size);
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: -1;
+    background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
+    opacity: 0.2;
+  }
+}
+.calendar-day-selected-range:first-child:before,
+.calendar-day-selected-left:before {
+  left: auto;
+  right: 0;
+  width: calc(50% + var(--f7-calendar-day-size) / 2);
+  border-radius: var(--f7-calendar-day-size) 0 0 var(--f7-calendar-day-size);
+}
+
+.calendar-day-selected-range:last-child:before,
+.calendar-day-selected-right:before {
+  width: calc(50% + var(--f7-calendar-day-size) / 2);
+  border-radius: 0 var(--f7-calendar-day-size) var(--f7-calendar-day-size) 0;
+}
+.calendar-day-selected-left:last-child:before,
+.calendar-day-selected-right:first-child:before {
+  display: none;
+}
+.calendar-day-selected-left.calendar-day-selected-right:before {
+  content: none;
+  display: none;
+}
+
+.calendar-day-selected-range {
+  .calendar-day-number {
+    background-color: transparent;
+    color: inherit;
+  }
+}
+
+.calendar-month-selector,
+.calendar-year-selector {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 50%;
+  max-width: 200px;
+  flex-shrink: 10;
+  margin-left: auto;
+  margin-right: auto;
+  .calendar-day-number {
+    flex-shrink: 1;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  a.icon-only {
+    min-width: 36px;
+  }
+}
+
+.calendar-month-picker,
+.calendar-year-picker,
+.calendar-time-picker {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  background: transparent;
+}
+.calendar-month-picker,
+.calendar-year-picker {
+  .picker-columns {
+    text-align: center;
+  }
+}
+.calendar-month-picker-item,
+.calendar-year-picker-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition-duration: 100ms;
+  box-sizing: border-box;
+  span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  &.active-state {
+    background: var(--f7-calendar-picker-pressed-bg-color);
+  }
+}
+.calendar-month-picker-item {
+  padding: 5px;
+}
+.sheet-modal .calendar-month-picker-item {
+  width: 25%;
+  height: (100% / 3);
+  &:nth-child(4n + 1) {
+    .hairline-remove(left);
+  }
+  &:nth-child(n + 9) {
+    .hairline-remove(bottom);
+  }
+}
+.popover .calendar-month-picker-item,
+.calendar-modal .calendar-month-picker-item {
+  width: (100% / 3);
+  height: 25%;
+  &:nth-child(3n + 1) {
+    .hairline-remove(left);
+  }
+  &:nth-child(n + 10) {
+    .hairline-remove(bottom);
+  }
+}
+.calendar-month-picker-item-current,
+.calendar-year-picker-item-current {
+  color: var(--f7-calendar-picker-selected-text-color, var(--f7-theme-color));
+}
+.calendar-year-picker {
+  overflow: auto;
+  --webkit-overflow-scrolling: touch;
+}
+.calendar-year-picker-item {
+  height: 34px;
+  line-height: 34px;
+  width: 100%;
+}
+
+.calendar-time-selector {
+  flex-shrink: 0;
+  font-size: var(--f7-calendar-time-selector-font-size);
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  a {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+    height: var(--f7-calendar-time-selector-height);
+    background-color: var(--f7-calendar-time-selector-bg-color);
+    padding: 0 16px;
+    border-radius: 8px;
+  }
+  > span {
+    font-weight: 500;
+  }
+  .segmented {
+    margin-left: 8px;
+  }
+}
+.calendar-time-picker-popover,
+.calendar-year-picker-popover,
+.calendar-month-picker-popover {
+  height: 240px;
+  width: 240px;
+  .popover-inner {
+    height: 100%;
+    overflow: hidden;
+  }
+}
+.calendar-time-picker {
+  --f7-picker-popover-height: 100%;
+  --f7-picker-inline-height: 100%;
+  .toolbar {
+    flex-shrink: 0;
+    top: 0 !important;
+  }
+  .picker {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+.if-ios-theme({
+  @import './calendar-ios.less';
+});
+.if-md-theme({
+  @import './calendar-md.less';
+});

package/components/card/card-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/card/card-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/card/card-rtl.css

@@ -0,0 +1 @@
+:root{--f7-card-margin-horizontal:16px;--f7-card-margin-vertical:16px;--f7-card-content-padding-horizontal:16px;--f7-card-content-padding-vertical:16px;--f7-card-font-size:inherit;--f7-card-header-text-color:inherit;--f7-card-header-font-weight:400;--f7-card-header-padding-horizontal:16px;--f7-card-footer-font-weight:400;--f7-card-footer-font-size:inherit;--f7-card-footer-padding-horizontal:16px;--f7-card-expandable-font-size:16px;--f7-card-expandable-tablet-width:670px;--f7-card-expandable-tablet-height:670px}.ios{--f7-card-border-radius:8px;--f7-card-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-card-header-font-size:17px;--f7-card-header-padding-vertical:10px;--f7-card-header-min-height:44px;--f7-card-footer-text-color:rgba(0, 0, 0, 0.45);--f7-card-footer-padding-vertical:10px;--f7-card-footer-min-height:44px;--f7-card-expandable-margin-horizontal:20px;--f7-card-expandable-margin-vertical:30px;--f7-card-expandable-box-shadow:0px 20px 40px rgba(0, 0, 0, 0.3);--f7-card-expandable-border-radius:16px;--f7-card-expandable-tablet-border-radius:16px;--f7-card-expandable-header-font-size:27px;--f7-card-expandable-header-font-weight:bold;--f7-card-text-color:inherit;--f7-card-bg-color:#fff;--f7-card-expandable-bg-color:#fff;--f7-card-outline-border-color:rgba(0, 0, 0, 0.12);--f7-card-header-border-color:rgba(0, 0, 0, 0.1);--f7-card-footer-border-color:rgba(0, 0, 0, 0.1)}.ios .dark,.ios.dark{--f7-card-bg-color:#1c1c1d;--f7-card-expandable-bg-color:#1c1c1d;--f7-card-outline-border-color:rgba(255, 255, 255, 0.15);--f7-card-header-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-card-border-radius:16px;--f7-card-box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);--f7-card-header-font-size:22px;--f7-card-header-padding-vertical:16px;--f7-card-header-min-height:48px;--f7-card-footer-padding-vertical:16px;--f7-card-footer-min-height:48px;--f7-card-expandable-margin-horizontal:12px;--f7-card-expandable-margin-vertical:24px;--f7-card-expandable-box-shadow:0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12);--f7-card-expandable-border-radius:16px;--f7-card-expandable-tablet-border-radius:16px;--f7-card-expandable-header-font-size:22px;--f7-card-expandable-header-font-weight:500}.md,.md .dark,.md [class*=color-]{--f7-card-bg-color:var(--f7-md-surface-1);--f7-card-expandable-bg-color:var(--f7-md-surface-1);--f7-card-outline-border-color:var(--f7-md-outline);--f7-card-header-border-color:var(--f7-md-outline);--f7-card-footer-border-color:var(--f7-md-outline);--f7-card-text-color:var(--f7-md-on-surface);--f7-card-footer-text-color:var(--f7-md-on-surface-variant)}.card .list>ul:after,.card .list>ul:before,.cards-list>ul:after,.cards-list>ul:before{display:none!important}.card .list ul,.cards-list ul{background:0 0}.card{background:var(--f7-card-bg-color);position:relative;border-radius:var(--f7-card-border-radius);font-size:var(--f7-card-font-size);margin-top:var(--f7-card-margin-vertical);margin-bottom:var(--f7-card-margin-vertical);margin-left:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));color:var(--f7-card-text-color)}.card .block,.card .list{margin:0}.row:not(.no-gap) .col>.card{margin-left:0;margin-right:0}.card-raised{box-shadow:var(--f7-card-box-shadow)}.card-outline,.ios .card-outline-ios,.md .card-outline-md{border:1px solid var(--f7-card-outline-border-color)}.card-content{position:relative}.card-content-padding{position:relative;padding:var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal)}.card-content-padding>.block,.card-content-padding>.list{margin:calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal))}.card-content-padding>p:first-child{margin-top:0}.card-content-padding>p:last-child{margin-bottom:0}.card-header{min-height:var(--f7-card-header-min-height);color:var(--f7-card-header-text-color);font-size:var(--f7-card-header-font-size);font-weight:var(--f7-card-header-font-weight);padding:var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal)}.card-dividers .card-header,.card-header-divider .card-header,.card-header.card-header-divider{border-bottom:1px solid var(--f7-card-header-border-color)}.card-footer{min-height:var(--f7-card-footer-min-height);color:var(--f7-card-footer-text-color);font-size:var(--f7-card-footer-font-size);font-weight:var(--f7-card-footer-font-weight);padding:var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal)}.card-dividers .card-footer,.card-footer-divider .card-footer,.card-footer.card-footer-divider{border-top:1px solid var(--f7-card-header-border-color)}.card-footer a.link{overflow:hidden}.card-footer,.card-header{position:relative;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.card-footer[valign=top],.card-header[valign=top]{align-items:flex-start}.card-footer[valign=bottom],.card-header[valign=bottom]{align-items:flex-end}.card-footer a.link,.card-header a.link{position:relative}.card-footer a.link i.icon,.card-header a.link i.icon{display:block}.card-footer a.icon-only,.card-header a.icon-only{display:flex;justify-content:center;align-items:center;margin:0}.card-header{border-radius:var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0}.card-footer{border-radius:0 0 var(--f7-card-border-radius) var(--f7-card-border-radius)}.card-expandable{overflow:hidden;height:300px;background:var(--f7-card-expandable-bg-color);position:relative;transform-origin:center center;transition-property:transform,border-radius;border-radius:var(--f7-card-expandable-border-radius);z-index:2;transition-duration:.2s;margin-left:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));margin-top:var(--f7-card-expandable-margin-vertical);margin-bottom:var(--f7-card-expandable-margin-vertical);font-size:var(--f7-card-expandable-font-size)}.card-expandable.card-raised{box-shadow:var(--f7-card-expandable-box-shadow)}.card-expandable:not(.card-opened){-webkit-user-select:none;user-select:none}.card-expandable.card-no-transition{transition-duration:0s}.card-expandable.card-expandable-animate-width .card-content{transition-property:width,transform;width:100%}.card-expandable.active-state{transform:scale(.97) translate3d(0,0,0)}.card-expandable .card-opened-fade-in,.card-expandable .card-opened-fade-out{transition-duration:.4s}.card-expandable .card-opened-fade-in{opacity:0;pointer-events:none}.card-expandable .card-content{position:absolute;top:0;width:100vw;height:100vh;transform-origin:center top;overflow:hidden;transition-property:transform;box-sizing:border-box;pointer-events:none;right:0}.card-expandable .card-content .card-content-padding{padding-left:calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));padding-right:calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal))}.card-expandable.card-opened{transition-duration:0s}.card-expandable.card-closing,.card-expandable.card-opening,.card-expandable.card-transitioning{transition-duration:.4s}.card-expandable.card-opening .card-content{transition-duration:.3s}.card-expandable.card-closing .card-content{transition-duration:.5s}.card-expandable.card-closing,.card-expandable.card-opened,.card-expandable.card-opening{z-index:300}.card-expandable.card-opened,.card-expandable.card-opening{border-radius:0}.card-expandable.card-opened .card-opened-fade-in,.card-expandable.card-opening .card-opened-fade-in{opacity:1;pointer-events:auto}.card-expandable.card-opened .card-opened-fade-out,.card-expandable.card-opening .card-opened-fade-out{opacity:0;pointer-events:none}.card-expandable.card-opened .card-content{overflow:auto;-webkit-overflow-scrolling:touch;pointer-events:auto}.card-expandable .card-header{font-size:var(--f7-card-expandable-header-font-size);font-weight:var(--f7-card-expandable-header-font-weight)}.card-prevent-open{pointer-events:auto}.card-expandable-size{width:0;height:0;position:absolute;left:0;top:0;opacity:0;pointer-events:none;visibility:hidden}@media (min-width:768px) and (min-height:670px){.card-expandable:not(.card-tablet-fullscreen){max-width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen).card-opened,.card-expandable:not(.card-tablet-fullscreen).card-opening{border-radius:var(--f7-card-expandable-tablet-border-radius)}.card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content{width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen) .card-expandable-size{width:var(--f7-card-expandable-tablet-width);height:var(--f7-card-expandable-tablet-height)}}.page.page-with-card-opened .page-content{overflow:hidden}.card-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;z-index:299;pointer-events:none;background:rgba(0,0,0,.2);opacity:0}.card-backdrop-in{animation:card-backdrop-fade-in .4s forwards;pointer-events:auto}.card-backdrop-out{animation:card-backdrop-fade-out .4s forwards}@supports ((-webkit-backdrop-filter:blur(15px)) or (backdrop-filter:blur(15px))){.card-backdrop{background:0 0;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}}@keyframes card-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes card-backdrop-fade-out{from{opacity:1}to{opacity:0}}

package/components/card/card-vars.less

@@ -0,0 +1,80 @@
+:root {
+  --f7-card-margin-horizontal: 16px;
+  --f7-card-margin-vertical: 16px;
+  --f7-card-content-padding-horizontal: 16px;
+  --f7-card-content-padding-vertical: 16px;
+  --f7-card-font-size: inherit;
+  --f7-card-header-text-color: inherit;
+  --f7-card-header-font-weight: 400;
+  --f7-card-header-padding-horizontal: 16px;
+  --f7-card-footer-font-weight: 400;
+  --f7-card-footer-font-size: inherit;
+  --f7-card-footer-padding-horizontal: 16px;
+  --f7-card-expandable-font-size: 16px;
+  --f7-card-expandable-tablet-width: 670px;
+  --f7-card-expandable-tablet-height: 670px;
+}
+.ios-vars({
+  --f7-card-border-radius: 8px;
+  --f7-card-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
+  --f7-card-header-font-size: 17px;
+  --f7-card-header-padding-vertical: 10px;
+  --f7-card-header-min-height: 44px;
+  --f7-card-footer-text-color: rgba(0,0,0,0.45);
+  --f7-card-footer-padding-vertical: 10px;
+  --f7-card-footer-min-height: 44px;
+  --f7-card-expandable-margin-horizontal: 20px;
+  --f7-card-expandable-margin-vertical: 30px;
+  --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0,0,0,0.3);
+  --f7-card-expandable-border-radius: 16px;
+  --f7-card-expandable-tablet-border-radius: 16px;
+  --f7-card-expandable-header-font-size: 27px;
+  --f7-card-expandable-header-font-weight: bold;
+  --f7-card-text-color: inherit;
+  .light-vars({
+    --f7-card-bg-color: #fff;
+    --f7-card-expandable-bg-color: #fff;
+    --f7-card-outline-border-color: rgba(0,0,0,0.12);
+    --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
+    --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
+
+  });
+  .dark-vars({
+    --f7-card-bg-color: #1c1c1d;
+    --f7-card-expandable-bg-color: #1c1c1d;
+    --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
+    --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
+    --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
+    --f7-card-footer-text-color: rgba(255,255,255,0.55);
+  });
+});
+.md-vars({
+  --f7-card-border-radius: 16px;
+  --f7-card-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+                        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+                        0px 1px 3px 0px rgba(0, 0, 0, 0.12);;
+  --f7-card-header-font-size: 22px;
+  --f7-card-header-padding-vertical: 16px;
+  --f7-card-header-min-height: 48px;
+  --f7-card-footer-padding-vertical: 16px;
+  --f7-card-footer-min-height: 48px;
+  --f7-card-expandable-margin-horizontal: 12px;
+  --f7-card-expandable-margin-vertical: 24px;
+  --f7-card-expandable-box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
+                                   0px 10px 14px 1px rgba(0, 0, 0, 0.14),
+                                   0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+  --f7-card-expandable-border-radius: 16px;
+  --f7-card-expandable-tablet-border-radius: 16px;
+  --f7-card-expandable-header-font-size: 22px;
+  --f7-card-expandable-header-font-weight: 500;
+});
+
+.md-color-vars({
+  --f7-card-bg-color: var(--f7-md-surface-1);
+  --f7-card-expandable-bg-color: var(--f7-md-surface-1);
+  --f7-card-outline-border-color: var(--f7-md-outline);
+  --f7-card-header-border-color: var(--f7-md-outline);
+  --f7-card-footer-border-color: var(--f7-md-outline);
+  --f7-card-text-color: var(--f7-md-on-surface);
+  --f7-card-footer-text-color: var(--f7-md-on-surface-variant);
+});

package/components/card/card.css

@@ -0,0 +1 @@
+:root{--f7-card-margin-horizontal:16px;--f7-card-margin-vertical:16px;--f7-card-content-padding-horizontal:16px;--f7-card-content-padding-vertical:16px;--f7-card-font-size:inherit;--f7-card-header-text-color:inherit;--f7-card-header-font-weight:400;--f7-card-header-padding-horizontal:16px;--f7-card-footer-font-weight:400;--f7-card-footer-font-size:inherit;--f7-card-footer-padding-horizontal:16px;--f7-card-expandable-font-size:16px;--f7-card-expandable-tablet-width:670px;--f7-card-expandable-tablet-height:670px}.ios{--f7-card-border-radius:8px;--f7-card-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-card-header-font-size:17px;--f7-card-header-padding-vertical:10px;--f7-card-header-min-height:44px;--f7-card-footer-text-color:rgba(0, 0, 0, 0.45);--f7-card-footer-padding-vertical:10px;--f7-card-footer-min-height:44px;--f7-card-expandable-margin-horizontal:20px;--f7-card-expandable-margin-vertical:30px;--f7-card-expandable-box-shadow:0px 20px 40px rgba(0, 0, 0, 0.3);--f7-card-expandable-border-radius:16px;--f7-card-expandable-tablet-border-radius:16px;--f7-card-expandable-header-font-size:27px;--f7-card-expandable-header-font-weight:bold;--f7-card-text-color:inherit;--f7-card-bg-color:#fff;--f7-card-expandable-bg-color:#fff;--f7-card-outline-border-color:rgba(0, 0, 0, 0.12);--f7-card-header-border-color:rgba(0, 0, 0, 0.1);--f7-card-footer-border-color:rgba(0, 0, 0, 0.1)}.ios .dark,.ios.dark{--f7-card-bg-color:#1c1c1d;--f7-card-expandable-bg-color:#1c1c1d;--f7-card-outline-border-color:rgba(255, 255, 255, 0.15);--f7-card-header-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-card-border-radius:16px;--f7-card-box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);--f7-card-header-font-size:22px;--f7-card-header-padding-vertical:16px;--f7-card-header-min-height:48px;--f7-card-footer-padding-vertical:16px;--f7-card-footer-min-height:48px;--f7-card-expandable-margin-horizontal:12px;--f7-card-expandable-margin-vertical:24px;--f7-card-expandable-box-shadow:0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12);--f7-card-expandable-border-radius:16px;--f7-card-expandable-tablet-border-radius:16px;--f7-card-expandable-header-font-size:22px;--f7-card-expandable-header-font-weight:500}.md,.md .dark,.md [class*=color-]{--f7-card-bg-color:var(--f7-md-surface-1);--f7-card-expandable-bg-color:var(--f7-md-surface-1);--f7-card-outline-border-color:var(--f7-md-outline);--f7-card-header-border-color:var(--f7-md-outline);--f7-card-footer-border-color:var(--f7-md-outline);--f7-card-text-color:var(--f7-md-on-surface);--f7-card-footer-text-color:var(--f7-md-on-surface-variant)}.card .list>ul:after,.card .list>ul:before,.cards-list>ul:after,.cards-list>ul:before{display:none!important}.card .list ul,.cards-list ul{background:0 0}.card{background:var(--f7-card-bg-color);position:relative;border-radius:var(--f7-card-border-radius);font-size:var(--f7-card-font-size);margin-top:var(--f7-card-margin-vertical);margin-bottom:var(--f7-card-margin-vertical);margin-left:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));color:var(--f7-card-text-color)}.card .block,.card .list{margin:0}.row:not(.no-gap) .col>.card{margin-left:0;margin-right:0}.card-raised{box-shadow:var(--f7-card-box-shadow)}.card-outline,.ios .card-outline-ios,.md .card-outline-md{border:1px solid var(--f7-card-outline-border-color)}.card-content{position:relative}.card-content-padding{position:relative;padding:var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal)}.card-content-padding>.block,.card-content-padding>.list{margin:calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal))}.card-content-padding>p:first-child{margin-top:0}.card-content-padding>p:last-child{margin-bottom:0}.card-header{min-height:var(--f7-card-header-min-height);color:var(--f7-card-header-text-color);font-size:var(--f7-card-header-font-size);font-weight:var(--f7-card-header-font-weight);padding:var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal)}.card-dividers .card-header,.card-header-divider .card-header,.card-header.card-header-divider{border-bottom:1px solid var(--f7-card-header-border-color)}.card-footer{min-height:var(--f7-card-footer-min-height);color:var(--f7-card-footer-text-color);font-size:var(--f7-card-footer-font-size);font-weight:var(--f7-card-footer-font-weight);padding:var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal)}.card-dividers .card-footer,.card-footer-divider .card-footer,.card-footer.card-footer-divider{border-top:1px solid var(--f7-card-header-border-color)}.card-footer a.link{overflow:hidden}.card-footer,.card-header{position:relative;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.card-footer[valign=top],.card-header[valign=top]{align-items:flex-start}.card-footer[valign=bottom],.card-header[valign=bottom]{align-items:flex-end}.card-footer a.link,.card-header a.link{position:relative}.card-footer a.link i.icon,.card-header a.link i.icon{display:block}.card-footer a.icon-only,.card-header a.icon-only{display:flex;justify-content:center;align-items:center;margin:0}.card-header{border-radius:var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0}.card-footer{border-radius:0 0 var(--f7-card-border-radius) var(--f7-card-border-radius)}.card-expandable{overflow:hidden;height:300px;background:var(--f7-card-expandable-bg-color);position:relative;transform-origin:center center;transition-property:transform,border-radius;border-radius:var(--f7-card-expandable-border-radius);z-index:2;transition-duration:.2s;margin-left:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));margin-top:var(--f7-card-expandable-margin-vertical);margin-bottom:var(--f7-card-expandable-margin-vertical);font-size:var(--f7-card-expandable-font-size)}.card-expandable.card-raised{box-shadow:var(--f7-card-expandable-box-shadow)}.card-expandable:not(.card-opened){-webkit-user-select:none;user-select:none}.card-expandable.card-no-transition{transition-duration:0s}.card-expandable.card-expandable-animate-width .card-content{transition-property:width,transform;width:100%}.card-expandable.active-state{transform:scale(.97) translate3d(0,0,0)}.card-expandable .card-opened-fade-in,.card-expandable .card-opened-fade-out{transition-duration:.4s}.card-expandable .card-opened-fade-in{opacity:0;pointer-events:none}.card-expandable .card-content{position:absolute;top:0;width:100vw;height:100vh;transform-origin:center top;overflow:hidden;transition-property:transform;box-sizing:border-box;pointer-events:none;left:0}.card-expandable .card-content .card-content-padding{padding-left:calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));padding-right:calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal))}.card-expandable.card-opened{transition-duration:0s}.card-expandable.card-closing,.card-expandable.card-opening,.card-expandable.card-transitioning{transition-duration:.4s}.card-expandable.card-opening .card-content{transition-duration:.3s}.card-expandable.card-closing .card-content{transition-duration:.5s}.card-expandable.card-closing,.card-expandable.card-opened,.card-expandable.card-opening{z-index:300}.card-expandable.card-opened,.card-expandable.card-opening{border-radius:0}.card-expandable.card-opened .card-opened-fade-in,.card-expandable.card-opening .card-opened-fade-in{opacity:1;pointer-events:auto}.card-expandable.card-opened .card-opened-fade-out,.card-expandable.card-opening .card-opened-fade-out{opacity:0;pointer-events:none}.card-expandable.card-opened .card-content{overflow:auto;-webkit-overflow-scrolling:touch;pointer-events:auto}.card-expandable .card-header{font-size:var(--f7-card-expandable-header-font-size);font-weight:var(--f7-card-expandable-header-font-weight)}.card-prevent-open{pointer-events:auto}.card-expandable-size{width:0;height:0;position:absolute;left:0;top:0;opacity:0;pointer-events:none;visibility:hidden}@media (min-width:768px) and (min-height:670px){.card-expandable:not(.card-tablet-fullscreen){max-width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen).card-opened,.card-expandable:not(.card-tablet-fullscreen).card-opening{border-radius:var(--f7-card-expandable-tablet-border-radius)}.card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content{width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen) .card-expandable-size{width:var(--f7-card-expandable-tablet-width);height:var(--f7-card-expandable-tablet-height)}}.page.page-with-card-opened .page-content{overflow:hidden}.card-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;z-index:299;pointer-events:none;background:rgba(0,0,0,.2);opacity:0}.card-backdrop-in{animation:card-backdrop-fade-in .4s forwards;pointer-events:auto}.card-backdrop-out{animation:card-backdrop-fade-out .4s forwards}@supports ((-webkit-backdrop-filter:blur(15px)) or (backdrop-filter:blur(15px))){.card-backdrop{background:0 0;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}}@keyframes card-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes card-backdrop-fade-out{from{opacity:1}to{opacity:0}}

package/components/card/card.d.ts

@@ -0,0 +1,69 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Card {
+  interface AppMethods {
+    card: {
+      /** Open expandable card */
+      open(cardEl: HTMLElement | CSSSelector, animate?: boolean): void;
+      /** Close expandable card */
+      close(cardEl: HTMLElement | CSSSelector, animate?: boolean): void;
+      /** Toggle expandable card */
+      toggle(cardEl: HTMLElement | CSSSelector, animate?: boolean): void;
+    };
+  }
+  interface AppParams {
+    card?:
+      | {
+          /** Will hide Navbar on expandable card open. (default true) */
+          hideNavbarOnOpen?: boolean;
+          /** Will hide Toolbar on expandable card open. (default true) */
+          hideToolbarOnOpen?: boolean;
+          /** Will hide "Statusbar" on expandable card open. (default true) */
+          hideStatusbarOnOpen?: boolean;
+          /** Custom scrollable container CSS selector, (default '.card-content') */
+          scrollableEl?: string;
+          /** Allows to close expandable card with swipe (default true) */
+          swipeToClose?: boolean;
+          /** Enables expandable card backdrop layer (default true) */
+          backdrop?: boolean;
+          /** When enabled, expandable card will be closed on backdrop click. (default true) */
+          closeByBackdropClick?: boolean;
+        }
+      | undefined;
+  }
+  interface DomEvents {
+    /** Event will be triggered right before expandable card starts its opening animation. event.detail.prevent contains function that will prevent card from opening when called */
+    'card:beforeopen': () => void;
+    /** Event will be triggered when expandable card starts its opening animation */
+    'card:open': () => void;
+    /** Event will be triggered after expandable card completes its opening animation */
+    'card:opened': () => void;
+    /** Event will be triggered when expandable card starts its closing animation */
+    'card:close': () => void;
+    /** Event will be triggered after expandable card completes its closing animation */
+    'card:closed': () => void;
+  }
+  interface AppEvents {
+    /** Event will be triggered before expandable card content starts its opening animation */
+    cardBeforeOpen: (el: HTMLElement | CSSSelector, prevent: () => void) => void;
+
+    /** Event will be triggered when expandable card content starts its opening animation */
+    cardOpen: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered after expandable card content completes its opening animation */
+    cardOpened: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered when expandable card content starts its closing animation */
+    cardClose: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered after expandable card content completes its closing animation */
+    cardClosed: (el: HTMLElement | CSSSelector) => void;
+  }
+}
+
+declare const CardComponent: Framework7Plugin;
+export default CardComponent;