baz_april/squelettes/scss/styles/_styles.scss
2021-07-30 00:08:36 +02:00

218 lines
3.9 KiB
SCSS

// pour usage du btn, mais utile ailleurs eventuellement
.taille70 {
font-size:70%;
}
.taille80 {
font-size:80%;
}
.taille90 {
font-size:90%;
}
.taille110 {
font-size:110%;
}
.taille120 {
font-size:120%;
}
.taille130 {
font-size:130%;
}
.formulaire_spip.formulaire_recherche {
margin:2rem 0;
max-width:500px;
form {
position:relative;
border:1px solid #B3B3B3;
border-radius:$spacer/2;
padding:0.5rem 1.5em 0.5rem 2.5em;
width:100%;
max-width:100%;
@include flex;
align-items:center;
background:white;
&:before {
@extend .fa-search;
@extend .fas;
color: #AACBCF;
display: block;
position: absolute;
top: 50%;
left: 1rem;
margin-top:-0.5rem;
width: 1.5rem;
height: 1.5rem;
background: none;
}
}
label {
@include visuallyhidden;
}
input[type=search],
input[type=text] {
width: 100%;
padding: 0;
border: none;
min-height: 2.5em;
line-height: 2.5em;
background: white;
&:focus {
outline: 0; // corriger les styles chromium
}
}
}
// abonnement newsletter et recherche
.formulaire_spip .abonnement, .formulaire_recherche {
position:relative;
label {
color:$blancTransparent;
font-size:0.8rem;
}
input.text {
padding-right:30px;
background:#f4f4f4;
&:hover, &:focus, &:active {
background:white;
}
}
button {
position: absolute;
right:0;
bottom:0;
height:100%;
width:30px;
padding:0;
overflow:hidden;
text-indent:30px;
background:none;
&:after {
@include triangle(right, #5b758e, 0.5rem, 0.8);
position:absolute;
right:0.6rem;
bottom:50%;
margin-bottom:-0.5rem;
}
&:hover, &:focus, &:active {
background:none;
}
&:hover {
&:after {
border-left-color:$couleurPrincipaleOn;
}
}
}
}
.formulaire_spip .abonnement {
button {
height:55%;
&::after {
bottom:0.5rem;
margin-bottom:0;
}
}
input.text {
&::placeholder {
font-size:0.8rem;
}
}
}
a.back-to-top {
display: none;
@include media($bp-large-up) {
position: fixed;
width: 52px;
height: 66px;
right: 20px;
bottom: 20px;
z-index: 8;
text-indent: -9999px;
background: url("../images/back-top.png") no-repeat center;
outline: none;
}
&:focus {
background: none !important;
}
}
.flex {
@include flex;
flex-wrap:wrap;
justify-content:space-between;
}
.flex2 > * {
width:100%;
@include media($bp-small-up) {
max-width:calc(50% - 1rem);
}
}
.flex3 > * {
width:100%;
@include media($bp-small-up) {
max-width:calc(33.33% - 1rem);
}
}
// ------------------------------------------------
// Affichage de valeurs de formulaires
// ------------------------------------------------
.champ.afficher {
@include flex;
margin-bottom: 0.5em;
.label {
margin-right: 1em;
width: 25%;
}
&.saisie_fieldset {
display: block;
margin: 1em 0;
& > .champ {
margin-left: 1.5em;
}
}
}
// tri par periode : blog ou inclure/listetranscriptions_selectionperiode
//
.periode {
width:100%;
margin-bottom:1em;
a, span { display: inline-block; margin-right:0.25em;
&.annees { font-size:0.8em; line-height:1.8; font-style:italic; color:$grayLight; clear:left;
&:after { font-size:0.85em; font-style:normal; }
}
&.archive { cursor:pointer; color:$grayLight; }
&.mois_archive { width:0; overflow:hidden; margin:0; height:0;
&.ouvert { width:auto; height:auto; overflow:visible; display:inline; }
}
&.annees.archive.ouvert { color:$gray; }
}
span {
&:hover { color:$gray; }
}
a { padding:0 0.3em; font-weight:700;
&.on { text-decoration:underline; }
}
}
// page sommaire
.page_sommaire {
.page_content {
margin-right:0;
}
}
.texte_accueil {
margin-bottom:$spacer;
}