mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
chore(): begin adding ionic components to mono-repo.
This commit is contained in:
241
packages/ionic-angular/scripts/demos/demos.shared.css
Normal file
241
packages/ionic-angular/scripts/demos/demos.shared.css
Normal file
@ -0,0 +1,241 @@
|
||||
/*
|
||||
Scrollbar
|
||||
*/
|
||||
|
||||
body.has-scrollbar .scroll-content {
|
||||
margin-right: -15px;
|
||||
}
|
||||
body.has-scrollbar ion-menu .scroll-content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Popover
|
||||
*/
|
||||
|
||||
page-api-radio-popover ion-row,
|
||||
page-api-radio-popover ion-col {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popover-text-button {
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
min-height: 20px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.popover-text-button .item-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.popover-text-smaller {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.popover-text-larger {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.popover-row-dots {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popover-dot {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popover-dot-white {
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.popover-dot-tan {
|
||||
background-color: rgb(249,241,228);
|
||||
}
|
||||
|
||||
.popover-dot-grey {
|
||||
background-color: rgb(76,75,80);
|
||||
}
|
||||
|
||||
.popover-dot-black {
|
||||
background-color: rgb(0,0,0);
|
||||
}
|
||||
|
||||
.ios .popover-dot.selected,
|
||||
.md .popover-dot.selected,
|
||||
.wp .popover-dot.selected {
|
||||
border-width: 2px;
|
||||
border-color: #327eff;
|
||||
}
|
||||
|
||||
.popover-text-athelas {
|
||||
font-family: "Athelas";
|
||||
}
|
||||
|
||||
.popover-text-charter {
|
||||
font-family: "Charter";
|
||||
}
|
||||
|
||||
.popover-text-iowan {
|
||||
font-family: "Iowan";
|
||||
}
|
||||
|
||||
.popover-text-palatino {
|
||||
font-family: "Palatino";
|
||||
}
|
||||
|
||||
.popover-text-san-francisco {
|
||||
font-family: "San Francisco";
|
||||
}
|
||||
|
||||
.popover-text-seravek {
|
||||
font-family: "Seravek";
|
||||
}
|
||||
|
||||
.popover-text-times-new-roman {
|
||||
font-family: "Times New Roman";
|
||||
}
|
||||
|
||||
/*
|
||||
iOS Popover
|
||||
*/
|
||||
|
||||
.ios .popover-text-smaller {
|
||||
border-right: 1px solid #c8c7cc;
|
||||
}
|
||||
|
||||
.ios .popover-row-dots {
|
||||
border-bottom: 1px solid #c8c7cc;
|
||||
}
|
||||
|
||||
.ios .popover-dot {
|
||||
border: 1px solid #c8c7cc;
|
||||
}
|
||||
|
||||
.hairlines .popover-text-smaller,
|
||||
.hairlines .popover-row-dots,
|
||||
.hairlines .popover-dot {
|
||||
border-width: 0.55px;
|
||||
}
|
||||
|
||||
/*
|
||||
Material Design Popover
|
||||
*/
|
||||
|
||||
.md .popover-text-smaller {
|
||||
border-right: 1px solid #dedede;
|
||||
}
|
||||
|
||||
.md .popover-row-dots {
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
|
||||
.md .popover-dot {
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
|
||||
/*
|
||||
Windows Popover
|
||||
*/
|
||||
|
||||
.wp .popover-dot {
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
|
||||
/*
|
||||
Loading Custom Component
|
||||
*/
|
||||
|
||||
.loading-custom-spinner-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.loading-custom-spinner-box {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: spin 3s infinite linear;
|
||||
}
|
||||
|
||||
.loading-custom-spinner-box:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: pulse 1.5s infinite ease;
|
||||
}
|
||||
|
||||
/*
|
||||
Windows Loading Custom Component
|
||||
*/
|
||||
|
||||
.wp .loading-custom-spinner-box,
|
||||
.wp .loading-custom-spinner-box:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/*
|
||||
Loading Custom Component Keyframes
|
||||
*/
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Tabs Only
|
||||
*/
|
||||
|
||||
ion-tabs[tabs-only]:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
ion-tabs[tabs-only] {
|
||||
margin-bottom: 20px;
|
||||
contain: none;
|
||||
}
|
||||
|
||||
ion-tabs[tabs-only],
|
||||
ion-tabs[tabs-only] .tabbar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
Reference in New Issue
Block a user