You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mvfront-react/styles/scss/_app.scss

447 lines
7.3 KiB

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap');
body {
// background-color: $mv-blue-color;
// background-color: #110081;
font-weight: 500;
}
h1,
h2,
h3 {
font-family: 'DM Serif Display', serif !important;
}
body,
h4,
h5,
p,
button {
font-family: 'DM Sans', sans-serif !important;
}
::placeholder {
font-family: 'DM Sans', sans-serif !important;
}
.rowNoMargin {
margin-left: 0px !important;
margin-right: 0px !important;
}
.logo-text > h1 {
font-size: 16px;
font-weight: bold;
margin: 0;
line-height: 1;
}
.bold {
font-weight: bold;
}
.logo-text > h1 > small {
display: block;
letter-spacing: 0.09em;
}
html,
body,
main {
min-height: 100vh;
}
html,
body,
main,
main > .div {
width: 100%;
}
/* main {
// background: url("../../public/back.svg"), rgb(10, 0, 76, 0.64);
} */
$blur-radius: 30px;
#blur_background {
position: fixed;
top: -$blur-radius;
right: -$blur-radius;
bottom: -$blur-radius;
left: -$blur-radius;
z-index: -1;
background: url('../../public/back.svg'), #110081;
background-size: auto 100%;
background-repeat: no-repeat;
// filter: url('/media/blur.svg#blur');
-webkit-filter: blur($blur-radius);
filter: blur($blur-radius);
}
@include media-breakpoint-up('xxl') {
#blur_background {
background-size: 100% auto;
}
}
header {
position: fixed;
z-index: 10;
width: 100%;
}
hr {
border: none;
border-top: 1px solid $mv-light-color;
width: 100%;
margin: auto;
}
ul.sortable,
li.sortable {
padding: 0;
margin: 0 0 0 0;
list-style-type: none;
}
li.sortable {
margin: 0 0 15px 0;
}
.pointer {
cursor: pointer;
}
.modal {
color: $mv-dark-color;
}
/* card Vote */
.cardVote {
background-color: $mv-light-color;
margin: 1em 0;
color: $mv-dark-color;
border-radius: 0.15em;
padding: 16px;
justify-content: space-between;
}
.cardVote .nowrap {
white-space: nowrap;
}
.cardVote hr {
border-top: 1px solid $mv-dark-color;
margin: 10px 0;
}
/* checkbox */
/* The radio */
.radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkround {
position: absolute;
top: 6px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border-color: $mv-blue-color;
border-style: solid;
border-width: 2px;
border-radius: 50%;
}
.checkround.checkround-gray {
border-color: $gray-600;
}
/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkround {
background-color: #fff;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkround:after {
content: '';
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .checkround:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radio .checkround:after {
left: 2px;
top: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: $mv-blue-color;
}
/*.radio .checkround.checkround-gray:after {
background: $gray-600;
}*/
/* The check */
.check {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
padding-right: 15px;
cursor: pointer;
font-size: 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.check input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
margin-left: calc(50% - 12px);
top: 0;
left: 0;
height: 24px;
width: 24px;
background-color: #fff;
border-color: $mv-blue-color;
border-style: solid;
border-width: 2px;
}
@include media-breakpoint-down(md) {
.checkmark {
position: absolute;
margin-left: 0;
top: 3px;
}
}
/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark {
background-color: #fff;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:before {
content: '';
display: none;
}
/* Show the checkmark when checked */
.check input:checked ~ .checkmark:before {
display: block;
}
/* Style the checkmark/indicator */
.check .checkmark:before {
width: 10px;
height: 15px;
margin: 8px;
border: solid;
border-color: #fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
}
.cust-btn {
margin-bottom: 10px;
background-color: $mv-blue-color;
border-width: 2px;
border-color: $mv-blue-color;
color: #fff;
}
.cust-btn:hover {
border-color: $mv-blue-color;
background-color: #fff;
color: $mv-blue-color;
border-radius: 20px;
transform-style: 2s;
}
/** table profiles **/
.profiles thead,
.profiles tbody,
.profiles tr,
.profiles th,
.profiles td,
.profiles thead th {
border-color: $mv-blue-color;
color: $mv-blue-color;
}
/** react multi email **/
.react-multi-email > span[data-placeholder] {
padding: 0.25em !important;
}
/** GLOBALS **/
section {
width: 100%;
}
p {
font-size: 16px;
}
h2 {
font-size: 56px;
line-height: 56px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 24px;
line-height: 32px;
}
h5 {
font-size: 18px;
font-weight: bold;
}
/*.btn img {
width: 24px !important;
height: 24px !important;
margin: 0px 16px;
}*/
.cursorPointer {
cursor: pointer;
}
.sectionAjouterCandidat {
display: flex;
flex-direction: column;
}
.ajouterCandidat {
width: 50%;
margin: 10px auto;
}
.input-group-text {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: transparent;
border: none;
border-radius: 0px;
}
.form-control {
height: auto;
background: transparent;
// color: white;
border: none;
}
.form-control:focus {
background: transparent;
border: none;
box-shadow: none;
}
/*
.form-control::placeholder {
color: white;
}*/
.btnTrash {
background-color: transparent;
color: white;
border: none;
}
.btnValidateCandidate {
background: transparent;
width: auto;
opacity: 0.4;
margin: 250px auto 0px;
}
@media screen and (min-width: 931px) {
header {
display: none !important;
}
}
.result {
display: flex;
margin: auto;
justify-content: space-around;
}
ol.result > li {
text-align: center;
}
.border-dashed {
border-style: dashed !important;
}
.text-muted {
color: #8f88ba !important;
// opacity: 0.5;
}
.text-bg-light {
background: #f2f0ff !important;
}
.hide {
display: none;
}
.noshadow {
box-shadow: unset !important;
}
.list_input {
border: 2px solid rgba(0, 0, 0, 0.25);
border-radius: 0px;
font-weight: bold;
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);
}
.list_input input[type='text']:focus {
outline: none;
}
a, a:hover {
text-decoration: none;
}
.bg-blue {
background-color: $mv-blue-color !important;
}
.no-shadow {
box-shadow: unset !important;
}