1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-04 15:24:23 +01:00
fab-manager/app/assets/stylesheets/app.layout.scss

639 lines
9.5 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;
}
}