kazhnuz.css/scss/_commons.scss

226 lines
4.1 KiB
SCSS
Raw Normal View History

@import 'global';
2019-10-08 13:06:59 +02:00
@import 'cards';
2019-10-08 13:06:59 +02:00
/* ------------------ BUTTONS ------------------- */
.btn {
@include borders();
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
.btn:hover {
position:relative;
box-shadow: $narrow-shadow, $inset-shadow;
@include borders();
}
.btn:active {
position:relative;
box-shadow: $inset-shadow-inverted;
@include borders();
}
.btn-group {
box-shadow: $large-shadow;
}
.btn-group .btn {
box-shadow: $inset-shadow;
@include border-radius();
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.btn-group .btn:hover {
position:relative;
box-shadow: $inset-shadow;
}
.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
position:relative;
box-shadow: $inset-shadow-inverted!important;
@include borders();
}
.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
position:relative;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
/* ------------------ BREADCRUMB ------------------- */
.breadcrumb {
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color: $color-light2;
2019-10-08 13:06:59 +02:00
margin-bottom:1.2em;
@include li-no-margin();
}
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin:15px;
}
.reagir {
text-align:right;
}
/* ------------------ PREVIEWS ------------------- */
.previews-section {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
.preview-container {
margin-bottom:1em;
padding:0.4em;
width:100%
}
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
.prev-col-2 .preview-container {
width:50%;
}
.prev-col-3 .preview-container {
width:33%;
}
.prev-col-4 .preview-container {
width:25%;
}
}
.card-preview {
@include border-radius();
width:100%;
margin:auto;
box-shadow: $large-shadow, $inset-shadow;
}
.preview-link:hover {
text-decoration:none!important;
}
.preview-item {
height:200px;
overflow:hidden;
font-size:0.9em;
line-height: 1.5em !important;
padding:0.2em;
text-align:justify;
background-color:rgba(0,0,0,0.05);
color:rgba(0,0,0,0.4);
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
}
.preview-content {
max-height:200px;
}
.preview-content > p {
width:100%;
margin:auto;
}
.preview-content > p.p-img {
text-align:center;
margin:auto;
padding:auto;
display: block;
width:100%;
}
.preview-content > p > img {
max-width:100%;
height:auto;
vertical-align:middle;
margin:auto;
text-align:center;
}
.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
margin-bottom:0px;
max-width:100%;
display:none;
}
.preview-item h1 {
display:none;
}
.preview-overlay {
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity .5s;
color: $color-light;
2019-10-08 13:06:59 +02:00
background-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
backdrop-filter: none;
}
.preview-overlay h1 {
max-width:100%;
padding-top:0.3em;
margin:auto;
margin-bottom:0px;
text-align:center;
display:block;
font-size:2em;
color: $color-light;
2019-10-08 13:06:59 +02:00
}
.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 {
color: $color-light;
2019-10-08 13:06:59 +02:00
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
}
.preview-item:hover .preview-overlay {
opacity: .9;
transition: opacity .5s;
backdrop-filter: blur(2px);
}
.comment-text {
margin-top:0.8em;
}
.card-preview time {
margin-bottom:0.4em;
display:block;
}