mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-10 21:24:20 +01:00
688 lines
10 KiB
SCSS
688 lines
10 KiB
SCSS
/*layout*/
|
|
.header,
|
|
.footer {
|
|
min-height: 50px;
|
|
padding: 0 15px;
|
|
|
|
> p {
|
|
margin-top: 15px;
|
|
display: inline-block;
|
|
}
|
|
|
|
> .btn,
|
|
> .btn-group,
|
|
> .btn-toolbar {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
> .btn-lg {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.nav-tabs {
|
|
border: none;
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
|
|
> li {
|
|
a {
|
|
border: none !important;
|
|
border-radius: 0;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
line-height: 20px;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&.active a {
|
|
color: $text-color;
|
|
|
|
&,
|
|
&:hover {
|
|
background-color: $body-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nav-white {
|
|
> li.active a {
|
|
&,
|
|
&:hover {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.navbar {
|
|
border-radius: 0;
|
|
border: none;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
position: relative !important;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
background-color: $header-bg;
|
|
|
|
@include box-shadow(0 1px 0px #cfcfcf);
|
|
}
|
|
|
|
.heading {
|
|
.heading-btn {
|
|
a {
|
|
width: 100%;
|
|
padding: 35px 40%;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
color: black;
|
|
|
|
&:hover {
|
|
//background-color: $yellow;
|
|
|
|
}
|
|
|
|
i:before {
|
|
content: "\f177";
|
|
}
|
|
}
|
|
}
|
|
|
|
.heading-icon {
|
|
width: 100%;
|
|
padding: 35px 40%;
|
|
display: inline-block;
|
|
color: black;
|
|
}
|
|
|
|
.heading-title {
|
|
//overflow: hidden;
|
|
height: 94px;
|
|
|
|
h1 {
|
|
margin: 0 0 0 15px;
|
|
padding: 36px 15px;
|
|
}
|
|
}
|
|
|
|
.heading-actions {
|
|
height: 94px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
body.container {
|
|
padding: 0;
|
|
}
|
|
|
|
.aside-md {
|
|
width: 250px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
body.container {
|
|
@include box-shadow(0 3px 60px rgba(0, 0, 0, 0.3));
|
|
|
|
border-left: 1px solid darken($border-color, 10%);
|
|
border-right: 1px solid darken($border-color, 10%);
|
|
}
|
|
|
|
.app {
|
|
&,
|
|
body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hbox {
|
|
&.stretch {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.vbox {
|
|
> section,
|
|
> footer {
|
|
position: absolute;
|
|
}
|
|
|
|
&.flex {
|
|
> section {
|
|
> section {
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hbox {
|
|
display: table;
|
|
table-layout: fixed;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
|
|
> aside,
|
|
> section {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
height: 100%;
|
|
float: none;
|
|
|
|
&.show,
|
|
&.hidden-sm {
|
|
display: table-cell !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vbox {
|
|
display: table;
|
|
border-spacing: 0;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
> section,
|
|
> footer {
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
> header {
|
|
~ section {
|
|
top: 50px;
|
|
}
|
|
|
|
&.header-md {
|
|
~ section {
|
|
top: $header-md-height + 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
> section {
|
|
&.w-f {
|
|
bottom: 50px;
|
|
}
|
|
}
|
|
|
|
> footer {
|
|
top: auto;
|
|
z-index: 100;
|
|
|
|
~ section {
|
|
bottom: 50px;
|
|
}
|
|
}
|
|
|
|
&.flex {
|
|
> header,
|
|
> section,
|
|
> footer {
|
|
position: inherit;
|
|
}
|
|
|
|
> section {
|
|
display: table-row;
|
|
height: 100%;
|
|
|
|
> section {
|
|
position: relative;
|
|
height: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
.ie & {
|
|
display: table-cell;
|
|
}
|
|
|
|
> section {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.aside-xs {
|
|
width: 60px;
|
|
}
|
|
|
|
.aside-sm {
|
|
width: 150px;
|
|
}
|
|
|
|
.aside {
|
|
width: 200px;
|
|
}
|
|
|
|
.aside-md {
|
|
width: 250px;
|
|
}
|
|
|
|
.aside-lg {
|
|
width: 300px;
|
|
}
|
|
|
|
.aside-xl {
|
|
width: 360px;
|
|
}
|
|
|
|
.aside-xxl {
|
|
width: 480px;
|
|
}
|
|
|
|
.header-md {
|
|
height: $header-md-height;
|
|
|
|
.navbar-form {
|
|
margin-top: floor(($header-md-height - 30) / 2);
|
|
margin-bottom: floor(($header-md-height - 30) / 2);
|
|
}
|
|
}
|
|
|
|
.scrollable {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(50, 50, 50, 0.25);
|
|
border: 2px solid transparent;
|
|
border-radius: 10px;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(50, 50, 50, 0.5);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: rgba(50, 50, 50, 0.05);
|
|
}
|
|
}
|
|
|
|
.scrollable {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.no-touch {
|
|
.scrollable.hover {
|
|
overflow-y: hidden;
|
|
|
|
&:hover {
|
|
overflow: visible;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar-button {
|
|
width: 10px;
|
|
height: 6px;
|
|
background-color: rgba(50, 50, 50, 0.05);
|
|
}
|
|
}
|
|
|
|
.slimScrollBar {
|
|
border-radius: 5px;
|
|
border: 2px solid transparent;
|
|
border-radius: 10px;
|
|
background-clip: padding-box !important;
|
|
}
|
|
|
|
@media print {
|
|
html, body, .hbox, .vbox {
|
|
height: auto;
|
|
}
|
|
|
|
.vbox {
|
|
> section,
|
|
> footer {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
.datepicker-container {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.datepicker-dropdown {
|
|
border: 1px solid #c7c5c5;
|
|
border-radius: 0.3em;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
background-color: #ffffff;
|
|
|
|
li {
|
|
padding-left: 0.8em;
|
|
padding-right: 0.8em;
|
|
margin-bottom: 1em;
|
|
line-height: 2.4em;
|
|
vertical-align: middle;
|
|
|
|
div.input-group {
|
|
float: right;
|
|
|
|
ul.dropdown-menu {
|
|
left: -5em !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.customMenuButton {
|
|
min-width: 15em;
|
|
max-width: 15em;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.customMenuInput {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.reservations-locked {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.reservation-canceled {
|
|
color: #606060;
|
|
border-radius: 0.2em;
|
|
background-color: #e4e4e4;
|
|
padding: 0.7em 0.7em;
|
|
font-size: 90%;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
.reservation-time {
|
|
color: #606060;
|
|
}
|
|
|
|
&:before {
|
|
content: "Annulée";
|
|
display: inline-block;
|
|
background-color: #c44242;
|
|
border-radius: 0.25em;
|
|
padding: 0.1em 0.5em;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
float: left;
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
.custom-logo-container {
|
|
max-width: 240px;
|
|
height: 100%;
|
|
|
|
.custom-logo {
|
|
height: 100px;
|
|
width: 100%;
|
|
position: relative;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border: 1px dashed #c4c4c4;
|
|
border-radius: 0.7em;
|
|
padding: 1.6em;
|
|
margin-left: 1em;
|
|
|
|
img {
|
|
display: block;
|
|
width: auto;
|
|
max-height: 44px;
|
|
max-width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
&:hover .tools-box {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tools-box {
|
|
opacity: 0;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: #000;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.custom-favicon-container {
|
|
max-width: 70px;
|
|
height: 100%;
|
|
|
|
.custom-favicon {
|
|
height: 70px;
|
|
width: 100%;
|
|
position: relative;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border: 1px dashed #c4c4c4;
|
|
border-radius: 0.7em;
|
|
padding: 1.6em;
|
|
margin-left: 1em;
|
|
|
|
img {
|
|
display: block;
|
|
width: auto;
|
|
max-height: 16px;
|
|
max-width: 16px;
|
|
margin: auto;
|
|
}
|
|
|
|
&:hover .tools-box {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tools-box {
|
|
opacity: 0;
|
|
position: absolute;
|
|
bottom: -7px;
|
|
left: 51px;
|
|
right: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-profile-image-container {
|
|
max-width: 100%;
|
|
height: 100%;
|
|
|
|
.custom-profile-image {
|
|
height: 240px;
|
|
width: 100%;
|
|
position: relative;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border: 1px dashed #c4c4c4;
|
|
border-radius: 0.7em;
|
|
padding: 1.6em;
|
|
margin-left: 1em;
|
|
|
|
img {
|
|
display: block;
|
|
width: auto;
|
|
max-height: 185px;
|
|
max-width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
&:hover .tools-box {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tools-box {
|
|
opacity: 0;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: #000;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.flash-message {
|
|
position: absolute;
|
|
top: 1%;
|
|
z-index: 1001;
|
|
width: 33%;
|
|
left: 33%;
|
|
}
|
|
|
|
// profile edition -- add a social network buttons
|
|
.social-icons {
|
|
& > div {
|
|
cursor: pointer;
|
|
padding: 0.2em;
|
|
width: 3em;
|
|
display: inline-block;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
|
|
&:hover {
|
|
border: 1px solid $border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// public profile view
|
|
.profile-top {
|
|
background-size: cover !important;
|
|
|
|
.profile-top-infos {
|
|
padding: 30px 15px 30px 15px;
|
|
|
|
.private-profile {
|
|
color: #000;
|
|
border: 1px solid $border-color;
|
|
background-color: $border-color;
|
|
border-radius: 3px;
|
|
padding: 0 5px 0 5px;
|
|
margin-left: 2em;
|
|
|
|
i {
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.profile-top-pictos {
|
|
padding: 43px 15px 15px 15px;
|
|
text-align: center;
|
|
|
|
.avatar {
|
|
display: inline-block;
|
|
width: 140px;
|
|
|
|
img {
|
|
border: 9px solid #fff;
|
|
background-color: #fff;
|
|
box-shadow: 1px 2px 2px 0 #1f1f1f;
|
|
}
|
|
}
|
|
|
|
.social-links {
|
|
width: 133px;
|
|
display: inline-block;
|
|
text-align: left;
|
|
|
|
a {
|
|
border: 1px solid #fff;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
color: $input-color;
|
|
margin-bottom: 5px;
|
|
|
|
i {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.links-center {
|
|
text-align: center !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bio-title {
|
|
display: inherit;
|
|
text-align: center;
|
|
height: 50px;
|
|
}
|
|
|
|
.calendar-filter {
|
|
h3 {
|
|
line-height: 2.1rem !important;
|
|
}
|
|
}
|
|
|
|
.calendar-filter-aside {
|
|
padding: 20px;
|
|
}
|
|
|
|
.home-events {
|
|
.event-description {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.disabled-line {
|
|
color: $gray;
|
|
background-color: $gray-lighter;
|
|
|
|
& td:first-child:before {
|
|
font-family: 'fontawesome' !important;
|
|
content: '\f070';
|
|
position: absolute;
|
|
left: -4px;
|
|
}
|
|
}
|
|
|
|
|
|
.middle-of-inputs {
|
|
line-height: 24px;
|
|
padding: 6px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
} |