Skip to content

Commit 6e83c0b

Browse files
nolimits4webnolimits4web
committed
chore: fix fab-morph sheets styles
1 parent f2b7432 commit 6e83c0b

File tree

4 files changed

+48
-52
lines changed

4 files changed

+48
-52
lines changed

‎kitchen-sink/core/css/app.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -103,20 +103,14 @@
103103
.demo-fab-sheet {
104104
position: absolute;
105105
left: 16px;
106-
bottom: 80px;
106+
bottom: 16px;
107107
width: 140px;
108-
background: #fff;
109108
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
110-
border-radius: 5px;
109+
border-radius: 8px;
111110
z-index: 1600;
112111
margin: 0 !important;
113112
}
114-
.ios .demo-fab-sheet {
115-
bottom: 15px;
116-
}
117-
.md .demo-fab-sheet {
118-
bottom: 16px;
119-
}
113+
120114
.demo-fab-fullscreen-sheet {
121115
position: absolute;
122116
left: 10px;
@@ -125,10 +119,18 @@
125119
bottom: 0;
126120
background: #fff;
127121
z-index: 1600;
128-
border-radius: 5px 5px 0 0;
122+
border-radius: 8px 8px 0 0;
129123
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
130124
overflow: hidden;
131125
}
126+
.ios .demo-fab-sheet,
127+
.ios .demo-fab-fullscreen-sheet {
128+
background: var(--f7-page-bg-color);
129+
}
130+
.md .demo-fab-sheet,
131+
.md .demo-fab-fullscreen-sheet {
132+
background: var(--f7-popover-bg-color);
133+
}
132134
@media (min-width: 768px) {
133135
.demo-fab-fullscreen-sheet {
134136
left: 20%;
@@ -138,9 +140,6 @@
138140
top: auto;
139141
}
140142
}
141-
.demo-fab-fullscreen-sheet .page {
142-
background: #fff;
143-
}
144143

145144
/* Demo Messagebar */
146145
.ios

‎kitchen-sink/react/src/css/app.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -100,20 +100,14 @@
100100
.demo-fab-sheet {
101101
position: absolute;
102102
left: 16px;
103-
bottom: 80px;
103+
bottom: 16px;
104104
width: 140px;
105-
background: #fff;
106105
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
107-
border-radius: 5px;
106+
border-radius: 8px;
108107
z-index: 1600;
109108
margin: 0 !important;
110109
}
111-
.ios .demo-fab-sheet {
112-
bottom: 15px;
113-
}
114-
.md .demo-fab-sheet {
115-
bottom: 16px;
116-
}
110+
117111
.demo-fab-fullscreen-sheet {
118112
position: absolute;
119113
left: 10px;
@@ -122,10 +116,18 @@
122116
bottom: 0;
123117
background: #fff;
124118
z-index: 1600;
125-
border-radius: 5px 5px 0 0;
119+
border-radius: 8px 8px 0 0;
126120
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
127121
overflow: hidden;
128122
}
123+
.ios .demo-fab-sheet,
124+
.ios .demo-fab-fullscreen-sheet {
125+
background: var(--f7-page-bg-color);
126+
}
127+
.md .demo-fab-sheet,
128+
.md .demo-fab-fullscreen-sheet {
129+
background: var(--f7-popover-bg-color);
130+
}
129131
@media (min-width: 768px) {
130132
.demo-fab-fullscreen-sheet {
131133
left: 20%;
@@ -135,9 +137,6 @@
135137
top: auto;
136138
}
137139
}
138-
.demo-fab-fullscreen-sheet .page {
139-
background: #fff;
140-
}
141140

142141
/* Demo Messagebar */
143142
.ios

‎kitchen-sink/svelte/src/css/app.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -100,20 +100,14 @@
100100
.demo-fab-sheet {
101101
position: absolute;
102102
left: 16px;
103-
bottom: 80px;
103+
bottom: 16px;
104104
width: 140px;
105-
background: #fff;
106105
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
107-
border-radius: 5px;
106+
border-radius: 8px;
108107
z-index: 1600;
109108
margin: 0 !important;
110109
}
111-
.ios .demo-fab-sheet {
112-
bottom: 15px;
113-
}
114-
.md .demo-fab-sheet {
115-
bottom: 16px;
116-
}
110+
117111
.demo-fab-fullscreen-sheet {
118112
position: absolute;
119113
left: 10px;
@@ -122,10 +116,18 @@
122116
bottom: 0;
123117
background: #fff;
124118
z-index: 1600;
125-
border-radius: 5px 5px 0 0;
119+
border-radius: 8px 8px 0 0;
126120
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
127121
overflow: hidden;
128122
}
123+
.ios .demo-fab-sheet,
124+
.ios .demo-fab-fullscreen-sheet {
125+
background: var(--f7-page-bg-color);
126+
}
127+
.md .demo-fab-sheet,
128+
.md .demo-fab-fullscreen-sheet {
129+
background: var(--f7-popover-bg-color);
130+
}
129131
@media (min-width: 768px) {
130132
.demo-fab-fullscreen-sheet {
131133
left: 20%;
@@ -135,9 +137,6 @@
135137
top: auto;
136138
}
137139
}
138-
.demo-fab-fullscreen-sheet .page {
139-
background: #fff;
140-
}
141140

142141
/* Demo Messagebar */
143142
.ios

‎kitchen-sink/vue/src/css/app.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -100,20 +100,14 @@
100100
.demo-fab-sheet {
101101
position: absolute;
102102
left: 16px;
103-
bottom: 80px;
103+
bottom: 16px;
104104
width: 140px;
105-
background: #fff;
106105
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
107-
border-radius: 5px;
106+
border-radius: 8px;
108107
z-index: 1600;
109108
margin: 0 !important;
110109
}
111-
.ios .demo-fab-sheet {
112-
bottom: 15px;
113-
}
114-
.md .demo-fab-sheet {
115-
bottom: 16px;
116-
}
110+
117111
.demo-fab-fullscreen-sheet {
118112
position: absolute;
119113
left: 10px;
@@ -122,10 +116,18 @@
122116
bottom: 0;
123117
background: #fff;
124118
z-index: 1600;
125-
border-radius: 5px 5px 0 0;
119+
border-radius: 8px 8px 0 0;
126120
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.4);
127121
overflow: hidden;
128122
}
123+
.ios .demo-fab-sheet,
124+
.ios .demo-fab-fullscreen-sheet {
125+
background: var(--f7-page-bg-color);
126+
}
127+
.md .demo-fab-sheet,
128+
.md .demo-fab-fullscreen-sheet {
129+
background: var(--f7-popover-bg-color);
130+
}
129131
@media (min-width: 768px) {
130132
.demo-fab-fullscreen-sheet {
131133
left: 20%;
@@ -135,9 +137,6 @@
135137
top: auto;
136138
}
137139
}
138-
.demo-fab-fullscreen-sheet .page {
139-
background: #fff;
140-
}
141140

142141
/* Demo Messagebar */
143142
.ios

0 commit comments

Comments
 (0)