baz_april/squelettes/scss/styles/_styles.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%;
}

.liste-items {
	padding:0;
	margin:0;
	list-style:none;
	.article-resume {
		margin:0;
	}
}

.bp-medium {
	@include media($bp-medium-up) {
		@include visuallyhidden;
	}
}
.bp-medium-up {
	@include media($bp-medium) {
		@include visuallyhidden;
	}
}

.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;
		z-index:1;
		&: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;
		}
	}
}


@include media($bp-medium-up) {
	.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;
}


iframe {
	width:100%;
}