Réserver vos congés n’a jamais été aussi simple ! Power Apps avec Be-Cloud.
Disponible depuis votre environnement Office 365 ainsi que depuis votre smartphone, vos collaborateurs pourront visualiser l’historique de leurs demandes, leurs congés restants et effectuer une nouvelle demande de congés.
Demandez votre devis et personnalisez votre application !
@import url(https://fonts.googleapis.com/css?family=Bree+Serif|Ubuntu|Dancing+Script|Droid+Sans|Lato|Lobster|Montserrat|Open+Sans|Pacifico|Raleway|Roboto|Source+Sans+Pro|Titillium+Web&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
:root {
--input-placeholder-color: black;
--input-border-color: black;
--input-background-color: white;
--input-radius: 0;
--form-background: white;
--container-border-radius: 0;
--container-box-shadow: 0;
--container-position: inherit
}
input::-webkit-input-placeholder {
color: var(--input-placeholder-color);
opacity: .6
}
input:-moz-placeholder {
color: var(--input-placeholder-color);
opacity: .6
}
input::-moz-placeholder {
color: var(--input-placeholder-color);
opacity: .6
}
input:-ms-input-placeholder {
color: var(--input-placeholder-color);
opacity: .6
}
input::-ms-input-placeholder {
color: var(--input-placeholder-color);
opacity: .6
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select {
padding-right: 18px
}
}
.select-arrow {
position: relative
}
.select-arrow:after {
content: "^";
font: 15px "Consolas", monospace;
color: var(--input-placeholder-color);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
right: 8px;
top: -3px;
padding: 0 0 0px;
position: absolute;
pointer-events: none
}
.control {
display: block;
position: relative;
padding-left: 30px;
margin-left: 5px;
margin-right: 6px;
cursor: pointer;
font-size: 18px
}
.control input {
position: absolute;
z-index: -1;
opacity: 0
}
.control__indicator {
position: absolute;
border: 1px solid;
top: 2px;
left: 0;
height: 20px;
width: 20px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px
}
.control--radio .control__indicator {
border-radius: 50%
}
.control__indicator:after {
content: "";
position: absolute;
display: none
}
.control input:checked~.control__indicator:after {
display: block
}
.control--checkbox .control__indicator:after {
left: 8px;
top: 4px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border-style: solid;
border-color: var(--input-placeholder-color);
border-width: 0 2px 2px 0;
position: absolute
}
.control--radio .control__indicator:after {
left: 7px;
top: 7px;
height: 6px;
width: 6px;
border-radius: 50%;
background: var(--input-placeholder-color);
position: absolute
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none
}
input[type=number] {
-moz-appearance: textfield
}
input:focus {
outline: solid 1px #736f6f !important
}
textarea:focus {
outline: solid 1px #736f6f !important
}
select:focus {
outline: solid 1px #736f6f !important
}
input:disabled,
input[disabled] {
opacity: .2;
cursor: default
}
.loader,
.loader:after {
border-radius: 50%;
width: 1.8em;
height: 1.8em
}
.loader {
margin-top: 5px;
margin-left: 10px;
font-size: 10px;
position: relative;
border: .5em solid #919798;
border-left-color: #3c9f51;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1s infinite linear;
animation: load8 1s infinite linear
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#sb_form {
background: var(--form-background);
padding: 10px 20px 20px 20px;
border-radius: var(--container-border-radius);
box-shadow: var(--container-box-shadow);
position: var(--container-position)
}
.message-div {
display: flex;
flex-direction: column;
height: auto;
margin: 25px 15px 15px 15px;
padding: 25px;
border-radius: 1px
}
.message-div-success {
background-color: #4faf56;
text-align: left
}
.message-success-title {
font-size: 30px;
font-family: "Open Sans", sans-serif;
color: #fff;
padding-bottom: 4px
}
.message-success-content {
font-size: 14px;
font-family: "Lato", sans-serif;
color: #fff;
line-height: 24px;
text-align: left
}
.message-div-success-optin {
background-color: #06aaf4;
text-align: left
}
.message-success-optin-title {
font-size: 30px;
font-family: "Open Sans", sans-serif;
color: #fff;
padding-bottom: 4px
}
.message-success-optin-content {
font-size: 14px;
font-family: "Lato", sans-serif;
color: #fff;
line-height: 24px;
text-align: left
}
.message-div-error {
background-color: #cf4338;
text-align: left
}
.message-error-title {
font-size: 30px;
font-family: "Open Sans", sans-serif;
color: #fff;
padding-bottom: 4px
}
.message-error-content {
font-size: 14px;
font-family: "Lato", sans-serif;
color: #fff;
line-height: 24px;
text-align: left
}
.message-div-maintenance {
background-color: #cf4338
}
.message-maintenance-title {
font-size: 30px;
font-family: "Open Sans", sans-serif;
color: #fff;
padding-bottom: 4px
}
.message-maintenance-content {
font-size: 14px;
font-family: "Lato", sans-serif;
color: #fff;
line-height: 24px
}
.icon {
display: inline-block;
width: 30px;
height: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.icon-success {
margin-left: auto;
margin-top: 3px;
margin-right: 15px
}
.icon-error {
margin: 2px 12px 0 auto;
width: 40px;
height: 34px
}
.checkmark_left {
position: absolute;
width: 15px;
height: 6px;
background-color: #72bf75;
left: 6px;
top: 24px
}
.checkmark_right {
position: absolute;
width: 6px;
height: 30px;
background-color: #72bf75;
left: 21px
}
.info {
font-size: 44px;
font-family: "Consolas";
color: #5bbdf6;
text-align: right
}
input {
color: var(--input-placeholder-color) !important
}
.theme {
border: 1px solid var(--input-border-color);
background-color: var(--input-background-color)
}
.input {
height: 35px;
margin: 5px 0 10px 0;
font-size: .9em;
padding-left: 5px;
border-radius: var(--input-radius);
-webkit-border-radius: var(--input-radius);
-moz-border-radius: var(--input-radius);
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-indent: 5px
}
.multi {
height: 65px;
width: 100%;
padding: 10px;
resize: vertical;
margin: 5px 0 10px 0;
font-size: .9em;
color: var(--input-placeholder-color);
border-radius: var(--input-radius);
-webkit-border-radius: var(--input-radius);
-moz-border-radius: var(--input-radius);
box-sizing: border-box;
outline: none;
font-family: "Open Sans", "Helvetica Neue", Arial, Verdana, sans-serif
}
.date {
padding-left: 5px;
box-sizing: border-box;
min-width: 50px;
text-align: center
}
.select {
height: 35px;
width: 100%;
color: var(--input-placeholder-color);
border-radius: var(--input-radius);
-webkit-border-radius: var(--input-radius);
-moz-border-radius: var(--input-radius);
margin-top: 5px;
margin-bottom: 10px;
padding-left: 10px
}
.shadow-inset {
box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, .1)
}
.shadow-outset {
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, .1)
}
