Migration toujours en cours (953c7ae5) · Commits · open-source / oscar

module/Oscar/view/layout/layout.phtml

+6 −6

Original line number	Diff line number	Diff line
		@@ -450,7 +450,7 @@ echo getenv('APPLICATION_ENV') ?: 'development' ?>">
		endforeach; ?></div>


		<div id="contenu-principal" class="" style="padding-bottom: 50px">
		<div id="contenu-principal" class="">
		<?php
		if (($menuSecondaire = $this->navigation()->menuSecondaire('navigation')->render())): ?>
		<div class="row">
		@@ -471,8 +471,8 @@ echo getenv('APPLICATION_ENV') ?: 'development' ?>">
		endif; ?>
		</div>

		<footer class="site-footer bg-primary">
		<div class="container">
		<footer class="bg-primary text-white p-3 fixed-bottom">
		<div class="row">
		<div class="col-md-4">
		<a href="https://www.unicaen.fr">
		<img src="/images/logo-ucbn.png" alt="" class="footer-logo" height="20" style="display: inline"/>
		@@ -492,7 +492,7 @@ echo getenv('APPLICATION_ENV') ?: 'development' ?>">
		</a> / Thème : <strong><?= $this->options()->theme() ?></strong>
		</div>
		<div class="col-md-4">
		<button class="btn btn-xs btn-primary" id="btn-toggle-private">
		<button class="btn btn-xs btn-default" id="btn-toggle-private">
		<span class="off">
		<i class="icon-valid"></i>
		Mode privé <small> (activé)</small>
		@@ -508,7 +508,7 @@ echo getenv('APPLICATION_ENV') ?: 'development' ?>">
		<a href="#" class="scrollup" title="Remonter en haut de cette page"><img alt="Remonter" src="<?php
		echo $this->basePath('/css/icon-top.png') ?>"/></a>
		<script>
		/**

		window.flashMessage = function (type, content) {
		var message = $('<div class="flashmsg flashmsg-' + type + '">'
		+ '<i class="icon-' + type + '"></i>'
		@@ -548,7 +548,7 @@ echo getenv('APPLICATION_ENV') ?: 'development' ?>">
		<?php
		if ($this->grant()->getCurrentPerson()): ?>
		<script>
		/****
		/***/
		var socket, notifications;

		require(['vue', 'mm', 'vue-resource', 'notifications'], function (Vue, moment, VueResource, notifications) {

module/Oscar/view/oscar/project-grant/item-list.phtml

+16 −14

Original line number	Diff line number	Diff line
		@@ -41,11 +41,11 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac

		<span>
		<?php if( $activity->getProject() && $activity->getProject()->getAcronym()): ?>
		<strong class="project-acronym">[<?= $activity->getProject()->getAcronym() ?>] / </strong>
		<strong class="project-acronym acronym">[<?= $activity->getProject()->getAcronym() ?>] / </strong>
		<?php endif; ?>

		<?php if ($activity->getOscarNum()): ?>
		<strong class="oscarnum number"><?= $activity->getOscarNum() ?></strong> :
		<strong class="oscarnum number number-value"><?= $activity->getOscarNum() ?></strong> :
		<?php endif; ?>

		<?= $activity->getLabel() ?>
		@@ -64,24 +64,17 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		Supprimer
		</a>
		<?php endif; ?>

		<?php if( count($activity->getWorkPackages()) ): ?>
		<span class="cartouche primary xs">
		<i class="icon-calendar"></i>
		Soumis aux feuilles de temps
		</span>
		<?php endif; ?>
		</span>
		<?php if ($this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_PAYMENT_SHOW, $activity)): ?>
		<?php if( $activity->getFinancialImpact() == \Oscar\Entity\Activity::FINANCIAL_IMPACT_TAKE ): ?>
		<span class="montant recette"><?= $this->currency($activity) ?></span>
		<span class="onright montant recette"><?= $this->currency($activity) ?></span>
		<?php elseif ($activity->getFinancialImpact() == \Oscar\Entity\Activity::FINANCIAL_IMPACT_COST ): ?>
		<span class="montant depense">
		<span class="onright montant depense">
		<i class="icon-calculator"></i>
		<?= $this->currency($activity) ?>
		</span>
		<?php elseif ($activity->getFinancialImpact() == \Oscar\Entity\Activity::FINANCIAL_IMPACT_NONE ): ?>
		<span class="montant sans-incidence"><i>Sans incidence</i></span>
		<span class="onright montant sans-incidence"><i>Sans incidence</i></span>
		<?php endif; ?>
		<?php endif; ?>
		</h3>
		@@ -90,6 +83,12 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		<?php if( $show ): ?>
		<div class="row metas">
		<div class="col-sm-4">
		<?php if( count($activity->getWorkPackages()) ): ?>
		<span class="cartouche info">
		<i class="icon-calendar"></i>
		Soumis aux feuilles de temps
		</span><br>
		<?php endif; ?>
		<?php if ($activity->getDateSigned()): ?>
		<?= $this->oscarText("dateSigned") ?>
		<time><?= $this->moment($activity->getDateSigned()) ?></time>
		@@ -178,6 +177,7 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		</div>
		</div>

		<section class="rolled divided-border-top">
		<?php if (count($activity->getPersonsDeep()) && $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_PERSON_SHOW, $activity)): ?>
		<p class="text-highlight">
		<i class="icon-user grey"></i>
		@@ -200,6 +200,8 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		<?php endforeach; ?>
		</p>
		<?php endif; ?>
		</section>


		<?php
		//hasDocumentAccess
		@@ -212,7 +214,7 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		?>

		<?php if (count($documents)): ?>
		<div class="documents">
		<div class="documents divided-border-top">
		<p class="text-highlight"><i class="icon-book grey"></i>Documents :</p>
		<ul>
		<?php
		@@ -233,7 +235,7 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		<?php endif; ?>

		<?php if( !(isset($hideProject) && $hideProject === true) ): ?>
		<div class="text-highlight">
		<div class="divided-border-top">
		<?= $this->oscarText("Projet") ?>
		<span><?= $this->link()->project($activity->getProject()) ?></span>
		</div>

module/Oscar/view/oscar/public/index.phtml

+3 −4

Original line number	Diff line number	Diff line
		@@ -2,9 +2,9 @@
		// Récupération des informations utilisateur
		use Oscar\OscarText;
		use function Oscar\_ot; ?>
		<div class="bg-white banner">
		<div class="banner">
		<div class="container">

		<div class="row">
		<div class="col-md-3">

		<svg
		@@ -58,7 +58,6 @@ use function Oscar\_ot; ?>


		</div>

		<div class="col-md-9">

		<h1 style="font-size: 8em"><?= $this->appInfos()->nom ?></h1>
		@@ -129,7 +128,6 @@ use function Oscar\_ot; ?>
		<?php endif; ?>

		<?php if( $isValidator ): ?>

		<div class="btn-group">
		<a type="button" href="<?= $this->url('timesheet/validations2') ?>"
		class="btn <?= count($validations) > 0 ? 'btn-primary' : 'btn-default' ?>">
		@@ -194,3 +192,4 @@ use function Oscar\_ot; ?>
		</div>
		</div>
		</div>
		</div>
		No newline at end of file

ui/src/ActivitySearchUI.js

+25 −1

Original line number	Diff line number	Diff line
		import { createApp } from "vue";
		import ActivitySearchUi from "./views/ActivitySearchUi.vue";
		import momentFilter from "./utils/MomentFilter.js";
		import filesize from "./utils/Filesize.js";
		import money from "./utils/MoneyFilter.js";
		import Activity from "./views/Activity.vue";
		import traces from "./utils/Traces.js";
		import {oscarText} from "./utils/OscarText.js";

		let elemDatas = document.querySelector("#activity-search");
		@@ -11,7 +16,26 @@ const app = createApp(ActivitySearchUi, {
		});

		app.config.globalProperties.$filters = {
		oscarText
		oscarText,

		timeAgo(date) {
		return momentFilter.timeAgo(date);
		},
		date(date) {
		return momentFilter.date(date);
		},
		dateFull(date) {
		return momentFilter.dateFull(date);
		},
		filesize(size) {
		return filesize.filesize(size);
		},
		money(amount) {
		return money.money(amount);
		},
		log(message) {
		return traces.log(message);
		}
		};

		app.mount("#activity-search");
		No newline at end of file

ui/src/oscar-css.scss

+865 −15

Original line number	Diff line number	Diff line
		@@ -20,10 +20,8 @@ $brand-danger: #d9534f !default;
		$brand-error: #cb0b05 !default;

		$color-white: #fff !default;

		$colorGreyUltraLight: #CCC;
		$colorGreyLight: #AAA;

		$grey-mega-light: #EEE;
		$grey-ultra-light: #CCC;
		$grid-float-breakpoint: 1024px;
		@@ -31,6 +29,12 @@ $colorGreyMedium: #999;
		$colorGreyDark: #555;
		$colorGreyBlack: #222;

		$colorLight: $grey-mega-light;
		$colorBlue: $brand-info;
		$colorOrange: $brand-warning;

		$font-size-small: 10px;

		$colorGreyM: #999;


		@@ -306,16 +310,30 @@ span[class*="status-400"] .icon:before {
		}
		}

		.divided-border-top {
		border-top: 1px dotted $colorGreyMedium;
		padding-top: .5em;
		margin-top: .5em;
		}

		a.cartouche {
		&:hover {
		background: darken($colorGreyMedium, 10%);
		}
		}

		.cartouche {
		background: $primary;
		background: $colorGreyMedium;
		color: $color-white;
		padding: 0 .5em 0 .5em;
		text-decoration: none;
		border-radius: $border-radius;
		text-shadow: none;
		display: inline;
		font-weight: 600;
		font-weight: 500;
		margin-right: .3em;
		text-shadow: -1px 1px 0px rgba(0,0,0,.3);

		>a {
		color: $color-white;
		text-decoration: none;
		@@ -323,15 +341,44 @@ span[class*="status-400"] .icon:before {
		&:has(.addon){
		padding: 0 0 0 .5em;
		}

		.addon {
		font-weight: 400;
		border-radius: 0 $border-radius $border-radius 0;
		background: lighten($brand-primary, 30%);
		color: $brand-primary;
		background: lighten($colorGreyMedium, 30%);
		color: $colorGreyDark;
		padding: 0 .5em 0 .25em;
		margin: 0;
		margin-left: .25em;
		text-shadow: none;
		}

		&.primary {
		font-weight: 700;
		background: $primary;
		.addon {
		background: lighten($primary, 30%);
		}
		}
		&.info {
		font-weight: 700;
		background: $brand-info;
		.addon {
		background: lighten($brand-info, 30%);
		}
		}
		&.xs {
		font-size: .8em;
		}
		}

		.text-right {
		text-align: right;
		}

		.number-value {
		font-family: monospace;
		font-weight: bolder;
		}

		.card {
		@@ -349,23 +396,62 @@ span[class*="status-400"] .icon:before {
		.card-title {
		display: flex;
		font-size: 1.25em;
		line-height: 2em;
		line-height: 1em;
		padding: 0;
		margin: 0;
		border-bottom: thin solid $colorGreyUltraLight;
		padding-bottom: .6em;
		align-items: center;
		.thumb32 {
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		}
		.size-1 { flex: 1; }
		.size-2 { flex: 2; }
		.fn {
		flex: 1 0 auto;
		display: flex;
		}
		.onright {
		flex: 0 1 auto;
		text-align: right;
		margin-left: auto;
		}
		}
		.card-content {
		background: #fbfbfb;
		padding: .6em;
		}
		}

		.number {
		.key, .number-label {
		user-select: none;
		&:after {
		content: " : ";
		}
		}
		.value, .number-value {
		font-family: monospace;
		color: $colorGreyDark;
		padding: 0 .3em;
		}
		}

		/*
		<span class="onright montant recette" v-if="activity.amount">
		<span class="currency" :title="activity.amount.value +' ' + activity.amount.currency">
		<span class="value">{{ activity.amount.value \| money}}</span>
		<span class="currency">{{ activity.amount.currency }}</span>
		</span>
		</span>
		*/
		.montant {
		.currency {
		font-size: 1.1em;
		.value { font-weight: bolder; }
		.currency { font-weight: lighter; }
		}
		}

		@@ -424,14 +510,7 @@ span[class*="status-400"] .icon:before {
		}
		}

		.cartouche {
		&.person {

		.lastname {
		font-weight: 600;
		}
		}
		}

		.btn-help {
		font-size: .75em;
		@@ -585,7 +664,7 @@ a.usage {
		}

		.btn-edit, .btn-delete, .btn-save {
		@extend .btn-iconed;

		}

		.btn-edit:before {
		@@ -786,3 +865,774 @@ a.usage {
		}
		}
		}

		.activity-header {
		background: $color-white;
		.col-md-4 {
		padding: 1em;
		}
		}


		.tabs {
		.tab {
		display: inline-block;
		background: #ddd;
		border-radius: .25em .25em 0 0;
		text-shadow: 0 0 1px rgba(0,0,0,.25);
		padding: 0.5em 1em;
		font-weight: 100;
		cursor: pointer;

		&.selected {
		background: #fff;
		}
		}
		}
		.tab-content {
		background-color: #fff;
		padding: 1em;
		}

		.documents-content {
		.tab-content > .card {
		border: solid thin #999;
		box-shadow: none;
		}
		}

		.workpackages {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		flex-flow: wrap;
		flex: 1;

		.workpackage-item, .workpackage-add {
		max-width: 25%;
		min-width: 200px;
		position: relative;
		h3 {
		color: $brand-primary;;
		font-size: 1.6em;
		font-weight: 100;
		margin: 0;
		padding: 0;
		.label {
		color: $brand-primary;
		white-space: normal;
		margin: auto;
		padding: 0;
		}
		}
		p {

		}

		.timesheet {
		font-size: small;
		padding: 8px;
		border: solid thin #ddd;
		article {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		.status {
		align-self: flex-end;

		}
		}
		}

		nav {
		padding: 8px;
		border-top: dotted thin #ddd;

		$colorWP: desaturate($brand-primary, 100%);
		a {
		cursor: pointer;
		}

		&:hover > a {
		opacity: 1;
		}

		> a {
		opacity: .2;
		padding: 2px 8px;
		color: rgba($brand-primary, .5);
		font-size: $font-size-small;
		white-space: nowrap;
		cursor: pointer;

		&:hover {
		color: $brand-primary;
		}

		&.disabled {
		cursor: not-allowed;
		color: rgba($colorWP, .5);
		}
		}
		}

		color: desaturate($brand-primary, 100%);
		padding: 8px;
		margin: 4px;
		background: white;
		}
		.workpackage-add {
		@extend .btn;
		@extend .btn-primary;
		background: $brand-primary;
		color: white;
		padding: 1em;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: auto;
		border-radius: 4px;
		}
		}

		[class*="oscar-form-message"] {
		background: black;
		color: white;
		font-size: .9em;
		padding: 8px;
		margin-top: 4px;
		position: relative;
		text-shadow: -1px 1px 0 rgba(0,0,0,.5);

		&.error {
		background: $brand-danger;
		&:before { background: $brand-danger }
		}

		&:before {
		content: '';
		background: red;
		transform: rotate(45deg);
		position: absolute;
		top: -4px;
		left: 4px;
		width: 8px;
		height: 8px;
		}
		}

		.workpackage {
		background: white;
		padding: .6em;
		flex-grow: 1;
		flex-basis: auto;
		margin: .5em;
		max-width: 24%;
		box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
		font-size: .9em;
		h3 {
		margin: 0;
		padding: .25em 0;
		margin: 0 0 .25em;
		border-bottom: solid thin rgba(0, 0, 0, .2);
		font-size: 1.4em;
		}
		p {
		font-size: .9em;
		}
		.workpackage-persons {
		display: block;
		.workpackage-person {
		display: flex;
		font-weight: 100;
		font-size: .8em;
		border-bottom: solid thin rgba(0, 0, 0, .1);
		&:last-child {
		border: none
		}
		.displayname {
		flex: 1;
		font-weight: 500;
		}
		.roles {
		flex: 1;
		}
		}
		}
		}

		.fullname {
		.lastname {
		font-variant: small-caps;
		}
		}

		.person-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		> * {

		}
		.portrait {
		border-radius: 4px;
		margin-right: .5em;
		box-shadow: inset 1em 1em rgba(255, 255, 255, .5);
		max-height: 3.5em;
		}
		.intitule {
		color: $colorGreyDark;
		display: flex;
		font-size: 1em;
		}
		.fullname {

		}
		.fullname, .role {
		display: block;
		}
		.lastname {
		font-weight: bold;

		}
		.affectation {
		color: $colorGreyMedium
		}
		.role {
		color: $brand-complementary;
		font-size: .5em;
		font-style: italic;
		position: relative;
		top: -.5em;
		}
		nav {
		font-size: .8em;
		justify-self: flex-end;
		a {
		margin-left: 1em;
		}
		}
		}

		.oscar-text-loading {
		animation-name: disco;
		animation-iteration-count: infinite;
		animation-duration: .5s;
		animation-direction: alternate;
		}

		///////////////////////////////////////////////////////////////////////// JALONS

		@keyframes disco {
		from {
		color: saturate($brand-complementary, 20);
		}
		to {
		color: $colorGreyDark;
		}
		}

		#flash-messages {
		position: fixed;
		z-index: 10000;
		top: 100px;
		right: 0;
		max-width: 30%;
		color: white;

		.flashmsg {
		padding: .5em 1em;
		margin: .5em 0;
		background: white;
		border-radius: 4px;
		box-shadow: 0 0 .3em rgba(0, 0, 0, .3), inset 0 0 1em rgba(255, 255, 255, .25);
		text-shadow: -1px 1px 0 rgba(0, 0, 0, .3);

		[class*="icon-"]:before {
		content: '\e85e';
		float: left;
		line-height: 1.4em;
		}

		[class*="icon-error"]:before {
		content: '\e85d';
		}
		[class*="icon-warning"]:before {
		content: '\e865';
		}
		[class*="icon-success"]:before {
		content: '\e85b';
		}
		[class*="icon-cancel-outline"] {
		opacity: .5;
		float: right;
		cursor: pointer;
		position: absolute;
		top: 4px;
		right: 4px;
		&:before {
		content: '\e830';
		}
		&:hover {
		opacity: 1;
		}
		}

		ul {
		list-style: none;
		margin: 0;
		padding: 0;
		}
		border: solid 1px rgba(0, 0, 0, .3);
		position: relative;
		}
		.flashmsg-error {
		background: rgba(#9a1e1b, .9);
		}
		.flashmsg-info {
		background: rgba(#0b58a2, .9);
		}
		.flashmsg-success {
		background: rgba(#2d672d, .9);
		}
		.flashmsg-warning {
		background: rgba(#b58900, .9);
		}
		}

		time {
		font-weight: 600;
		}

		time.date-missing {
		opacity: .7;
		font-weight: 100;
		}

		.person.card {
		&.leader {
		border-left: solid #0b58a2 4px;
		}
		.card-title {
		line-height: 30px;
		border-bottom: thin #c0c8e1 solid;
		padding: 4px;
		img {
		margin-right: .5em;
		}
		}
		}

		.number {
		background: $colorGreyLight;
		border-radius: 2px;
		font-weight: 100;
		padding: 0 .5em;
		margin-right: 1em;
		box-shadow: 0 0 .5em rgba(0, 0, 0, .1);
		font-size: 1.2em;
		.key {
		color: white;
		text-shadow: -1px 1px 1px rgba(0, 0, 0, .7);
		&:after {
		content: " / ";
		}
		}
		.value {
		color: $colorGreyDark;
		text-shadow: none;
		font-weight: 700;
		}
		}

		// Formulaire
		.keyvalue-line {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		strong {
		flex: 2;
		line-height: 1.9em;
		}
		input {
		flex: 4;
		}
		button {
		flex: 1;
		}
		}

		.organizationtype {
		.card-title {
		small {
		display: inline-block;
		margin-left: 2em;
		line-height: 2em;
		flex: 1;
		flex-grow: 1;
		}
		}
		.sub {
		font-size: .8em;
		margin-left: 2em;
		}
		}

		.organization {
		&.closed > * {
		opacity: .5;
		}
		h2:before {
		font-family: fontello;
		line-height: 1.6em;
		padding: 0 4px 0 0;
		}

		&.interne {
		border-left: solid 4px #0b58a2;
		}

		// Composante
		&.type-composante h2:before {
		content: "\e877";
		}

		// Laboratoire
		&.type-2 h2:before,
		&.type-laboratoire h2:before {
		content: "\e891";
		}

		// Société
		&.type-3 h2:before,
		&.type-societe h2:before {
		content: "\e8a1";
		}

		// TYPE_ASSOCIATION
		//&.type-3 h2:before { content: "\e876";}

		// Association
		&.type-5 h2:before,
		&.type-association h2:before {
		content: "\e876";
		}

		// Financier
		&.type-6 h2:before,
		&.type-groupement-d-interet-financier h2:before {
		content: "\e88f";
		}

		// institution
		// collectivite-territoriale
		// etablissement-publique

		// TYPE_COLLECTIVITE/PUBLIQUE
		&.type-7 h2:before {
		content: "\e899";
		}

		// TYPE_COLLECTIVITE
		&.type-institution h2:before,
		&.type-collectivite-territoriale h2:before,
		&.type-etablissement-publique h2:before {
		content: "\e875";
		}

		/* // TYPE_ETABLISSEMENT
		&.type-7 h2:before { content: "\e876";}

		// TYPE_INSTITUTION
		&.type-8 h2:before { content: "\e876";}

		// TYPE_INCONNU
		&.type-9 h2:before { content: "\e87f";}/***/
		}

		.organization-full {
		.header {
		h2 {
		font-weight: 100;
		line-height: normal;
		font-size: 1.25em;
		color: $colorGreyLight;
		margin: 0;
		}
		h1 {
		border-bottom: solid thin lighten($colorGreyLight, 20%);
		border-top: solid thin lighten($colorGreyLight, 20%);
		padding: .3em 0;
		font-weight: 700;
		margin: .1em 0;
		}
		}
		}

		/ OSCAR SORTER /
		.oscar-sorter {
		font-size: .75em;
		.oscar-sorter-item {
		margin-right: 1em;
		color: $colorGreyMedium;
		i {
		display: none;
		}
		&.active {
		color: $colorGreyDark;
		text-decoration: underline;
		i {
		display: inline
		}
		}

		}
		}

		.icon-bar {
		background: white;
		}

		.cols {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		> * {
		flex: 12;
		}
		.col3 {
		flex: 3;
		min-width: 16.666666666666666666666%;
		max-width: 16.666666666666666666666%;
		}
		}

		.export-config {
		h2, h3 {
		margin: 0;
		padding: 0;
		}
		h3 {
		margin-top: .5em;
		}
		}

		.vue-loader {
		background: rgba(255, 255, 255, .95);
		position: fixed;
		z-index: 4092;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.content-loader {
		max-width: 900px;
		max-width: 80vw;
		}

		span {
		font-weight: 100;
		color: $brand-primary;
		font-size: 1em;
		animation-duration: .15s;
		animation-name: fadeinout;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		}
		}

		.btn-save.disabled {
		pointer-events: none;
		}

		.uc-frequency {
		text-align: center;
		.heading {
		.hours {
		background: rgba(255,255,255,.5);
		background: $brand-primary;
		color: white;
		font-weight: 100;
		padding: .5em 1em;
		cursor: pointer;
		}
		}

		.content {
		.line {
		background: rgba(255,255,255,.5);
		&:hover {
		background: rgba(255,255,255,.75);
		}
		}
		.hours-label {
		text-align: right;
		padding: .5em 1em;
		font-size: 1em;
		font-weight: 100;
		cursor: pointer;
		}
		.hours-selector {
		cursor: pointer;

		.icon-ok-circled { opacity: .3; }

		&.selected {
		.icon-ok-circled { opacity: 1; color: $brand-success }
		}

		&.forced {
		pointer-events: none;
		cursor: not-allowed;
		}

		&:hover {
		background: white;
		}
		}
		}
		}

		.progress-item {
		border-left: solid 4px $colorLight;
		&.progress-item-valid {
		border-left-color: $brand-success;
		.icon-progress:before {
		color: white;
		content: '\e85b';
		}
		.progress-cartouche {

		}
		}
		&.progress-item-inprogress {
		border-left-color: $colorBlue;
		.progress-cartouche {
		@extend .info;
		}
		}
		&.progress-item-cancel {
		border-left-color: $colorGreyDark;
		.progress-cartouche {
		}
		}
		&.progress-item-late {
		border-left-color: $brand-danger;
		.icon-progress:before {
		color: white;
		content: '\e865';
		}
		.progress-cartouche {

		}
		}
		&.progress-item-todo {
		border-left-color: $colorGreyMedium;
		.icon-progress:before {
		color: white;
		content: '\e885';
		}
		}
		&.progress-item-inprogress {
		border-left-color: $brand-success;
		.icon-progress:before {
		color: white;
		content: '\e8a8';
		}
		.progress-cartouche {
		@extend .info;
		}
		}
		&.progress-item-refused {
		border-left-color: $colorGreyDark;
		.icon-progress:before {
		color: white;
		content: '\e85d';
		}
		.progress-cartouche {
		}
		}
		&.progress-item-past {
		border-left-color: $brand-success;
		}

		.by-person.addon {
		a.link {
		color: $colorGreyDark;
		text-shadow: 0px 0px 1px rgba(255,255,255,.7);
		text-decoration: none;
		}
		}

		.icon-progress:before {
		content: '\e865';
		}
		}

		.repport {
		border-left: solid 4px #7f7f7f;
		&.repport-add {
		border-left-color: $brand-success;
		.icon-repport:before {
		content: '\e85c'
		}
		}
		&.repport-warnings {
		border-left-color: $colorOrange;
		.icon-repport:before {
		content: '\e865'
		}
		}
		&.repport-infos {
		border-left-color: $brand-success;
		.icon-repport:before {
		content: '\e85e'
		}
		}
		&.repport-notices {
		border-left-color: $colorBlue;
		.icon-repport:before {
		content: '\e805'
		}
		}
		&.repport-errors {
		border-left-color: $brand-danger;
		.icon-repport:before {
		content: '\e88a'
		}
		}
		&.repport-update {
		border-left-color: $colorBlue;
		.icon-repport:before {
		content: '\e88a'
		}
		}
		&.repport-error {
		border-left-color: $brand-danger;
		.icon-repport:before {
		content: '\e865'
		}
		}
		}

		.budget {
		font-size: 1.4em;
		color: $brand-secondary1;
		text-align: center;
		em {
		font-weight: 100;
		font-size: .5em;
		display: block;
		}
		strong {
		display: block;
		font-size: 1em;
		white-space: nowrap;
		}
		}
		No newline at end of file