Commit 99a4ddc1 authored by Stephane Bouvry's avatar Stephane Bouvry
Browse files

Mise en page

parent bc4e8121

ui/src/oscar-css.js

+0 −1
Changes for ui/src/oscar-css.js: 0 added lines, 1 removed line.
Original line number Diff line number Diff line 
//import 'bootstrap/dist/css/bootstrap.css';

import './oscar-css.scss';

import bootstrap from 'bootstrap/js/index.umd.js';

// import 'bootstrap';

import {createApp} from "vue";

import Tooltip from "./components/Tooltip.vue";

import momentFilter from "./utils/MomentFilter.js";

ui/src/oscar-css.scss

+1 −152
Changes for ui/src/oscar-css.scss: 1 added line, 152 removed lines.
Original line number Diff line number Diff line
@@ -92,6 +92,7 @@ $footerHeight: 80px; 
@import "styles/oscar-privatize";

@import "styles/oscar-timesheet";

@import "styles/oscar-cartouche";

@import "styles/oscar-card";

@import "styles/oscar-fiche-activity";



.list-simple {
@@ -505,159 +506,7 @@ span[class*="status-400"] .icon:before { 






//////////////////////////////////////////////////////////////////////////////

// CARD

.card {

  border: solid thin $colorGreyLight;

  background: $color-white;

  border-radius: 0;

  display: block;

  margin: 1em 0;

  padding: .6em;

  box-shadow: -0em -0em .3em rgba(0, 0, 0, 0.1);

  &:hover {

    border-color: $colorGreyMedium;

    background-color: white;

  }

  &.closed {

    border-left-color: $colorGreyMedium;

  }

  .card-subtitle {

    border-bottom: thin solid $colorGreyUltraLight;

    font-size: .9em;

    color: $colorGreyMedium;

    margin-bottom: .5em;

    display: flex;

    font-size: 1em;

    align-items: center;

    .onright {

      flex: 0 0 auto;

      margin-left: auto;

    }

    >* {

      margin-right: .3em;

      &:last-child {

        margin-right: 0;

      }

    }

  }

  .card-title {

    display: flex;

    font-size: 1.25em;

    line-height: 1em;

    padding: 0;

    margin: 0;

    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, .buttons {

      flex: 0 0 auto;

      text-align: right;

      margin-left: auto;

//      background: $colorGreyUltraLight;

    }



    .buttons {

      .btn {

        opacity: .5;

        &:hover {

          opacity: 1;

        }

      }

    }

  }

  .card-content {

    background: #fbfbfb;

    padding: .6em;



    .infos {

      padding: 1em 2em;

    }

  }



  .card-buttons, .card-buttons.btn-group {

    @extend .btn-group;

    display: flex;

    flex-direction: row;

    align-items: stretch;

    justify-content: center;

    align-content: center;

    border-top: thin solid $colorGreyUltraLight;

    padding: .5em 0 .3em;



    >.btn {

      flex: 0 0 auto;

      &:first{

        border-radius: 4px 0 0 4px;

      }

    }



    &.sm {

      >.btn {

        font-size: .8em;

      }

    }



    /** Boutons "light" **/

    &.shadow {

      transition: opacity .3s;

      opacity: .3;

    }

  }





  &:has(.card-content){

    .card-title {

      border-bottom: thin solid $colorGreyUltraLight;

    }

  }



  &:has(.shadow):hover {

    .shadow {

      opacity: 1;

    }

  }



  &.state {

    border-left: 4px $colorGreyMedium solid;

  }



  &.danger,&.error {

    border-left: 4px $danger solid;

  }



  &.disabled {

    background-color: rgba(255,255,255,.75);

    > * {

      opacity: .7;

    }

    .card-title .title{

      text-decoration: line-through;

    }

    margin-left: 1em;

  }



  &.card-list-item {

    h5 {

      color: $colorGreyMedium;

      font-size: .8em;

      display: inline-block;

      &:after {

        content: ":"

      }

    }

  }

}



.compactable {

  &.compact {

ui/src/styles/_oscar-card.scss

0 → 100644
+171 −0
Changes for ui/src/styles/_oscar-card.scss: 171 added lines, 0 removed lines.
Original line number Diff line number Diff line 
//////////////////////////////////////////////////////////////////////////////

// CARD

.card {

  //border: solid thin $colorGreyLight;

  border: solid thin var(--bs-primary-grey);

  background: $color-white;

  border-radius: 0;

  display: block;

  margin: 1em 0;

  padding: .6em;

  box-shadow: -0em -0em .25em rgba(0, 0, 0, 0.1);

  &.closed {

    border-left-color: $colorGreyMedium;

  }



  .card-title {

    display: flex;

    font-size: 1.25em;

    line-height: 1em;

    padding: 0;

    margin: 0;

    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, .buttons {

      flex: 0 0 auto;

      text-align: right;

      margin-left: auto;

      //      background: $colorGreyUltraLight;

    }



    .buttons {

      .btn {

        opacity: .5;

        &:hover {

          opacity: 1;

        }

      }

    }

  }



  .card-subtitle {

    border-bottom: thin solid rgba($primary, .25);

    background: linear-gradient(to top, rgba($primary, .07), rgba($primary, 0));

    font-size: .9em;

    color: $colorGreyMedium;

    margin-bottom: .5em;

    display: flex;

    font-size: 1em;

    align-items: center;

    .onright {

      flex: 0 0 auto;

      margin-left: auto;

    }

    >* {

      margin-right: .3em;

      &:last-child {

        margin-right: 0;

      }

    }

  }



  .card-content {

    background: linear-gradient(to top, rgba($primary, 0), rgba($primary, .07));

    background-repeat: no-repeat;

    background-size: 100% 30px;

    background-position: top;

    padding: .6em;

    .infos {

      padding: 1em 2em;

    }

  }



  .card-buttons, .card-buttons.btn-group {

    @extend .btn-group;

    display: flex;

    flex-direction: row;

    align-items: stretch;

    justify-content: center;

    align-content: center;

    border-top: thin solid $colorGreyUltraLight;

    padding: .5em 0 .3em;



    >.btn {

      flex: 0 0 auto;

      &:first{

        border-radius: 4px 0 0 4px;

      }

    }



    &.sm {

      >.btn {

        font-size: .8em;

      }

    }



    /** Boutons "light" **/

    &.shadow {

      transition: opacity .3s;

      opacity: .3;

    }

  }





  &:has(.card-content){

    .card-title {

      border-bottom: thin solid rgba(var(--bs-secondary-white), .9);

    }

  }



  &:has(.shadow):hover {

    .shadow {

      opacity: 1;

    }

  }



  &.state {

    border-left: 4px $colorGreyMedium solid;

  }



  &.danger,&.error {

    border-left: 4px $danger solid;

  }



  &.disabled {

    background-color: rgba(255,255,255,.75);

    > * {

      opacity: .7;

    }

    .card-title .title{

      text-decoration: line-through;

    }

    margin-left: 1em;

  }



  &.card-list-item {

    h5 {

      color: $colorGreyMedium;

      font-size: .8em;

      display: inline-block;

      &:after {

        content: ":"

      }

    }

  }

}



$bootstrapNames: ("info","danger","waring","success");

@each $name, $color in $theme-colors {

  .card.#{$name} {

    /** Foo **/

    background: var(--bs-#{$name});

    color: var(--bs-#{$name}-white);

    border-color: var(--bs-#{$name}-medium);

    &:has(.card-content){

      .card-title {

        border-bottom: thin solid var(--bs-#{$name}-medium);

      }

    }

  }

}
 
 No newline at end of file

ui/src/styles/_oscar-variables.scss

+16 −14
Changes for ui/src/styles/_oscar-variables.scss: 16 added lines, 14 removed lines.
Original line number Diff line number Diff line
@@ -21,26 +21,28 @@ 
    @return color.adjust($color, $lightness: -20%, $saturation: -30%);

  }

}

// Violet

$primary: #3F357A;

$secondary: #752972;

$thirdary: #256A6A;



//// Bleu

//$primary: #2a4c5d;

//$secondary: #463379;

//$thirdary: #405e2b;

//

//// Vert



// //Violet

//$primary: #3F357A;

//$secondary: #752972;

//$thirdary: #256A6A;



// Bleu

$primary: #2a4c5d;

$secondary: #463379;

$thirdary: #405e2b;



//// Vert (BOF)

//$primary: #22582d;

//$secondary: #6C7915;

//$thirdary: #283e68;

//

//// Rouge



// Rouge

//$primary: #753a3a;

//$secondary: #3b4879;

//$thirdary: #4c5b18;

//





//// Green

//$primary: #372f5a;

//$secondary: #236972;

ui/src/views/ActivityListItem.vue

+1 −1
Changes for ui/src/views/ActivityListItem.vue: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -36,7 +36,7 @@ 
        </div>

      </strong>

    </h3>

    <div class="cord-content">

    <div class="card-content">

      <div class="row compacted">

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

          <section class="border-top" v-if="activity.eotp">