mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
520 lines
10 KiB
SCSS
520 lines
10 KiB
SCSS
// Access to Bootstrap variables and mixins
|
|
@import 'ChillMainAssets/module/bootstrap/shared';
|
|
|
|
// Chill variables
|
|
@import './scss/chill_variables';
|
|
|
|
// Chill mixins
|
|
@import './scss/mixins';
|
|
|
|
// Chill buttons
|
|
@import './scss/buttons';
|
|
|
|
// Chill badges
|
|
@import './scss/badge';
|
|
|
|
// Chill forms
|
|
@import './scss/forms';
|
|
|
|
// Extend bootstrap accordion
|
|
@import './scss/accordion';
|
|
|
|
// Chill record_actions
|
|
@import './scss/record_actions';
|
|
|
|
// Chill entity render box system
|
|
@import './scss/render_box';
|
|
|
|
// Chill flex responsive table/block presentation
|
|
@import './scss/flex_table';
|
|
|
|
// Specific templates
|
|
@import './scss/notification';
|
|
|
|
/*
|
|
* BASE LAYOUT POSITION
|
|
*/
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
footer {
|
|
margin-top: auto;
|
|
}
|
|
}
|
|
|
|
header {
|
|
nav.navbar {
|
|
padding: 0;
|
|
a.navbar-brand img {
|
|
height: 50px;
|
|
margin: 8px 0;
|
|
}
|
|
div.navbar-collapse {
|
|
float: right;
|
|
}
|
|
ul.navbar-nav {
|
|
display: flex;
|
|
align-items: stretch;
|
|
li.nav-item {
|
|
display: flex;
|
|
&.btn {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
& > a {
|
|
align-self: center;
|
|
}
|
|
form.form-inline {
|
|
align-self: center;
|
|
display: flex;
|
|
input.form-control {
|
|
align-self: center;
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.dropdown-menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
a.dropdown-item {
|
|
width: 120%;
|
|
border: 0;
|
|
border-bottom: 1px solid $gray-200;
|
|
font-size: smaller;
|
|
i {
|
|
float: right; }
|
|
&:hover {
|
|
color: $gray-500 !important; }
|
|
}
|
|
}
|
|
|
|
// fullwidth menu when navbar is collapsed
|
|
@media (max-width: 767px) {
|
|
& {
|
|
position: relative;
|
|
}
|
|
button.navbar-toggler {
|
|
float: right;
|
|
}
|
|
div.navbar-collapse {
|
|
float: none;
|
|
position: absolute;
|
|
top: 4em;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
padding: 1em;
|
|
border-top: 1px solid shade-color($primary, 25%);
|
|
ul.navbar-nav {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"sear sear sear"
|
|
"sect user lang";
|
|
li.nav-item {
|
|
flex-direction: column;
|
|
border: 0;
|
|
a.nav-link {}
|
|
&.navigation-search {
|
|
grid-area: sear;
|
|
margin-bottom: 1em;
|
|
form {
|
|
width: 100%;
|
|
input.form-control {}
|
|
button.btn {}
|
|
}
|
|
}
|
|
&.nav-section { grid-area: sect; }
|
|
&.nav-user { grid-area: user; }
|
|
&.nav-language { grid-area: lang; }
|
|
}
|
|
li.dropdown {
|
|
&, & > * {
|
|
background-color: transparent !important;
|
|
}
|
|
a.dropdown-toggle {}
|
|
div.dropdown-menu {
|
|
display: block;
|
|
border: 0;
|
|
a.dropdown-item {
|
|
width: 100%;
|
|
border: 0;
|
|
border-top: 1px dotted $gray-200;
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
div.banner {
|
|
a {
|
|
text-decoration: none;
|
|
&.phone,
|
|
&.email {
|
|
color: $white;
|
|
}
|
|
}
|
|
.id-number {
|
|
font-weight: lighter;
|
|
font-size: 50%;
|
|
margin-left: 0.5em;
|
|
&:before { content: '(n°'; }
|
|
&:after { content: ')'; }
|
|
}
|
|
span.age {
|
|
margin-left: 0.5em;
|
|
&:before { content: '('; }
|
|
&:after { content: ')'; }
|
|
}
|
|
}
|
|
|
|
div.vertical-menu {
|
|
border-radius: 0;
|
|
margin-top: 0.5rem;
|
|
a.list-group-item {
|
|
background-color: $chill-yellow;
|
|
border: 0;
|
|
margin-bottom: 0.25rem;
|
|
&:hover {
|
|
background-color: tint-color($chill-yellow, 20%)
|
|
}
|
|
}
|
|
a.list-group-item-header {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
footer.footer {
|
|
background: $dark;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
width: 100%;
|
|
p {
|
|
font-family: Open Sans;
|
|
font-weight: 300;
|
|
clear: both;
|
|
color: $white;
|
|
font-size: 0.9em;
|
|
line-height: 1.5em;
|
|
margin: auto;
|
|
max-width: 35em;
|
|
text-align: center;
|
|
a, a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* ADMIN STYLES
|
|
*/
|
|
|
|
div.admin {
|
|
flex-direction: row-reverse;
|
|
div.vertical-menu {
|
|
font-size: 0.9em;
|
|
.list-group-item {
|
|
padding: 0.3rem 0.7rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* GENERIC MAIN STYLES
|
|
* miscellaneous
|
|
*/
|
|
|
|
/// titles
|
|
h1, h2,
|
|
.h1, .h2 {
|
|
font-weight: $headings-font-weight + 100;
|
|
}
|
|
|
|
/// typography
|
|
.open_sansbold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/// no borders on head table
|
|
table.table-bordered {
|
|
thead, thead * {
|
|
border: 0 !important;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/// comments quotes
|
|
.chill-user-quote {
|
|
border-left: 10px solid $yellow;
|
|
margin: 1.5em 10px;
|
|
padding: 0.5em 15px;
|
|
background-color: $gray-200;
|
|
color: $gray-800;
|
|
font-size: 90%;
|
|
|
|
p {
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
|
|
// test a bottom right decoration (to be confirmed)
|
|
&.test {
|
|
position: relative;
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0px; height: 0px;
|
|
bottom: 0; right: 0;
|
|
background: $white;
|
|
border-top: 10px solid $gray-200;
|
|
border-left: 10px solid $gray-200;
|
|
border-right: 10px solid $white;
|
|
border-bottom: 10px solid $white;
|
|
}
|
|
}
|
|
|
|
// ckeditor citation
|
|
blockquote p {
|
|
font-style: italic;
|
|
padding-left: 2em;
|
|
quotes: "“" "„";
|
|
position: relative;
|
|
&:before {
|
|
content: open-quote;
|
|
font-size: 400%;
|
|
color: $gray-400;
|
|
position: absolute;
|
|
top: -25px;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.private-quote {
|
|
border-left: 10px solid $pink;
|
|
}
|
|
|
|
/// meta-data
|
|
div.createdBy,
|
|
div.updatedBy,
|
|
div.metadata {
|
|
span.user, span.date {
|
|
text-decoration: underline dotted;
|
|
}
|
|
}
|
|
div.metadata {
|
|
font-size: smaller;
|
|
color: $gray-600;
|
|
span.user, span.date {
|
|
&:hover {
|
|
color: $gray-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// chill help tooltip
|
|
.chill-help-tooltip {
|
|
&::before {
|
|
content: '\f05a';
|
|
color: $chill-pink;
|
|
font-family: ForkAwesome;
|
|
font-style: normal;
|
|
font-size: 120%;
|
|
cursor: pointer;
|
|
margin: auto 0.3em;
|
|
}
|
|
}
|
|
|
|
/// display definition list
|
|
// with dt and dd on same line
|
|
dl.definition-inline {
|
|
dd {
|
|
display: inline;
|
|
margin: 0;
|
|
&:after{
|
|
display: block;
|
|
content: '';
|
|
}
|
|
}
|
|
dt{
|
|
display: inline-block;
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
/// when there is no data
|
|
.custom_field_no_data,
|
|
.chill-no-data-statement {
|
|
font-style: italic;
|
|
font-size: 90%;
|
|
}
|
|
|
|
/// flash
|
|
div#flashMessages {
|
|
margin-top: 20px;
|
|
.flash-notice {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* SPECIFIC RULES
|
|
*/
|
|
|
|
//// still used ?
|
|
// move from chillmain.css, converted to sass
|
|
|
|
div#usefulbar {
|
|
background-color: $yellow;
|
|
z-index: 1000;
|
|
padding-right: 15px;
|
|
|
|
form {
|
|
margin: 0;
|
|
}
|
|
i.menu {
|
|
font-size: 2em;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin: 0;
|
|
padding-top: 5px;
|
|
padding-right: 10px;
|
|
}
|
|
li {
|
|
color: $white;
|
|
margin-left: 10px;
|
|
a {
|
|
color: $white;
|
|
text-shadow: 0px 0px 1px $gray-600;
|
|
}
|
|
i.icon-user-add {
|
|
&:before {
|
|
vertical-align: -5px;
|
|
}
|
|
}
|
|
&#search_element {
|
|
text-align: right;
|
|
div#search_form {
|
|
margin: 0;
|
|
padding: 0;
|
|
div, .field {
|
|
margin: 0;
|
|
}
|
|
button {
|
|
color: $white;
|
|
border: none;
|
|
bottom: -2px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.personName {
|
|
font-variant: small-caps;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
// probably used in client chill.
|
|
// think to rename like above
|
|
input.belgian_national_number_inversed_date {
|
|
width: 7em;
|
|
margin-right: 1em;
|
|
}
|
|
input.belgian_national_number_daily_counter {
|
|
width: 4em;
|
|
margin-right: 1em;
|
|
}
|
|
input.belgian_national_number_control_digit {
|
|
width: 3em;
|
|
}
|
|
|
|
//
|
|
input.belgian_national_number {
|
|
&.inversed_date {}
|
|
&.daily_counter {}
|
|
&.control_digit {}
|
|
}
|
|
|
|
// replace abbr
|
|
span.item-key {
|
|
font-variant: all-small-caps;
|
|
font-size: 90%;
|
|
background-color: #0000000a;
|
|
//text-decoration: dotted underline;
|
|
}
|
|
|
|
/// Workflows
|
|
div.workflow {
|
|
section.step {
|
|
border: 1px solid $chill-l-gray;
|
|
padding: 1em 2em;
|
|
div.flex-table {
|
|
margin: 1.5em -2em;
|
|
}
|
|
}
|
|
div.to-decision,
|
|
div.decided {
|
|
font-variant: all-small-caps;
|
|
margin-left: 1em;
|
|
}
|
|
div.to-decision {
|
|
font-weight: 300;
|
|
}
|
|
div.decided {
|
|
font-weight: 600;
|
|
}
|
|
div.breadcrumb {
|
|
display: initial;
|
|
margin-bottom: 0;
|
|
padding-right: 0.5em;
|
|
background-color: tint-color($chill-yellow, 90%);
|
|
border: 1px solid $chill-yellow;
|
|
color: $primary;
|
|
border-radius: 1.5em;
|
|
font-size: 12pt;
|
|
font-weight: 500;
|
|
font-variant: small-caps;
|
|
span, a {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
&:hover {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Override bootstrap popover styles
|
|
div.popover {
|
|
box-shadow: 0 0 10px -5px $dark;
|
|
z-index: 9999;
|
|
.popover-arrow {}
|
|
.popover-header {}
|
|
.popover-body {}
|
|
|
|
// Specific worflow breadcrumb popover
|
|
&.workflow-transition {
|
|
.popover-header {
|
|
font-variant: small-caps;
|
|
}
|
|
}
|
|
}
|
|
|
|
// increase toast message z-index (above all modals)
|
|
div.v-toast {
|
|
z-index: 10000!important;
|
|
}
|