change blue color on all the app
This commit is contained in:
parent
99cfd4f42c
commit
1f2935719c
21 changed files with 47 additions and 47 deletions
|
@ -1,4 +1,3 @@
|
||||||
$blue: #0069CC;
|
|
||||||
$light-blue: #1C7EC9;
|
$light-blue: #1C7EC9;
|
||||||
$lighter-blue: #C3D9FF;
|
$lighter-blue: #C3D9FF;
|
||||||
$black: #333333;
|
$black: #333333;
|
||||||
|
|
|
@ -22,6 +22,6 @@
|
||||||
%outline {
|
%outline {
|
||||||
&:active:not(:disabled),
|
&:active:not(:disabled),
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 3px solid $blue;
|
outline: 3px solid $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,26 +20,26 @@
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
border-top: 2px solid $blue;
|
border-top: 2px solid $blue-france-500;
|
||||||
border-left: 1px solid $border-grey;
|
border-left: 1px solid $border-grey;
|
||||||
border-right: 1px solid $border-grey;
|
border-right: 1px solid $border-grey;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
a {
|
a {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: none;
|
content: none;
|
||||||
|
|
|
@ -160,7 +160,7 @@
|
||||||
&.icon-only {
|
&.icon-only {
|
||||||
&::after {
|
&::after {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -223,7 +223,7 @@
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -309,5 +309,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,10 +21,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.featured {
|
&.featured {
|
||||||
border-top: 8px solid $blue;
|
border-top: 8px solid $blue-france-500;
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-admin-status-todo {
|
.card-admin-status-todo {
|
||||||
color: #246AC5;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-admin-title {
|
.card-admin-title {
|
||||||
|
@ -42,10 +42,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,7 +46,7 @@ strong {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[target="_blank"]::after {
|
a[target="_blank"]::after {
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-info {
|
.text-info {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-warning {
|
.text-warning {
|
||||||
|
|
|
@ -215,8 +215,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue-france-500;
|
||||||
box-shadow: 0px 0px 2px 1px $blue;
|
box-shadow: 0px 0px 2px 1px $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide the browser default invalidity indicator until the field is touched
|
// Hide the browser default invalidity indicator until the field is touched
|
||||||
|
@ -306,7 +306,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-reach-combobox-input]:focus {
|
[data-reach-combobox-input]:focus {
|
||||||
border-color: $blue;
|
border-color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-reach-combobox-token-list] {
|
[data-reach-combobox-token-list] {
|
||||||
|
@ -379,15 +379,15 @@
|
||||||
|
|
||||||
.header-section {
|
.header-section {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
margin-bottom: 3 * $default-padding;
|
margin-bottom: 3 * $default-padding;
|
||||||
border-bottom: 3px solid $blue;
|
border-bottom: 3px solid $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-subsection {
|
.header-subsection {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
margin-bottom: $default-padding;
|
margin-bottom: $default-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
.help-dropdown-title {
|
.help-dropdown-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-items li.help-dropdown-service {
|
.dropdown-items li.help-dropdown-service {
|
||||||
|
@ -25,7 +25,7 @@
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline;
|
display: inline;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,8 +13,8 @@
|
||||||
|
|
||||||
&.instruction {
|
&.instruction {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.en-instruction {
|
&.en-instruction {
|
||||||
|
|
|
@ -66,7 +66,7 @@ $landing-breakpoint: 1040px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.features-panel {
|
.features-panel {
|
||||||
background-color: $blue;
|
background-color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.features-panel-title {
|
.features-panel-title {
|
||||||
|
|
|
@ -66,8 +66,8 @@ $header-mobile-breakpoint: 550px;
|
||||||
|
|
||||||
&.active,
|
&.active,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
border-bottom: 2px solid $blue;
|
border-bottom: 2px solid $blue-france-500;
|
||||||
|
|
||||||
&.contact-link {
|
&.contact-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -86,7 +86,7 @@ $header-mobile-breakpoint: 550px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -165px;
|
left: -165px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border: 2px solid $blue;
|
border: 2px solid $blue-france-500;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
@ -116,7 +116,7 @@ $header-mobile-breakpoint: 550px;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-color: rgba(255, 255, 255, 0);
|
border-color: rgba(255, 255, 255, 0);
|
||||||
border-bottom-color: $blue;
|
border-bottom-color: $blue-france-500;
|
||||||
border-width: 18px;
|
border-width: 18px;
|
||||||
margin-left: -18px;
|
margin-left: -18px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.download-white {
|
.icon.download-white {
|
||||||
background-color: $blue;
|
background-color: $blue-france-500;
|
||||||
box-shadow: 0px 0px 1px 2px $blue;
|
box-shadow: 0px 0px 1px 2px $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
&.type-header-section {
|
&.type-header-section {
|
||||||
&,
|
&,
|
||||||
.head {
|
.head {
|
||||||
background-color: $blue;
|
background-color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.head .icon {
|
.head .icon {
|
||||||
|
|
|
@ -18,7 +18,7 @@ $procedure-description-line-height: 22px;
|
||||||
|
|
||||||
.simple {
|
.simple {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -61,7 +61,7 @@ $procedure-description-line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.procedure-auto-archive-title {
|
.procedure-auto-archive-title {
|
||||||
border-bottom: 1px dotted $blue;
|
border-bottom: 1px dotted $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.procedure-description {
|
.procedure-description {
|
||||||
|
|
|
@ -105,7 +105,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-reach-combobox-input]:focus {
|
[data-reach-combobox-input]:focus {
|
||||||
border-color: $blue;
|
border-color: $blue-france-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
@import "colors";
|
||||||
$dark-grey: #333333;
|
$dark-grey: #333333;
|
||||||
$light-grey: #999999;
|
$light-grey: #999999;
|
||||||
$blue: rgba(61, 149, 236, 1);
|
$blue: rgba(61, 149, 236, 1);
|
||||||
|
@ -86,11 +87,11 @@ $segmented-control-item-border-radius: 2 * $default-space;
|
||||||
.segmented-control-item {
|
.segmented-control-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
border: 2px solid $blue;
|
border: 2px solid $blue-france-500;
|
||||||
margin-right: -2px;
|
margin-right: -2px;
|
||||||
padding-left: $segmented-control-item-horizontal-padding;
|
padding-left: $segmented-control-item-horizontal-padding;
|
||||||
padding-right: $segmented-control-item-horizontal-padding;
|
padding-right: $segmented-control-item-horizontal-padding;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
border-radius: $segmented-control-item-border-radius 0px 0px $segmented-control-item-border-radius;
|
border-radius: $segmented-control-item-border-radius 0px 0px $segmented-control-item-border-radius;
|
||||||
|
@ -109,7 +110,7 @@ $segmented-control-item-border-radius: 2 * $default-space;
|
||||||
}
|
}
|
||||||
|
|
||||||
.segmented-control-item-active {
|
.segmented-control-item-active {
|
||||||
background-color: $blue;
|
background-color: $blue-france-500;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -146,11 +147,11 @@ $big-number-card-padding: 2 * $segmented-control-item-border-radius;
|
||||||
font-size: 90px;
|
font-size: 90px;
|
||||||
line-height: 90px;
|
line-height: 90px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.big-number-card-detail {
|
.big-number-card-detail {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
@include vertical-padding($default-spacer);
|
@include vertical-padding($default-spacer);
|
||||||
|
|
||||||
&.header-section {
|
&.header-section {
|
||||||
color: $blue;
|
color: $blue-france-500;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -49,8 +49,8 @@ input:checked + .toggle-switch-control {
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus + .toggle-switch-control {
|
input:focus + .toggle-switch-control {
|
||||||
border-color: $blue;
|
border-color: $blue-france-500;
|
||||||
box-shadow: 0px 0px 2px 1px $blue;
|
box-shadow: 0px 0px 2px 1px $blue-france-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + .toggle-switch-control::before {
|
input:checked + .toggle-switch-control::before {
|
||||||
|
|
Loading…
Reference in a new issue