2017-10-18 10:20:40 +00:00
|
|
|
// http://ionicframework.com/docs/theming/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// App Global Sass
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
// Put style rules here that you want to apply globally. These
|
|
|
|
|
// styles are for the entire app and not just one component.
|
|
|
|
|
// Additionally, this file can be also used as an entry point
|
|
|
|
|
// to import other Sass files to be included in the output CSS.
|
|
|
|
|
//
|
|
|
|
|
// Shared Sass variables, which can be used to adjust Ionic's
|
|
|
|
|
// default Sass variables, belong in "theme/variables.scss".
|
|
|
|
|
//
|
|
|
|
|
// To declare rules for a specific mode, create a child rule
|
|
|
|
|
// for the .md, .ios, or .wp mode classes. The mode class is
|
|
|
|
|
// automatically applied to the <body> element in the app.
|
2017-11-21 15:35:41 +00:00
|
|
|
|
|
|
|
|
|
2017-11-24 11:31:09 +00:00
|
|
|
// Alignment
|
|
|
|
|
// -------------------------
|
|
|
|
|
|
|
|
|
|
.text-left { text-align: left; }
|
|
|
|
|
.text-right { text-align: right; }
|
|
|
|
|
.text-center { text-align: center; }
|
2017-12-18 09:48:04 +00:00
|
|
|
.text-justify { text-align: justify; }
|
2017-12-29 17:05:52 +00:00
|
|
|
.clearfix {
|
|
|
|
|
&:after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: table;
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-11-24 11:31:09 +00:00
|
|
|
|
|
|
|
|
@media only screen and (min-width: 430px) {
|
2017-12-29 17:05:52 +00:00
|
|
|
.core-center-view .scroll-content {
|
2017-12-18 09:48:04 +00:00
|
|
|
display: flex!important;
|
|
|
|
|
align-content: center !important;
|
|
|
|
|
align-items: center !important;
|
|
|
|
|
> * {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
max-width: 600px;
|
2017-11-24 11:31:09 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
|
.hidden-phone {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (min-width: 769px) {
|
|
|
|
|
.hidden-tablet {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-18 09:48:04 +00:00
|
|
|
|
2017-11-27 10:57:52 +00:00
|
|
|
// Define an alternative way to set a heading in an item without using a heading tag.
|
|
|
|
|
// This is done for accessibility reasons when a heading is semantically incorrect.
|
|
|
|
|
.item .item-heading {
|
|
|
|
|
@extend h6;
|
2017-12-13 10:04:37 +00:00
|
|
|
margin: 0;
|
2017-11-27 10:57:52 +00:00
|
|
|
}
|
|
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
.core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon {
|
2017-12-18 09:48:04 +00:00
|
|
|
min-height: 32px;
|
|
|
|
|
img, .label {
|
2017-11-27 10:57:52 +00:00
|
|
|
max-height: 32px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
max-width: 32px;
|
|
|
|
|
}
|
2017-12-18 09:48:04 +00:00
|
|
|
.label {
|
2017-11-27 10:57:52 +00:00
|
|
|
margin-left: 5px;
|
|
|
|
|
color: $gray-darker;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-11-27 12:10:56 +00:00
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
.core-bold, .core-bold .label {
|
2017-11-27 12:10:56 +00:00
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
2017-11-29 15:03:47 +00:00
|
|
|
|
2017-12-18 09:48:04 +00:00
|
|
|
// Avatar
|
|
|
|
|
// -------------------------
|
|
|
|
|
// Large centered avatar
|
2017-11-30 11:02:49 +00:00
|
|
|
.item-avatar-center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
&.item-complex .item-content {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-left: 49px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
> img:first-child,
|
|
|
|
|
ion-avatar img {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: auto;
|
|
|
|
|
width: 90px;
|
|
|
|
|
height: 90px;
|
|
|
|
|
max-width: 90px;
|
|
|
|
|
max-height: 90px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
border-radius : 50%;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
|
|
|
|
|
&.avatar-full {
|
|
|
|
|
border-radius: 2%;
|
|
|
|
|
border: 0;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 160px;
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-12-18 09:48:04 +00:00
|
|
|
|
|
|
|
|
ion-avatar ion-img, ion-avatar img {
|
|
|
|
|
text-indent: -99999px;
|
|
|
|
|
background-color: $gray-light;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Form items
|
|
|
|
|
// -------------------------
|
|
|
|
|
|
|
|
|
|
.item .core-input-footnote {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
font-style: italic;
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-12 09:49:13 +00:00
|
|
|
/** Format Text */
|
|
|
|
|
core-format-text[maxHeight], *[core-format-text][maxHeight] {
|
|
|
|
|
display: block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
/* Force display inline */
|
|
|
|
|
&.inline {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// This is to allow clicks in radio/checkbox content.
|
2017-12-29 17:05:52 +00:00
|
|
|
&.core-text-formatted {
|
2017-12-12 09:49:13 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
.core-show-more {
|
2017-12-12 09:49:13 +00:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
&:not(.core-shortened) {
|
2017-12-12 09:49:13 +00:00
|
|
|
max-height: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
&.core-shortened {
|
2017-12-12 09:49:13 +00:00
|
|
|
color: $gray-darker;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
min-height: 50px;
|
|
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
.core-show-more {
|
2017-12-12 09:49:13 +00:00
|
|
|
color: color($colors, dark);
|
|
|
|
|
text-align: right;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
background-color: $white;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
|
|
|
|
|
/* @todo
|
|
|
|
|
&:after {
|
|
|
|
|
@extend .ion;
|
|
|
|
|
content: $ionicon-var-chevron-down;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
color: $item-icon-accessory-color;
|
|
|
|
|
}
|
|
|
|
|
*/
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-29 17:05:52 +00:00
|
|
|
&.core-expand-in-fullview .core-show-more:after {
|
2017-12-12 09:49:13 +00:00
|
|
|
// content: $ionicon-var-chevron-right; @todo
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
|
content: '';
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
|
|
|
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
|
|
|
|
|
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
|
|
|
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
|
|
|
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
|
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
core-format-text, *[core-format-text] {
|
|
|
|
|
audio, video, a, iframe {
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fix lists styles in core-format-text.
|
|
|
|
|
ul, ol {
|
|
|
|
|
-webkit-padding-start: 40px;
|
|
|
|
|
}
|
|
|
|
|
ul {
|
|
|
|
|
list-style: disc;
|
|
|
|
|
}
|
|
|
|
|
ol {
|
|
|
|
|
list-style: decimal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.badge {
|
|
|
|
|
position: initial !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Message item.
|
|
|
|
|
.item-message {
|
|
|
|
|
core-format-text > p:only-child {
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-12-18 12:06:12 +00:00
|
|
|
|
|
|
|
|
// Media item, ideal for icons.
|
|
|
|
|
.item-media {
|
|
|
|
|
min-height: $item-media-height + ($content-padding * 2);
|
|
|
|
|
> img:first-child {
|
|
|
|
|
max-width: $item-media-width;
|
|
|
|
|
max-height: $item-media-height;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-12-29 17:05:52 +00:00
|
|
|
|
|
|
|
|
// Ionic fix. Button can occupy all page if not.
|
|
|
|
|
ion-select {
|
|
|
|
|
position: relative
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Top tabs
|
|
|
|
|
// -------------------------
|
|
|
|
|
|
|
|
|
|
.core-top-tabbar {
|
|
|
|
|
@include position(null, null, 0, 0);
|
|
|
|
|
|
|
|
|
|
z-index: $z-index-toolbar;
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: $core-top-tabs-background;
|
|
|
|
|
|
|
|
|
|
> a {
|
|
|
|
|
@extend .tab-button;
|
|
|
|
|
|
|
|
|
|
background: $core-top-tabs-background;
|
|
|
|
|
color: $core-top-tabs-color !important;
|
|
|
|
|
border-bottom: 1px solid $core-top-tabs-border;
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
|
|
|
|
|
&[aria-selected=true] {
|
|
|
|
|
color: $core-top-tabs-color-active !important;
|
|
|
|
|
border-bottom: 2px solid $core-top-tabs-color-active;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-01-09 07:51:44 +00:00
|
|
|
|
|
|
|
|
// File uploader.
|
|
|
|
|
// -------------------------
|
|
|
|
|
|
|
|
|
|
.core-fileuploader-file-handler {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
outline: none;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
