add colors variables from lib
This commit is contained in:
Tykayn
tykayn
parent
e4031a9768
commit
34b7e8c68e
10 changed files with 175 additions and 72 deletions
|
|
@ -41,13 +41,28 @@ $main-bg-color-active: #6565ff;
|
|||
|
||||
$event-blue: #2D559F;
|
||||
$notification-green: #315E5D;
|
||||
// find where --------------------
|
||||
|
||||
$bg-color-button: #f4f6fc;
|
||||
$bg-color-nav: #1B1D27;
|
||||
$bg-color-chat: #f5f5f5;
|
||||
$shadow-color : #dedede;
|
||||
|
||||
|
||||
// CSC project variables
|
||||
|
||||
$csc-light-yellow-color: #FFF3D8;
|
||||
$csc-magic-color: #EEA100;
|
||||
$csc-bg-color: #F5F5F5;
|
||||
$csc-title-color: #000;
|
||||
|
||||
$csc-nav-color: $main-color-400;
|
||||
$csc-chips-bg-color: $main-color-400;
|
||||
|
||||
$csc-textarea-color : #1B1D27;
|
||||
$csc-filters-box-color : #E3EAF1;
|
||||
|
||||
$bot-bubble: $csc-light-yellow-color;
|
||||
|
||||
// spacing --------------------------
|
||||
|
||||
$spacing-0: 2px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
|
||||
<!-- delete button from_text-->
|
||||
<button class="delete-button button" (click)="emptyText('fromText')">x</button>
|
||||
<textarea name="from_text" id="from_text" cols="30" rows="10" [(ngModel)]="fromText"></textarea>
|
||||
<textarea name="from_text" id="from_text" cols="30" rows="10"
|
||||
placeholder=""
|
||||
[(ngModel)]="fromText"></textarea>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
|
|
|
|||
|
|
@ -14,14 +14,24 @@
|
|||
<div id="translation_request">
|
||||
|
||||
<div class="helper">
|
||||
<span>
|
||||
|
||||
Original question
|
||||
</span>
|
||||
<i class="ri-arrow-right-line"></i>
|
||||
<span>
|
||||
|
||||
Summarized question by AI
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<sae-translate-texts></sae-translate-texts>
|
||||
</div>
|
||||
<!-- analyse de question-->
|
||||
<div id="question_alaysis">
|
||||
<h2 class="title">
|
||||
Question analysis
|
||||
</h2>
|
||||
<!--filters-->
|
||||
<!-- advanced filters-->
|
||||
<sae-filters-group></sae-filters-group>
|
||||
|
|
|
|||
|
|
@ -18,21 +18,24 @@
|
|||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" routerLink="home" routerLinkActive="active-link">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" routerLink="home" routerLinkActive="is-active">
|
||||
<img src="csc_logo.svg" alt="logo">
|
||||
CSC Solution Matcher
|
||||
CSC Solution Matcher
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
|
||||
<!-- <a class="navbar-item">-->
|
||||
<!-- Home-->
|
||||
<!-- </a>-->
|
||||
<a class="navbar-item is-active">
|
||||
<i class="ri-admin-line"></i>
|
||||
Admin
|
||||
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
|
||||
<i class="ri-compass-3-line"></i>
|
||||
Quick Start
|
||||
|
||||
</a>
|
||||
|
|
@ -42,6 +45,7 @@
|
|||
</a>
|
||||
<a class="navbar-item">
|
||||
<!-- user -->
|
||||
<i class="ri-user-2-fill"></i>
|
||||
borhène
|
||||
</a>
|
||||
|
||||
|
|
@ -49,5 +53,5 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<app-alert-box></app-alert-box>
|
||||
<!-- <app-alert-box></app-alert-box>-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
// TODO importer les variables de la librairie
|
||||
@use '../../../../styles/variables-barrel' as variables;
|
||||
.top-navigation{
|
||||
background: variables.$bg-color-nav;
|
||||
color: white;
|
||||
.is-active{
|
||||
color: #7FB8E7;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouterLink, RouterLinkActive} from '@angular/router';
|
||||
import {AlertBox} from '../../../../../../my-workspace/projects/sae-lib/alert-box/alert-box';
|
||||
// import {AlertBox} from '../../../../../../my-workspace/projects/sae-lib/alert-box/alert-box';
|
||||
|
||||
// import {SaeLib} from 'sae-lib';
|
||||
|
||||
@Component({
|
||||
selector: 'app-top-navigation',
|
||||
imports: [
|
||||
RouterLink,
|
||||
RouterLinkActive,
|
||||
AlertBox
|
||||
// AlertBox
|
||||
],
|
||||
templateUrl: './top-navigation.html',
|
||||
styleUrl: './top-navigation.scss'
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
/**
|
||||
* Fichier centralisé pour importer les styles de sae-lib
|
||||
* À utiliser dans les composants avec: @use '@sae-lib/src/styles/_variables' as variables;
|
||||
*/
|
||||
|
||||
@forward '@sae-lib/src/styles/_variables.scss';
|
||||
@forward '@sae-lib/src/styles/_forms.scss';
|
||||
@forward '@sae-lib/src/styles/_global.scss';
|
||||
@forward '@sae-lib/src/styles/_shadows.scss';
|
||||
|
|
@ -1,5 +1,2 @@
|
|||
// Ce fichier regroupe toutes les variables de sae-lib pour faciliter l'importation
|
||||
@forward 'sae-lib/src/styles/_variables.scss';
|
||||
//@forward '../../my-workspace/projects/sae-lib/src/styles/_forms';
|
||||
//@forward '../../my-workspace/projects/sae-lib/src/styles/_global';
|
||||
//@forward '../../my-workspace/projects/sae-lib/src/styles/_shadows';
|
||||
@forward 'sae-lib/src/styles/variables.scss';
|
||||
|
|
|
|||
125
sae-csc/src/styles/app/styles/pages/_main.scss
Normal file
125
sae-csc/src/styles/app/styles/pages/_main.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
@use '../../../../styles/variables-barrel' as variables;
|
||||
|
||||
#main_page {
|
||||
main {
|
||||
padding: 50px 64px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.helper {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%; /* 22.4px */
|
||||
|
||||
span {
|
||||
margin-right: 12px;
|
||||
margin-left: 12px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.delete-button{
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
background: #F2F2F2;
|
||||
color: grey;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
left: 92%;
|
||||
top: 50px;
|
||||
width: 37px;
|
||||
&:hover{
|
||||
background: #888;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
width: 648px;
|
||||
height: 236px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
background: #FFF;
|
||||
box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
|
||||
border-width: 0;
|
||||
padding: 11px 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#question_alaysis {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.filter-group {
|
||||
|
||||
.search{
|
||||
display: flex;
|
||||
min-height: 42px;
|
||||
max-height: 42px;
|
||||
padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px);
|
||||
align-items: center;
|
||||
gap: var(--Spacing-Spacing-20, 8px);
|
||||
align-self: stretch;
|
||||
}
|
||||
.chips-listing {
|
||||
margin-top: 16px;
|
||||
border-radius: 4px;
|
||||
background: variables.$csc-filters-box-color;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
padding: 12px;
|
||||
|
||||
|
||||
.chips {
|
||||
background: variables.$csc-chips-bg-color;
|
||||
color: white;
|
||||
border-radius: 100px;
|
||||
padding: 12px 16px;
|
||||
border: solid 1px variables.$csc-chips-bg-color;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-navigation {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 16px 64px 16px 1181px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background: white;
|
||||
|
||||
.next-step {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid white;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%), #FFF;
|
||||
min-width: 200px;
|
||||
|
||||
|
||||
color: var(--color-text-invert, #FFF);
|
||||
text-align: center;
|
||||
font-size: var(--Font-Base, 14px);
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
|
||||
letter-spacing: 1.12px;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +1,2 @@
|
|||
/*
|
||||
* Fichier principal pour les styles globaux
|
||||
* Il contient les variables et styles réutilisables dans toute l'application
|
||||
*/
|
||||
|
||||
// Définir les couleurs de base de l'application
|
||||
$primary-color: #3f51b5;
|
||||
$secondary-color: #ff4081;
|
||||
$bg-color-nav: #333333;
|
||||
$text-color: #ffffff;
|
||||
|
||||
// Autres variables globales
|
||||
$spacing-unit: 8px;
|
||||
$border-radius: 4px;
|
||||
|
||||
// Mixins utiles
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin shadow-light {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
// Styles globaux
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Classes d'utilité
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: $spacing-unit;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: $spacing-unit;
|
||||
}
|
||||
@use "app/styles/pages/main.scss";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue