siteweb/baz_april
7
1
Fork 0
Code Pull Requests Releases Wiki Activity

mixin triangle + loupe recherche fixée + form abimailman une liste

Browse Source
This commit is contained in:
chankalan 2021-03-07 14:55:05 +01:00
parent 47d64b43da
commit d6842f8ced
3 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
formulaires/abomailman_mini_une_liste.html
View File

@ -11,7 +11,6 @@
#SET{erreurs,#ENV**{erreurs}|table_valeur{la_demo}}
<div class="editer_email obligatoire[ (#GET{erreurs}|oui)erreur]">
<label for="email"><:baz_april:ne_manquez_pas_les_infos:></label>
<i class="fas fa-angle-right"></i>
[<span class='erreur_message'>(#GET{erreurs})</span>]
<input name="email" id="email" class="text" type="text" placeholder="<:baz_april:s_inscrire_a_la_lettre_d_information:>" />
</div>

4
squelettes/scss/styles/_nav.scss
View File

@ -83,6 +83,7 @@
padding-top:($spacer/2);
font-size:0.95rem;
z-index:9;
position:relative;
> ul {
text-align:right;
@include vendor-prefix(transition,all 0.3s ease-in-out);
@ -137,6 +138,8 @@
@include visuallyhidden;
}
a {
display:inline;
padding:0;
border:0;
background:none;
&:hover i.fa-search, &:focus i.fa-search {
@ -159,6 +162,7 @@
left:auto;
right:0;
border-radius: $spacer/2;
z-index:2;
@include vendor-prefix(transition,all 0.3s ease-in-out);
form:before {
left:0.5rem;

47
squelettes/scss/utils/_mixins.scss
View File

@ -253,6 +253,53 @@
background: -o-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
}
// Triangle helper mixin
// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
// Example :
// .foo {
// position: relative;
// &:before {
// @include triangle(bottom, red, 0.25em);
// position: absolute;
// left: 100%;
// top: 50%;
// }
// }
@mixin triangle($direction, $color: currentcolor, $size: 1em, $coefficient: 1.5) {
@if not index(top right bottom left, $direction) {
@error "Direction must be either `top`, `right`, `bottom` or `left`.";
}
width: 0;
height: 0;
content: '';
z-index: 2;
@if $direction == top {
border-bottom: ($size * $coefficient) solid $color;
}
@if $direction == bottom {
border-top: ($size * $coefficient) solid $color;
}
@if $direction == right {
border-left: ($size * $coefficient) solid $color;
}
@if $direction == left {
border-right: ($size * $coefficient) solid $color;
}
$perpendicular-borders: $size solid transparent;
@if $direction == top or $direction == bottom {
border-left: $perpendicular-borders;
border-right: $perpendicular-borders;
} @else if $direction == right or $direction == left {
border-bottom: $perpendicular-borders;
border-top: $perpendicular-borders;
}
}
/// Font Face
/// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6#file-_mixins-scss