peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
099bdf3ca03a2bbe98571e621f5e81bbee1b4793
doneit-web/src/global.scss
T
Peter Maquiran 507ebd691a Improve loader
2021-07-12 11:13:29 +01:00

1063 lines
20 KiB
SCSS
Raw Blame History

/*
* App Global CSS
* ----------------------------------------------------------------------------
* 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
* used as an entry point to import other CSS/Sass files to be included in the
* output CSS.
* For more information on global stylesheets, visit the documentation:
* https://ionicframework.com/docs/layout/global-stylesheets
*/
/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";
/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';
/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
// calendar
// ionic calendar2
// calendar current day
// current day
ion-slide {
td {
div {
padding-left: 7px;
border-radius: 28px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 25px;
}
}
}
td.monthview-primary-with-event {
background-color: white !important;
}
// current date
td.monthview-current{
border-bottom: 1px solid lightskyblue !important;
color: black !important;
background-color: white !important;
}
// selected date =============================
td.monthview-selected {
background-color: lightskyblue !important;
color: white !important;
}
td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-dwf-c153] {
background-color: white !important;
color: black !important;
}
.event-detail-container{
display: none;
}
.cal-week-view {
border-top: none !important;
}
.calendar-event-type
/* Timeline */
.cal-hour-segment {
border-bottom: none !important;
}
.cal-current-time-marker {
background-color: #42b9fe !important;
}
.timeline .cal-event, .cal-event{
padding: 0px !important;
}
.cal-current-time-marker {
width: 100% !important;
margin-left: 0px !important;
}
.line{
margin-top: 15px;
border-top: 1px solid #d8d8d8;
}
.cal-time{
font-family: Roboto;
font-size: 13px;
color: #797979;
}
.timeline-box{
position: relative;
width: calc(100% - 0px);
border-radius: 5px;
padding: 3px;
background-color: white !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
border: solid 1px #e9e9e9 !important;
color: black;
.timeline-start-time, .timeline-location{
font-family: Roboto;
font-size: 13px;
margin-right: 10px;
}
.timeline-event-discription{
font-family: Roboto;
font-size: 15px;
font-weight: bold;
}
}
.timeline-pr-box-Pessoal{
border-left: 5px solid #958bfc !important;
height: 100%;
}
.timeline-pr-box-Oficial{
border-left: 5px solid #99e47b !important;
height: 100%;
}
.timeline-mdgpr-box-Oficial{
border-left: 5px solid #ffb703 !important;
}
.timeline-mdgpr-box-Pessoal{
border-left: 5px solid #f05d5e !important;
}
.table-bordered, .table-bordered{
border: none !important;
td, th {
border: none !important;
}
}
.cal-tooltip, .cal-tooltip-top{
display: none;
}
/* .timeline-box-{} */
.calendar-event-border{
color: black !important;
margin: 0px auto !important;
border: 1px solid #fff;
border-radius: 50px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 106px;
padding: 0px !important;
div.day{
padding: 0px !important;
transform: rotate(-45deg);
}
}
.calendar-mdgpr-event-type-Oficial{
border-left: 3px solid #ffb703 !important;
}
.calendar-mdgpr-event-type-Pessoal{
border-top: 3px solid #f05d5e !important;
}
.calendar-mdgpr-event-type-both{
border-left: 3px solid #ffb703 !important;
border-top: 3px solid #f05d5e !important;
}
.calendar-pr-event-type-both{
border-right: 3px solid #99e47b !important;
border-bottom: 3px solid #958bfc !important;
}
.calendar-pr-event-type-Oficial{
border-right: 3px solid #99e47b !important;
}
.calendar-pr-event-type-Pessoal{
border-bottom: 3px solid #958bfc !important;
}
.cal-hour-segment {
border-bottom: none !important;
}
.calendar-profile{
font-size: 36px
}
/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";
@import "./style/main.scss";
// disable calendar build in header
.calendar-component{
thead{
display: none;
}
}
.calendar-top0{
margin-top: 0px;
}
.calendar-top15{
margin-top: 15px;
}
.calendar-top30{
margin-top: 30px;
}
.calendar-top45{
margin-top: 45px;
}
.cal-event{
overflow: visible !important;
}
/* .cal-week-view mwl-calendar-week-view-hour-segment, .cal-week-view .cal-hour-segment {
display: block;
height: 60px !important;
} */
.calendar-container{
height: 333px;
z-index: 10;
transition: 0.5s;
overflow-y: hidden;
.monthview-container{
overflow-y: hidden;
height: unset !important;
}
}
.modal-desktop{
.modal-wrapper{
max-width: 1466px !important;
height: 100%;
}
}
@media screen and (min-width: 1200px) {
.hide-desktop{
display: none !important;
}
.container-div{
border-bottom:none !important;
}
}
@media only screen and (max-width: 800px){
.btn-refresh{
display: none;
}
.p-item-title{
width: 100% !important;
}
.attach-title-item{
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
.hideAsideOptions{
@media only screen and (max-width: 800px) {
.div-icon{
display: none;
}
.content{
width: 100%;
border-right: 1px solid #d8d8d8;
}
.aside-right{
display: none;
}
}
/* .aside-right{
display: none;
width: 0;
}
.content{
width: 100%;
} */
}
.app-default-padding{
padding: 30px 20px 0 20px !important;
}
.showAsideOptions{
@media only screen and (min-width: 800px) {
.div-icon{
display: none;
}
.content{
width: 65%;
border-right: 1px solid #d8d8d8;
}
.aside-right{
width: 35%;
}
}
@media only screen and (min-width: 1024px){
.content{
width: 70%;
}
.aside-right{
width: 30%;
}
}
@media only screen and (min-width: 1140px) {
.div-icon{
display: none;
}
.content{
width: 75%;
border-right: 1px solid #d8d8d8;
}
.aside-right{
width: 25%;
}
}
}
.profile-modal{
.modal-wrapper{
position: absolute;
top: -40px;
right: 0px;
height: 100%;
max-width: 400px;
}
}
.desktop-search {
padding-top: 0px !important;
margin-top: 80px !important;
position: relative !important;
ion-backdrop {
display: none !important;
}
// margin-top: 86px;
.model-wrapper {
}
}
.notification-modal {
ion-backdrop {
display: none;
}
.modal-wrapper {
position: absolute;
top: 23px;
right: 0px;
height: 87px;
max-width: 400px;
border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
-ms-border-radius: 9px;
-o-border-radius: 9px;
}
.ion-page {
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.2) !important;
}
}
.hide-footer{
ion-footer{
display: none !important;
}
}
.aside-modal{
.modal-wrapper{
position: absolute;
right: 0px;
height: 100%;
width: 400px;
}
}
.modal-width-100-width-background, .modal-desktop {
padding-top: 76px;
.modal-wrapper {
width: 100% !important;
height: 99% !important;
position: relative;
}
}
.modal-padding-top {
margin-top: 87px;
.modal-wrapper {
// height: 99%;
// top: 2%;
// position: relative;
}
}
.modal-top-100-width-background, .modal-desktop {
.modal-wrapper {
width: 100%;
height: 99%;
position: relative;
}
}
@media only screen and (min-width: 1366px) {
.modal-desktop-shadow{
.ion-page{
box-shadow: 0 0 15px 0 rgb(0 0 0 / 49%);
}
}
.modal-desktop-remove-background{
padding-top: 0px;
top: 85px;
ion-backdrop{
display: none;
transform: none !important;
}
.modal-wrapper{
transform: none !important;
box-shadow: none !important;
height: 100% !important;
top: unset !important;
.ion-page {
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
}
}
}
}
.modal-desktop-shadow{
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.49);
}
.footer-container{
padding: 10px 20px;
}
.chat-mobile-modal-to-Desktop{
top: 75px;
left: 31%;
transform: none !important;
ion-backdrop{
display: none;
transform: none !important;
}
.modal-wrapper{
transform: none !important;
width: 100%;
height: 100%;
box-shadow: none !important;
.ion-page {
transform: none !important;
}
}
}
.modal-width-100{
.modal-wrapper{
width: 100%;
height: 100%;
}
}
@media only screen and (min-width: 1365px) {
.search-modal{
ion-backdrop{
display: none;
}
}
.search-submodal{
background-color: rgb(0 0 0 / 55%);
}
}
@media only screen and (min-width: 1024px) {
.timeline-mobile{
.timeline-box {
position: relative;
left: -4%;
width: 102%;
}
}
}
/* Breakpoints */
._xs{
width: 100%;
}
._sm{
width: 540px;
}
._md{
width: 720px;
}
._lg{
width: 960px;
}
._xl{
width: 1140px;
}
.timeline-container {
div:nth-child(3) {
.cal-time{
display: none;
}
.cal-current-time-marker::before {
display: none !important;
}
.timeline-box{
left: -13%;
position: relative;
width: 113%;
}
}
}
.timeline{
div.cal-event:focus{
outline: none !important;
}
}
.calendar-component .monthview-container table.table {
td {
width: 50px;
height: 40px;
div {
padding-left: 0px;
}
display: flex;
align-content: center;
justify-content: center;
}
td div:not(.day, .day-container, .number) {
width: 30px !important;
height: 30px;
}
tr {
display: flex;
justify-content: space-around;
}
}
// agenda attendee component
.attendee-search-bar input{
border: 1px solid #cecece !important;
box-shadow: none !important;
border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
-ms-border-radius: 3px !important;
-o-border-radius: 3px !important;
}
.attendee-search-bar .searchbar-input {
border: 1px solid #cecece !important;
box-shadow: none !important;
border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
-ms-border-radius: 3px !important;
-o-border-radius: 3px !important;
}
.title-icon {
font-size: 40px !important;
color: #42b9fe;
overflow: auto;
}
ion-icon {
pointer-events: none;
}
.btn-no-color {
background: transparent;
margin: 0 !important;
padding: 0 !important;
ion-icon {
font-size: 35px;
}
}
.btn-no-color:focus {
outline: 0;
}
// center
app-diploma-assinar ion-content .main-content,
app-approve-event ion-content .main-content,
app-view-event ion-content .main-content,
app-expediente-pr .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-expediente-detail ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-despacho ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-despacho-pr ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-pedido ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-diploma ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-gabinete-digital ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-publications ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-agenda ion-content .container-wrapper{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-chat ion-content .main-content{
max-width: 1366px !important;
margin: 0px auto !important;
}
app-header .ion-toolbar{
max-width: 1366px;
margin: 0px auto;
}
app-header-no-search .ion-toolbar{
max-width: 1366px;
margin: 0px auto;
}
/* .main-content{
height: 100% !important;
overflow-y: auto !important;
} */
body, .blue-background{ background: #0782C9 !important;}
@media only screen and (min-width: 1365px) {
body{
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
}
.blue-background {
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
}
}
:host {
ion-content {
--background:none;
}
--background:none;
}
ion-content {
--background:none;
}
.header-default-padding{
padding: 30px 20px 0 20px !important;
}
.content-default-padding{
padding: 0px 20px 0 20px !important;
}
.chat-popover .popover-content {
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: calc(100% - 160px) !important;
max-height: 160px;
min-height: 160px;
}
.monthview-secondary-with-event, .text-muted {
.day {
color: #cecece;
}
}
ion-icon{
cursor: pointer;
}
.temporary-message {
background-color: #00000073;
.modal-wrapper {
width: 500px;
height: fit-content;
height: 300px;
}
}
@media only screen and (max-width: 500px) {
::-webkit-scrollbar {
width: 5px !important;
height: 5px !important;
}
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(92, 92, 92);
}
// ===================================
.hide-scroll::-webkit-scrollbar {
display: none !important;
}
/* Track */
.hide-scroll::-webkit-scrollbar-track {
display: none !important;
}
/* Handle */
.hide-scroll::-webkit-scrollbar-thumb {
display: none !important;
}
/* Handle on hover */
.hide-scroll::-webkit-scrollbar-thumb:hover {
display: none !important;
}
.notification{
position: absolute;
top: 23px;
right: 0px;
height: 87px;
border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
-ms-border-radius: 9px;
-o-border-radius: 9px;
background-color: white;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
background-image: url("/assets/background/background-circle-negative.svg");
background-size: 686px 674px;
background-position: center;
background-position-y: 0px;
background-repeat: no-repeat;
min-width: 340px;
box-shadow: 0px 2px 10px #0000003d;
animation-name: notification;
animation-duration: 1s;
animation-timing-function: ease-in;
transition: 1s;
.main-content {
display: flex;
align-items: center;
}
.message {
font-size: 12pt;
}
}
.notificationPush{
position: absolute;
top: 23px;
right: 0px;
height: 87px;
max-width: 400px;
border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
-ms-border-radius: 9px;
-o-border-radius: 9px;
background-color: white;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
background-image: url("/assets/background/background-circle-negative.svg");
background-size: 686px 674px;
background-position: center;
background-position-y: 0px;
background-repeat: no-repeat;
min-width: 340px;
box-shadow: 0px 2px 10px #0000003d;
display: flex;
align-items: center;
animation-name: notification-top;
animation-duration: 1s;
animation-timing-function: ease-in;
transition: 1s;
.main-content {
display: flex;
align-items: center;
}
.message {
font-size: 12pt;
}
}
@keyframes notification {
from {right: -100%;}
to {right: 0px;}
}
@keyframes notification-top {
from {top: -100%;}
to {top: 23px;}
}
.calendar-component .monthview-container table.table tbody {
tr:nth-child(n+6) {
display: none;
}
}
.modal {
display: flex !important;
}
// calendar
.mat-calendar-body-selected {
background-color: #42b9fe !important;
}
// select background
// .mat-primary .mat-option.mat-selected:not(.mat-option-disabled), .mat-option-ripple {
// background-color: #fafafa !important;
// }
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
background-color: #42b9fe36 !important;
}
.mat-form-field-underline.ng-tns-c193-6.ng-star-inserted, .mat-form-field-underline {
// display: none;
}
.date-hour-picker {
margin-top: -6px;
label#mat-form-field-label-7 {
display: none;
}
.span.ng-tns-c193-4, .ng-star-inserted {
// display: none;
}
.ng-star-inserted{
// display: none;
position: absolute;
width: 100%;
height: 43px;
opacity: 0;
button {
width: 100%;
height: 100%;
}
}
button {
width: 100%;
height: 100%;
}
.mat-datepicker-toggle, mat-datepicker-toggle {
width: 100%;
}
}
.mat-active span {
color: #0d89d1 !important;
}
// .ng-star-inserted {
// opacity: 0;
// }
.input-error{
border: 1px solid #fba0a0 !important;
}
.input-errror-message{
margin-top: -16px;
margin-bottom: 10px;
font-size: 11pt;
}
.mat-selected {
background-color: #87cefa !important;
span {
color: white !important;
}
}
ngx-mat-datetime-content{
.actions {
.mat-button-disabled {
background-color: #ff5a5a59 !important;
}
}
}
// angular material inputs
.mat-form-field-infix, .mat-form-field-wrapper {
padding: 0px !important;
}
.loading-blocker {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #0000006b;
.loading-blocker-container {
width: 100px;
}
}
@media only screen and (min-width: 665px) {
.loading-blocker {
.loading-blocker-container {
width: 250px;
}
}
}
Reference in New Issue View Git Blame Copy Permalink