feat(core): move no-hairline classes to common typography, replace …

…noHairline components prop with `outline`
framework7io · Oct 31, 2022 · ca7e2c9 · ca7e2c9
1 parent 311044a
commit ca7e2c9
Show file tree

Hide file tree

Showing 40 changed files with 78 additions and 143 deletions.
diff --git a/kitchen-sink/react/src/pages/calendar-page.jsx b/kitchen-sink/react/src/pages/calendar-page.jsx
@@ -120,10 +120,10 @@ export default () => {
 
   return (
     <Page onPageInit={onPageInit} onPageBeforeRemove={onPageBeforeRemove}>
-      <Navbar backLink="Back" noShadow>
+      <Navbar backLink="Back">
         <NavTitle className="navbar-calendar-title"></NavTitle>
       </Navbar>
-      <Block id="calendar" strong className="no-padding no-margin no-hairline-top" />
+      <Block id="calendar" strong className="no-padding no-margin" />
       <List id="calendar-events" noHairlines className="no-margin no-safe-area-left">
         {eventItems.map((item, index) => (
           <ListItem key={index} title={item.title} after={item.time}>

diff --git a/kitchen-sink/react/src/pages/calendar.jsx b/kitchen-sink/react/src/pages/calendar.jsx
@@ -27,7 +27,7 @@ export default () => {
       value: [new Date()],
       renderToolbar() {
         return `
-          <div class="toolbar calendar-custom-toolbar no-shadow">
+          <div class="toolbar calendar-custom-toolbar">
             <div class="toolbar-inner">
               <div class="left">
                 <a href="#" class="link icon-only"><i class="icon icon-back"></i></a>

diff --git a/kitchen-sink/react/src/pages/cards.jsx b/kitchen-sink/react/src/pages/cards.jsx
@@ -79,7 +79,6 @@ export default () => (
     <BlockTitle>Styled Cards</BlockTitle>
     <Card outlineMd className="demo-card-header-pic">
       <CardHeader
-        className="no-border"
         valign="bottom"
         style={{
           backgroundImage: 'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
@@ -101,7 +100,6 @@ export default () => (
     </Card>
     <Card className="demo-card-header-pic">
       <CardHeader
-        className="no-border"
         valign="bottom"
         style={{
           backgroundImage: 'url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)',

diff --git a/kitchen-sink/react/src/pages/sheet-modal.jsx b/kitchen-sink/react/src/pages/sheet-modal.jsx
@@ -300,7 +300,7 @@ export default () => {
         <BlockTitle medium className="margin-top">
           Your order:
         </BlockTitle>
-        <List noHairlines>
+        <List>
           <ListItem title="Item 1">
             <b slot="after" className="text-color-black">
               $200

diff --git a/kitchen-sink/react/src/pages/timeline-horizontal-calendar.jsx b/kitchen-sink/react/src/pages/timeline-horizontal-calendar.jsx
@@ -3,7 +3,7 @@ import { Navbar, Page } from 'framework7-react';
 
 export default () => (
   <Page>
-    <Navbar noShadow title="Horizontal Timeline Calendar" backLink="Back"></Navbar>
+    <Navbar title="Horizontal Timeline Calendar" backLink="Back"></Navbar>
     <div className="timeline timeline-horizontal col-33 tablet-15">
       <div className="timeline-year">
         <div className="timeline-year-title">

diff --git a/kitchen-sink/react/src/pages/timeline-horizontal.jsx b/kitchen-sink/react/src/pages/timeline-horizontal.jsx
@@ -3,7 +3,7 @@ import { Navbar, Page } from 'framework7-react';
 
 export default () => (
   <Page>
-    <Navbar noShadow title="Horizontal Timeline" backLink="Back"></Navbar>
+    <Navbar title="Horizontal Timeline" backLink="Back"></Navbar>
     <div className="timeline timeline-horizontal col-33 tablet-20">
       <div className="timeline-item">
         <div className="timeline-item-date">

diff --git a/kitchen-sink/svelte/src/pages/calendar-page.svelte b/kitchen-sink/svelte/src/pages/calendar-page.svelte
@@ -121,10 +121,10 @@
 </script>
 
 <Page {onPageInit} {onPageBeforeRemove}>
-  <Navbar backLink="Back" noShadow>
+  <Navbar backLink="Back">
     <NavTitle class="navbar-calendar-title" />
   </Navbar>
-  <Block id="calendar" strong class="no-padding no-margin no-hairline-top" />
+  <Block id="calendar" strong class="no-padding no-margin" />
   <List id="calendar-events" noHairlines class="no-margin no-safe-area-left">
     {#each eventItems as item, index (index)}
       <ListItem title={item.title} after={item.time}>

diff --git a/kitchen-sink/svelte/src/pages/calendar.svelte b/kitchen-sink/svelte/src/pages/calendar.svelte
@@ -36,7 +36,7 @@
       value: [new Date()],
       renderToolbar() {
         return `
-          <div class="toolbar calendar-custom-toolbar no-shadow">
+          <div class="toolbar calendar-custom-toolbar">
             <div class="toolbar-inner">
               <div class="left">
                 <a href="#" class="link icon-only"><i class="icon icon-back"></i></a>

diff --git a/kitchen-sink/svelte/src/pages/cards.svelte b/kitchen-sink/svelte/src/pages/cards.svelte
@@ -84,7 +84,6 @@
   <BlockTitle>Styled Cards</BlockTitle>
   <Card outlineMd class="demo-card-header-pic">
     <CardHeader
-      class="no-border"
       valign="bottom"
       style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
       >Journey To Mountains</CardHeader
@@ -103,7 +102,6 @@
   </Card>
   <Card class="demo-card-header-pic">
     <CardHeader
-      class="no-border"
       valign="bottom"
       style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
       >Journey To Mountains</CardHeader

diff --git a/kitchen-sink/svelte/src/pages/sheet-modal.svelte b/kitchen-sink/svelte/src/pages/sheet-modal.svelte
@@ -258,7 +258,7 @@
       </div>
     </div>
     <BlockTitle medium class="margin-top">Your order:</BlockTitle>
-    <List noHairlines>
+    <List>
       <ListItem title="Item 1"><b slot="after" class="text-color-black">$200</b></ListItem>
       <ListItem title="Item 2"><b slot="after" class="text-color-black">$180</b></ListItem>
       <ListItem title="Delivery"><b slot="after" class="text-color-black">$120</b></ListItem>

diff --git a/kitchen-sink/svelte/src/pages/timeline-horizontal-calendar.svelte b/kitchen-sink/svelte/src/pages/timeline-horizontal-calendar.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <Page>
-  <Navbar noShadow title="Horizontal Timeline Calendar" backLink="Back" />
+  <Navbar title="Horizontal Timeline Calendar" backLink="Back" />
   <div class="timeline timeline-horizontal col-33 tablet-15">
     <div class="timeline-year">
       <div class="timeline-year-title"><span>2016</span></div>

diff --git a/kitchen-sink/svelte/src/pages/timeline-horizontal.svelte b/kitchen-sink/svelte/src/pages/timeline-horizontal.svelte
@@ -4,7 +4,7 @@
 
 <!-- svelte-ignore a11y-invalid-attribute -->
 <Page>
-  <Navbar noShadow title="Horizontal Timeline" backLink="Back" />
+  <Navbar title="Horizontal Timeline" backLink="Back" />
   <div class="timeline timeline-horizontal col-33 tablet-20">
     <div class="timeline-item">
       <div class="timeline-item-date">21 <small>DEC</small></div>

diff --git a/kitchen-sink/vue/src/pages/calendar-page.vue b/kitchen-sink/vue/src/pages/calendar-page.vue
@@ -1,10 +1,10 @@
 <template>
   <f7-page @page:beforeremove="onPageBeforeRemove" @page:init="onPageInit">
-    <f7-navbar back-link="Back" no-shadow>
+    <f7-navbar back-link="Back">
       <f7-nav-title class="navbar-calendar-title"></f7-nav-title>
     </f7-navbar>
-    <div id="calendar" class="block block-strong no-padding no-margin no-hairline-top"></div>
-    <f7-list id="calendar-events" class="no-margin no-hairlines no-safe-area-left">
+    <div id="calendar" class="block block-strong no-padding no-margin"></div>
+    <f7-list id="calendar-events" class="no-margin no-safe-area-left">
       <f7-list-item
         v-for="(item, index) in eventItems"
         :key="index"

diff --git a/kitchen-sink/vue/src/pages/calendar.vue b/kitchen-sink/vue/src/pages/calendar.vue
@@ -134,7 +134,7 @@ export default {
         value: [new Date()],
         renderToolbar() {
           return `
-              <div class="toolbar calendar-custom-toolbar no-shadow">
+              <div class="toolbar calendar-custom-toolbar">
                 <div class="toolbar-inner">
                   <div class="left">
                     <a href="#" class="link icon-only"><i class="icon icon-back"></i></a>

diff --git a/kitchen-sink/vue/src/pages/cards.vue b/kitchen-sink/vue/src/pages/cards.vue
@@ -68,7 +68,6 @@
     <f7-block-title>Styled Cards</f7-block-title>
     <f7-card outline-md class="demo-card-header-pic">
       <f7-card-header
-        class="no-border"
         valign="bottom"
         style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
         >Journey To Mountains</f7-card-header
@@ -87,7 +86,6 @@
     </f7-card>
     <f7-card class="demo-card-header-pic">
       <f7-card-header
-        class="no-border"
         valign="bottom"
         style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
         >Journey To Mountains</f7-card-header

diff --git a/kitchen-sink/vue/src/pages/sheet-modal.vue b/kitchen-sink/vue/src/pages/sheet-modal.vue
@@ -201,7 +201,7 @@
         </div>
       </div>
       <f7-block-title medium class="margin-top">Your order:</f7-block-title>
-      <f7-list no-hairlines>
+      <f7-list>
         <f7-list-item title="Item 1">
           <template #after>
             <b class="text-color-black">$200</b>

diff --git a/kitchen-sink/vue/src/pages/timeline-horizontal-calendar.vue b/kitchen-sink/vue/src/pages/timeline-horizontal-calendar.vue
@@ -1,6 +1,6 @@
 <template>
   <f7-page>
-    <f7-navbar no-shadow title="Horizontal Timeline Calendar" back-link="Back"></f7-navbar>
+    <f7-navbar title="Horizontal Timeline Calendar" back-link="Back"></f7-navbar>
     <div class="timeline timeline-horizontal col-33 tablet-15">
       <div class="timeline-year">
         <div class="timeline-year-title"><span>2016</span></div>

diff --git a/kitchen-sink/vue/src/pages/timeline-horizontal.vue b/kitchen-sink/vue/src/pages/timeline-horizontal.vue
@@ -1,6 +1,6 @@
 <template>
   <f7-page>
-    <f7-navbar no-shadow title="Horizontal Timeline" back-link="Back"></f7-navbar>
+    <f7-navbar title="Horizontal Timeline" back-link="Back"></f7-navbar>
     <div class="timeline timeline-horizontal col-33 tablet-20">
       <div class="timeline-item">
         <div class="timeline-item-date">21 <small>DEC</small></div>

diff --git a/src/core/components/calendar/calendar-class.js b/src/core/components/calendar/calendar-class.js
@@ -1439,7 +1439,7 @@ class Calendar extends Framework7Class {
     }
     // prettier-ignore
     return (
-    <div class="toolbar toolbar-top no-shadow">
+    <div class="toolbar toolbar-top">
       <div class="toolbar-inner">
         {calendar.params.monthSelector ? calendar.renderMonthSelector() : ''}
         {calendar.params.yearSelector ? calendar.renderYearSelector() : ''}

diff --git a/src/core/components/color-picker/color-picker-class.js b/src/core/components/color-picker/color-picker-class.js
@@ -453,7 +453,7 @@ class ColorPicker extends Framework7Class {
       return self.params.renderToolbar.call(self, self);
     }
     return (
-      <div class="toolbar toolbar-top no-shadow">
+      <div class="toolbar toolbar-top">
         <div class="toolbar-inner">
           <div class="left"></div>
           <div class="right">

diff --git a/src/core/components/list/list.less b/src/core/components/list/list.less
@@ -263,8 +263,6 @@
       }
     }
   }
-  .no-hairlines();
-  .no-hairlines-between();
 }
 .list-button {
   --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));

diff --git a/src/core/components/messagebar/messagebar.less b/src/core/components/messagebar/messagebar.less
@@ -11,13 +11,11 @@
   bottom: 0;
   .hairline(top, var(--f7-messagebar-border-color));
   .ios-translucent-bars(var(--f7-messagebar-bg-color-rgb));
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:before {
       display: none !important;
     }
   }
-  &.no-shadow,
   &.toolbar-hidden {
     &:after {
       display: none !important;

diff --git a/src/core/components/navbar/navbar.less b/src/core/components/navbar/navbar.less
@@ -87,10 +87,8 @@
     height: 100%;
   }
 
-  &.no-hairline,
-  &.no-border,
-  .no-hairline,
-  .no-border {
+  &.no-outline,
+  .no-outline {
     .navbar-bg:after {
       display: none !important;
     }

diff --git a/src/core/components/picker/picker-class.js b/src/core/components/picker/picker-class.js
@@ -264,7 +264,7 @@ class Picker extends Framework7Class {
     const picker = this;
     if (picker.params.renderToolbar) return picker.params.renderToolbar.call(picker, picker);
     return (
-      <div class="toolbar toolbar-top no-shadow">
+      <div class="toolbar toolbar-top">
         <div class="toolbar-inner">
           <div class="left"></div>
           <div class="right">

diff --git a/src/core/components/searchbar/searchbar.less b/src/core/components/searchbar/searchbar.less
@@ -20,8 +20,7 @@
     backdrop-filter: none;
     .hairline-remove(bottom);
   }
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:after {
       display: none !important;
     }

diff --git a/src/core/components/subnavbar/subnavbar.less b/src/core/components/subnavbar/subnavbar.less
@@ -52,8 +52,7 @@
   a.icon-only {
     min-width: var(--f7-subnavbar-height);
   }
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:after {
       display: none !important;
     }

diff --git a/src/core/components/timeline/timeline.less b/src/core/components/timeline/timeline.less
@@ -250,9 +250,7 @@ each(@breakpoints, {
       text-align: right;
     });
   }
-  &.no-shadow .timeline-item-date:before {
-    display: none;
-  }
+
   .timeline-item-content {
     padding: var(--f7-timeline-horizontal-item-padding);
     height: calc(100% - var(--f7-timeline-horizontal-item-padding));

diff --git a/src/core/components/toolbar/toolbar.less b/src/core/components/toolbar/toolbar.less
@@ -54,8 +54,7 @@
   .tab-link-highlight {
     bottom: 0;
   }
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:after {
       display: none !important;
     }
@@ -84,8 +83,7 @@
     top: 0;
     bottom: var(--f7-safe-area-bottom);
   }
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:before {
       display: none !important;
     }

diff --git a/src/core/components/typography/typography.less b/src/core/components/typography/typography.less
@@ -211,6 +211,31 @@
 [class*='border-color-'] {
   border-color: var(--f7-theme-color-border-color) !important;
 }
+// Hairlines
+.no-hairlines,
+.no-hairlines ul,
+.md .no-hairlines-md,
+.md .no-hairlines-md ul,
+.ios .no-hairlines-ios,
+.ios .no-hairlines-ios ul {
+  .hairline-remove-top-bottom();
+}
+.no-hairline-top,
+.no-hairline-top ul,
+.md .no-hairline-top-md,
+.md .no-hairline-top-md ul,
+.ios .no-hairline-top-ios,
+.ios .no-hairline-top-ios ul {
+  .hairline-remove(top);
+}
+.no-hairline-bottom,
+.no-hairline-bottom ul,
+.md .no-hairline-bottom-md,
+.md .no-hairline-bottom-md ul,
+.ios .no-hairline-bottom-ios,
+.ios .no-hairline-bottom-ios ul {
+  .hairline-remove(bottom);
+}
 
 .if-ios-theme({
   @import './typography-ios.less';

diff --git a/src/core/less/mixins.less b/src/core/less/mixins.less
@@ -97,50 +97,7 @@
     opacity: 1;
   }
 }
-// No Hairlines
-.no-hairlines() {
-  &.no-hairlines,
-  &.no-hairlines ul,
-  .md &.no-hairlines-md,
-  .md &.no-hairlines-md ul,
-  .ios &.no-hairlines-ios,
-  .ios &.no-hairlines-ios ul {
-    .hairline-remove-top-bottom();
-  }
-  &.no-hairline-top,
-  &.no-hairline-top ul,
-  .md &.no-hairline-top-md,
-  .md &.no-hairline-top-md ul,
-  .ios &.no-hairline-top-ios,
-  .ios &.no-hairline-top-ios ul {
-    .hairline-remove(top);
-  }
-  &.no-hairline-bottom,
-  &.no-hairline-bottom ul,
-  .md &.no-hairline-bottom-md,
-  .md &.no-hairline-bottom-md ul,
-  .ios &.no-hairline-bottom-ios,
-  .ios &.no-hairline-bottom-ios ul {
-    .hairline-remove(bottom);
-  }
-}
-.no-hairlines-between() {
-  &.no-hairlines-between,
-  .md &.no-hairlines-between-md,
-  .ios &.no-hairlines-between-ios {
-    .item-inner,
-    .list-button,
-    .list-group-title {
-      .hairline-remove(bottom);
-    }
-    &.simple-list li {
-      .hairline-remove(bottom);
-    }
-    &.links-list a {
-      .hairline-remove(bottom);
-    }
-  }
-}
+
 // Hairlines
 .hairline-pseudo(@color, @top, @right, @bottom, @left) {
   content: '';