Projet

Général

Profil

0001-misc-declare-css-variables-for-main-colours.patch

approche 1 - Frédéric Péters, 30 novembre 2022 14:23

Télécharger (5,21 ko)

Voir les différences: 

Subject: [PATCH] misc: declare css variables for main colours (#.....)


 gadjo/static/css/_forms.scss | 14 +++++------
 gadjo/static/css/gadjo.scss  | 47 ++++++++++++++++++++++++++++++------
 2 files changed, 47 insertions(+), 14 deletions(-)
gadjo/static/css/_forms.scss
11 11 
$widget-focus-outline-offset: 0;
12 12 

  		




  13
  13
  
    
$button-color: $primary-color;

  		




  14
  
  
    
$button-cancel-color: darken(grayscale($button-color), 10%);

  		




  
  14
  
    
$button-cancel-color: var(--inert-gray);

  		




  15
  15
  
    
$button-delete-color: #CD2026;

  		




  16
  16
  
    
$button-submit-color: #215D9C;

  		




  17
  17
  
    
$button-focus-outline: $widget-focus-outline !default;

  		




  ......




  106
  106
  
    
	&[aria-pressed=true], &:hover {

  		




  107
  107
  
    
		background: $button-color;

  		




  108
  108
  
    
		color: white;

  		




  109
  
  
    
		border-color: darken($button-color, 20%);

  		




  
  109
  
    
		border-color: $darker-primary-color20;

  		




  110
  110
  
    
	}

  		




  111
  
  
    
	&:active { border-color: darken($button-color, 10%); }

  		




  
  111
  
    
	&:active { border-color: $darker-primary-color10; }

  		




  112
  112
  
    
	&:focus {

  		




  113
  113
  
    
		@if $button-focus-outline == none {

  		




  114
  114
  
    
			outline: 1px dotted $button-background;

  		




  ......




  143
  143
  
    
	&:hover {

  		




  144
  144
  
    
		background: #eee;

  		




  145
  145
  
    
		color: $button-cancel-color;

  		




  146
  
  
    
		border-color: darken($button-cancel-color, 20%);

  		




  
  146
  
    
		border-color: var(--inert-gray30);

  		




  147
  147
  
    
	}

  		




  148
  
  
    
	&:active { border-color: darken($button-cancel-color, 10%); }

  		




  
  148
  
    
	&:active { border-color: var(--inert-gray20); }

  		




  149
  149
  
    
	&:focus {

  		




  150
  
  
    
		outline-color: darken($button-cancel-color, 10%);

  		




  
  150
  
    
		outline-color: var(--inert-gray20);

  		




  151
  151
  
    
	}

  		




  152
  152
  
    
}

  		




  153
  153
  
    

  		




  ......




  250
  250
  
    

  		




  251
  251
  
    
label input[type="radio"], label input[type="checkbox"] {

  		




  252
  252
  
    
	&[disabled] + span {

  		




  253
  
  
    
		color: lighten($font-color, 30%);

  		




  
  253
  
    
		color: $inert-gray;

  		




  254
  254
  
    
	}

  		




  255
  255
  
    
}

  		




  256
  256
  
    

  		












  

    
      gadjo/static/css/gadjo.scss
    
  





  3
  3
  
    
@import 'opensans';

  		




  4
  4
  
    
@import 'utils';

  		




  5
  5
  
    

  		




  6
  
  
    
$font-color: #3c3c33;

  		




  
  6
  
    
$font-color: var(--font-color);

  		




  7
  7
  
    
$mobile-limit: 760px;

  		




  8
  8
  
    
$font-family: "Open Sans", sans-serif;

  		




  9
  9
  
    
$sidepage-background: white;

  		




  ......




  15
  15
  
    

  		




  16
  16
  
    
$cell-border-radius: 3px;

  		




  17
  17
  
    

  		




  
  18
  
    
$primary-color: var(--primary-color);

  		




  
  19
  
    
$secondary-color: var(--secondary-color);

  		




  
  20
  
    
$darker-primary-color: var(--darker-primary-color30);

  		




  
  21
  
    
$darker-primary-color20: var(--darker-primary-color20);

  		




  
  22
  
    
$darker-primary-color10: var(--darker-primary-color10);

  		




  
  23
  
    
$lighter-primary-color: var(--lighter-primary-color20);

  		




  
  24
  
    
$link-color: var(--link-color);

  		




  
  25
  
    
$inert-gray: var(--inert-gray);

  		




  
  26
  
    

  		




  18
  27
  
    
// blue

  		




  19
  
  
    
$primary-color: #386ede; $secondary-color: #00d6eb;

  		




  
  28
  
    
$blue: #386ede;

  		




  
  29
  
    
$cyan: #00d6eb;

  		




  20
  30
  
    

  		




  21
  31
  
    
// red/orange

  		




  22
  32
  
    
//$primary-color: #ff375e; $secondary-color: #ff5a47;

  		




  ......




  24
  34
  
    
// purple

  		




  25
  35
  
    
//$primary-color: #6f2b92; $secondary-color: #e72588;

  		




  26
  36
  
    

  		




  27
  
  
    
$link-color: $primary-color;

  		




  
  37
  
    

  		




  
  38
  
    

  		




  
  39
  
    
/* CSS variables */

  		




  
  40
  
    

  		




  
  41
  
    
$_primary_color: $blue;

  		




  
  42
  
    
$_secondary_color: $cyan;

  		




  
  43
  
    

  		




  
  44
  
    
html {

  		




  
  45
  
    
	--primary-color: #{$_primary_color};

  		




  
  46
  
    
	--secondary-color: #{$_secondary_color};

  		




  
  47
  
    
	--darker-primary-color30: #{darken($_primary_color, 30%)};

  		




  
  48
  
    
	--darker-primary-color20: #{darken($_primary_color, 20%)};

  		




  
  49
  
    
	--darker-primary-color10: #{darken($_primary_color, 10%)};

  		




  
  50
  
    
	--lighter-primary-color30: #{lighten($_primary_color, 30%)};

  		




  
  51
  
    
	--lighter-primary-color20: #{lighten($_primary_color, 20%)};

  		




  
  52
  
    
	--lighter-primary-color10: #{lighten($_primary_color, 10%)};

  		




  
  53
  
    
	--inert-gray: darken(grayscale($_primary_color), 10%);

  		




  
  54
  
    
	--inert-gray20: darken(grayscale($_primary_color), 20%);

  		




  
  55
  
    
	--inert-gray30: darken(grayscale($_primary_color), 30%);

  		




  
  56
  
    
	--font-color: #3c3c33;

  		




  
  57
  
    
	--font-color-light: #666;

  		




  
  58
  
    
	--link-color: #{$_primary_color};

  		




  
  59
  
    
	--background: #ecf0f3;

  		




  
  60
  
    
	--white: white;

  		




  
  61
  
    
}

  		




  28
  62
  
    

  		




  29
  63
  
    
/* generalities */

  		




  30
  64
  
    

  		




  ......




  42
  76
  
    
		font-size: 14px;

  		




  43
  77
  
    
	}

  		




  44
  78
  
    
	color: $font-color;

  		




  45
  
  
    
	background: #ecf0f3;

  		




  46
  79
  
    
	background: linear-gradient(#ecf0f3, white);

  		




  47
  80
  
    
}

  		




  48
  81
  
    

  		




  ......




  1003
  1036
  
    

  		




  1004
  1037
  
    
#sidepage ul#sidepage-menu li:hover a,

  		




  1005
  1038
  
    
#sidepage ul#sidepage-menu .active a {

  		




  1006
  
  
    
	color: darken($primary-color, 30%);

  		




  
  1039
  
    
	color: $darker-primary-color;

  		




  1007
  1040
  
    
	filter: none;

  		




  1008
  1041
  
    
}

  		




  1009
  1042
  
    

  		




  ......




  1076
  1109
  
    
	border-radius: 2px;

  		




  1077
  1110
  
    
}

  		




  1078
  1111
  
    

  		




  1079
  
  
    
$string-color: str-slice($primary-color + '', 2);

  		




  
  1112
  
    
$string-color: str-slice($blue + '', 2);

  		




  1080
  1113
  
    

  		




  1081
  1114
  
    
$appicons: add, agendas, announces, bankcard, book, calendar, cards, categories, clock, counter, data, facturier, forms, gis, grid, home, identity-management, lingo, mail, management, organizational-units, passerelle, password, phone, portal, portal-agent, porte-doc, roles, security, services, settings, statistics, studio, submission, system, texts, theme, users, workflows;

  		




  1082
  1115
  
    

  		




  ......




  1181
  1214
  
    
				padding: 5px 10px;

  		




  1182
  1215
  
    
				border: 0;

  		




  1183
  1216
  
    
				&:hover {

  		




  1184
  
  
    
					background: lighten($primary-color, 20%);

  		




  
  1217
  
    
					background: $lighter-primary-color;

  		




  1185
  1218
  
    
				}

  		




  1186
  1219
  
    
			}

  		




  1187
  1220
  
    
		}

  		




  1188
  
  
    
-