diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss index f7bdd3a..0979f8d 100644 --- a/scss/components/_cards.scss +++ b/scss/components/_cards.scss @@ -1,5 +1,17 @@ // Mixin and colors +@mixin card() { + @include border-radius(); + box-shadow: $large-shadow; + border: none; + margin-bottom:1.2em; +} + +@mixin card-relief{ + @include card() + box-shadow: $large-shadow, $inset-shadow; +} + @mixin card-color($background-color, $text-color) { & > .card-header { background-color: $background-color; color:$text-color; } } @@ -12,19 +24,12 @@ /* 10.1 - Cards */ .card { - @include border-radius(); - box-shadow: $large-shadow; - border: none; - margin-bottom:1.2em; -} + @include card(); -.card-shadow { - box-shadow: $large-shadow, $inset-shadow; -} - -.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card h7,.card h8,.card h9,.card h10 { - color:#333; - text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { + color:#333; + text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + } } .card { @@ -53,34 +58,34 @@ /* 10.1.1 - Headers */ .card-header { - @include borders(); - font-size:1.1em; - box-shadow: $inset-relief; - text-shadow: 0px 1px 1px rgba(0,0,0,0.3); - font-weight:600; - border-radius: 0; - - &:first-child { - @include border-radius(); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - &:last-child { - @include border-radius(); - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { - font-size:1em; - text-shadow: 0px -1px 0px rgba(0,0,0,0.3); - padding:0px; - margin:0px; - color:#FFF; + @include borders(); + font-size:1.1em; + box-shadow: $inset-relief; + text-shadow: 0px 1px 1px rgba(0,0,0,0.3); font-weight:600; - line-height:1.5em; - } + border-radius: 0; + + &:first-child { + @include border-radius(); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + &:last-child { + @include border-radius(); + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { + font-size:1em; + text-shadow: 0px -1px 0px rgba(0,0,0,0.3); + padding:0px; + margin:0px; + color:#FFF; + font-weight:600; + line-height:1.5em; + } } /* 10.1.2 - Meta */ @@ -130,21 +135,16 @@ a.list-group-item:hover { /* 10.2 - Breadcrumb */ .breadcrumb { - @include border-radius(); - box-shadow: $large-shadow, $inset-shadow; - border: 0; - background-color:#eeeeec; - margin-bottom:1.2em; + @include card-relief(); @include li-no-margin(); + background-color:#eeeeec; } /* 10.3 - Alerts */ .alert { - @include borders(); - @include border-radius(); + @include card(); color:rgba(0, 0, 0, 0.7); - box-shadow: $large-shadow; } .alert a, .alert-link { diff --git a/style.css b/style.css index 05e57b2..a139897 100644 --- a/style.css +++ b/style.css @@ -1,1076 +1,19 @@ -@charset "UTF-8"; -/* ------------------------------------------------- -BLUESKY SCSS +/* Error: expected ";". + * , + * 11 | @include card() + * | ^ + * ' + * scss\components\_cards.scss 11:20 @import + * scss\_drawing.scss 10:9 @import + * scss\style.scss 21:9 root stylesheet */ -Auteur : Kazhnuz -Licence : Creative Common BY-SA - -Version 3.2 - -Thème CSS basé sur Bootstrap et ForkAwesome -créé originellement pour mon blog personnel. - -CC BY-SA Kazhnuz -------------------------------------------------- */ -/* --- COLORS --- */ -a, a:hover, a:active { - color: #4e63c9; -} - -::selection { - background-color: #4e63c9 !important; - color: #FFF; -} - -::-moz-selection { - background-color: #4e63c9 !important; - color: #FFF; -} - -mark { - background-color: #fcf2c0; -} - -blockquote, pre { - border-color: #7951c0; -} - -.text-blue { - color: #4e63c9; -} -.text-violet { - color: #ce4dcd; -} -.text-purple { - color: #7951c0; -} -.text-red { - color: #e33d22; -} -.text-orange { - color: #eb790a; -} -.text-green { - color: #75b82d; -} -.text-skyblue { - color: #42a0f3; -} -.text-dark { - color: #2D2D2D; -} -.text-light { - color: #eeeeec; -} -.text-turquoise { - color: #46bd9e; -} -.text-yellow { - color: #f6d32d; -} -.text-brown { - color: #986a44; -} -.text-grey { - color: #77767b; -} -.text-primary { - color: #7951c0; -} -.text-secondary { - color: #4e63c9; -} -.text-warning { - color: #eb790a; -} -.text-danger { - color: #e33d22; -} -.text-info { - color: #42a0f3; -} -.text-success { - color: #75b82d; -} - -.bg-blue { - background-color: #4e63c9 !important; - color: #FFF; -} -.bg-violet { - background-color: #ce4dcd !important; - color: #FFF; -} -.bg-purple { - background-color: #7951c0 !important; - color: #FFF; -} -.bg-red { - background-color: #e33d22 !important; - color: #FFF; -} -.bg-orange { - background-color: #eb790a !important; - color: #FFF; -} -.bg-green { - background-color: #75b82d !important; - color: #FFF; -} -.bg-skyblue { - background-color: #42a0f3 !important; - color: #FFF; -} -.bg-dark { - background-color: #2D2D2D !important; - color: #FFF; -} -.bg-light { - background-color: #eeeeec !important; - color: #111; -} -.bg-turquoise { - background-color: #46bd9e !important; - color: #FFF; -} -.bg-yellow { - background-color: #f6d32d !important; - color: #FFF; -} -.bg-brown { - background-color: #986a44 !important; - color: #FFF; -} -.bg-grey { - background-color: #77767b !important; - color: #FFF; -} -.bg-primary { - background-color: #7951c0 !important; - color: #FFF; -} -.bg-secondary { - background-color: #4e63c9 !important; - color: #FFF; -} -.bg-warning { - background-color: #eb790a !important; - color: #FFF; -} -.bg-danger { - background-color: #e33d22 !important; - color: #FFF; -} -.bg-info { - background-color: #42a0f3 !important; - color: #FFF; -} -.bg-success { - background-color: #75b82d !important; - color: #FFF; -} - -/* --- 01. DEFINITIONS --- */ -/* - * Les définitions globales de la stylesheet. - * Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux - * D'autres définitions importantes sont visibles dans les autres parties de la fiche. - * - * Pour customiser les couleurs, voyez _palette.scss - */ -/* 01.1 - Commons elements */ -.no-pills { - list-style: none; -} - -.align-center { - text-align: center; -} -.align-left { - text-align: left; -} -.align-right { - text-align: right; -} - -h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { - color: white; - text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); -} - -/* --- 02. GLOBAL ELEMENTS --- */ -/* - * Le style des "grandes parties". - * Cela permet de définir les différents éléments qui composeront la page totale - * - */ -/* 02.1 - Wrapper et page totale */ -#wrapper { - background: #64b5f6 url("img/background.png") center bottom repeat-x; -} - -/* 02.1 - Header */ -header h1 { - border-style: none !important; - color: #FFF; - font-weight: 700; - font-size: 5.4em; - font-style: oblique; - text-shadow: 0px 2px 12px rgba(0, 0, 0, 0); - padding-bottom: 0px; - margin: auto; - text-align: center; - line-height: 1.5em; -} - -.navbar { - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); - border: 1px solid rgba(0, 0, 0, 0.3); - border-left: 0; - border-right: 0; -} -.navbar ul { - padding-bottom: 0; -} -.navbar li { - margin: 0; -} - -.dropdown-menu { - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); -} - -/* 02.2 - Footer */ -footer { - margin-top: 40px; -} - -/* social media */ -ul.social { - font-size: 1.5em; - padding-bottom: 1em; - margin: auto; - text-align: center; -} -ul.social li { - margin: 0; - list-style: none; - display: inline; -} -ul.social li a { - color: #FFFFFF; - background-color: #000000; - padding: 0.3em; - padding-left: 0.36em; - padding-right: 0.36em; - vertical-align: middle; - border-radius: 100%; -} -ul.social li a:hover { - color: #000; - background-color: #FFF; -} - -/* --- 1x. DESSINS DES COMPOSANTS --- */ -/* - * La liste des différents réutilisable de la fiche. - * Ne suit qu'une liste d'élément à réutiliser, ce fichier ne doit être modifié - * que par l'ajout d'un nouveau fichier dans components/ - */ -/* 10.1 - Cards */ -.card { - border-radius: 3px 3px 3px 3px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); - border: none; - margin-bottom: 1.2em; -} - -.card-shadow { - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); -} - -.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card h7, .card h8, .card h9, .card h10 { - color: #333; - text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -} - -.card-blue > .card-header { - background-color: #4e63c9; - color: #FFF; -} -.card-violet > .card-header { - background-color: #ce4dcd; - color: #FFF; -} -.card-purple > .card-header { - background-color: #7951c0; - color: #FFF; -} -.card-red > .card-header { - background-color: #e33d22; - color: #FFF; -} -.card-orange > .card-header { - background-color: #eb790a; - color: #FFF; -} -.card-green > .card-header { - background-color: #75b82d; - color: #FFF; -} -.card-skyblue > .card-header { - background-color: #42a0f3; - color: #FFF; -} -.card-dark > .card-header { - background-color: #2D2D2D; - color: #FFF; -} -.card-light > .card-header { - background-color: #eeeeec; - color: #111; -} -.card-turquoise > .card-header { - background-color: #46bd9e; - color: #FFF; -} -.card-yellow > .card-header { - background-color: #f6d32d; - color: #FFF; -} -.card-brown > .card-header { - background-color: #986a44; - color: #FFF; -} -.card-grey > .card-header { - background-color: #77767b; - color: #FFF; -} -.card-primary > .card-header { - background-color: #7951c0; - color: #FFF; -} -.card-secondary > .card-header { - background-color: #4e63c9; - color: #FFF; -} -.card-warning > .card-header { - background-color: #eb790a; - color: #FFF; -} -.card-danger > .card-header { - background-color: #e33d22; - color: #FFF; -} -.card-info > .card-header { - background-color: #42a0f3; - color: #FFF; -} -.card-success > .card-header { - background-color: #75b82d; - color: #FFF; -} - -/* 10.1.1 - Headers */ -.card-header { - border: 1px solid rgba(0, 0, 0, 0.3); - font-size: 1.1em; - box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1); - text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); - font-weight: 600; - border-radius: 0; -} -.card-header:first-child { - border-radius: 3px 3px 3px 3px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.card-header:last-child { - border-radius: 3px 3px 3px 3px; - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 { - font-size: 1em; - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); - padding: 0px; - margin: 0px; - color: #FFF; - font-weight: 600; - line-height: 1.5em; -} - -/* 10.1.2 - Meta */ -.card-meta { +body::before { + font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", + "Droid Sans Mono", monospace, monospace; + white-space: pre; + display: block; padding: 1em; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); -} -.card-meta.media { - -ms-flex-align: center !important; - align-items: center !important; -} -.card-meta .media-left .media-object { - height: 64px; - width: 64px; - border-radius: 10px; - margin-right: 1em; -} -.card-meta author { - display: block; - font-weight: 600; -} -.card-meta time { - display: block; - font-style: italic; -} - -/* 10.1.3 - Lists */ -.list-group-item { - border: none; - background-color: transparent; -} - -a.list-group-item:hover { - border-style: none; - border-width: 0px; - border-radius: 0px; - background-color: rgba(0, 0, 0, 0.1); -} - -/* 10.2 - Breadcrumb */ -.breadcrumb { - border-radius: 3px 3px 3px 3px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); - border: 0; - background-color: #eeeeec; - margin-bottom: 1.2em; -} -.breadcrumb li { - margin: 0; -} - -/* 10.3 - Alerts */ -.alert { - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 3px 3px 3px 3px; - color: rgba(0, 0, 0, 0.7); - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); -} - -.alert a, .alert-link { - color: rgba(0, 0, 0, 0.7); - font-weight: bold; -} - -.alert-blue { - background-color: #d7dcf3; - color: black; -} -.alert-violet { - background-color: #f5d9f4; - color: black; -} -.alert-purple { - background-color: #ded4ef; - color: black; -} -.alert-red { - background-color: #f7c8c0; - color: black; -} -.alert-orange { - background-color: #fbd3ac; - color: black; -} -.alert-green { - background-color: #cdebad; - color: black; -} -.alert-skyblue { - background-color: #eaf4fe; - color: black; -} -.alert-dark { - background-color: #868686; - color: black; -} -.alert-light { - background-color: white; - color: #23231f; -} -.alert-turquoise { - background-color: #caece3; - color: black; -} -.alert-yellow { - background-color: #fdf7d8; - color: black; -} -.alert-brown { - background-color: #ddc5b2; - color: black; -} -.alert-grey { - background-color: #d1d1d3; - color: black; -} -.alert-primary { - background-color: #ded4ef; - color: black; -} -.alert-secondary { - background-color: #d7dcf3; - color: black; -} -.alert-warning { - background-color: #fbd3ac; - color: black; -} -.alert-danger { - background-color: #f7c8c0; - color: black; -} -.alert-info { - background-color: #eaf4fe; - color: black; -} -.alert-success { - background-color: #cdebad; - color: black; -} - -.btn { - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 3px 3px 3px 3px; - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); - box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); -} -.btn:hover { - box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 3px 3px 3px 3px; - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); -} -.btn:focus { - box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3) !important; - outline: none; -} -.btn:active { - box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2); - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 3px 3px 3px 3px; - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); -} -.btn:active:focus { - box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3) !important; - outline: none; -} - -.btn-group { - box-shadow: none; -} - -.btn-group .btn { - border-radius: 3px 3px 3px 3px; -} -.btn-group .btn:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.btn-group .btn:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.btn-blue { - background-color: #4e63c9; - color: #FFF; -} -.btn-blue:hover, .btn-blue:active, .btn-blue:focus, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active, .btn-blue:not(.disabled):not(:disabled):focus { - background-color: #7585d5; - color: #FFF; -} -.btn-violet { - background-color: #ce4dcd; - color: #FFF; -} -.btn-violet:hover, .btn-violet:active, .btn-violet:focus, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active, .btn-violet:not(.disabled):not(:disabled):focus { - background-color: #d975d8; - color: #FFF; -} -.btn-purple { - background-color: #7951c0; - color: #FFF; -} -.btn-purple:hover, .btn-purple:active, .btn-purple:focus, .btn-purple:not(.disabled):not(:disabled):hover, .btn-purple:not(.disabled):not(:disabled):active, .btn-purple:not(.disabled):not(:disabled):focus { - background-color: #9676ce; - color: #FFF; -} -.btn-red { - background-color: #e33d22; - color: #FFF; -} -.btn-red:hover, .btn-red:active, .btn-red:focus, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active, .btn-red:not(.disabled):not(:disabled):focus { - background-color: #e9654f; - color: #FFF; -} -.btn-orange { - background-color: #eb790a; - color: #FFF; -} -.btn-orange:hover, .btn-orange:active, .btn-orange:focus, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active, .btn-orange:not(.disabled):not(:disabled):focus { - background-color: #f69332; - color: #FFF; -} -.btn-green { - background-color: #75b82d; - color: #FFF; -} -.btn-green:hover, .btn-green:active, .btn-green:focus, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active, .btn-green:not(.disabled):not(:disabled):focus { - background-color: #8fd246; - color: #FFF; -} -.btn-skyblue { - background-color: #42a0f3; - color: #FFF; -} -.btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:focus, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active, .btn-skyblue:not(.disabled):not(:disabled):focus { - background-color: #72b8f6; - color: #FFF; -} -.btn-dark { - background-color: #2D2D2D; - color: #FFF; -} -.btn-dark:hover, .btn-dark:active, .btn-dark:focus, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active, .btn-dark:not(.disabled):not(:disabled):focus { - background-color: #474747; - color: #FFF; -} -.btn-light { - background-color: #eeeeec; - color: #111; -} -.btn-light:hover, .btn-light:active, .btn-light:focus, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active, .btn-light:not(.disabled):not(:disabled):focus { - background-color: white; - color: #111; -} -.btn-turquoise { - background-color: #46bd9e; - color: #FFF; -} -.btn-turquoise:hover, .btn-turquoise:active, .btn-turquoise:focus, .btn-turquoise:not(.disabled):not(:disabled):hover, .btn-turquoise:not(.disabled):not(:disabled):active, .btn-turquoise:not(.disabled):not(:disabled):focus { - background-color: #6ccab2; - color: #FFF; -} -.btn-yellow { - background-color: #f6d32d; - color: #FFF; -} -.btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active, .btn-yellow:not(.disabled):not(:disabled):focus { - background-color: #f8dd5e; - color: #FFF; -} -.btn-brown { - background-color: #986a44; - color: #FFF; -} -.btn-brown:hover, .btn-brown:active, .btn-brown:focus, .btn-brown:not(.disabled):not(:disabled):hover, .btn-brown:not(.disabled):not(:disabled):active, .btn-brown:not(.disabled):not(:disabled):focus { - background-color: #b5835a; - color: #FFF; -} -.btn-grey { - background-color: #77767b; - color: #FFF; -} -.btn-grey:hover, .btn-grey:active, .btn-grey:focus, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus { - background-color: #919094; - color: #FFF; -} -.btn-primary { - background-color: #7951c0; - color: #FFF; -} -.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active, .btn-primary:not(.disabled):not(:disabled):focus { - background-color: #9676ce; - color: #FFF; -} -.btn-secondary { - background-color: #4e63c9; - color: #FFF; -} -.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:not(.disabled):not(:disabled):hover, .btn-secondary:not(.disabled):not(:disabled):active, .btn-secondary:not(.disabled):not(:disabled):focus { - background-color: #7585d5; - color: #FFF; -} -.btn-warning { - background-color: #eb790a; - color: #FFF; -} -.btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn-warning:not(.disabled):not(:disabled):hover, .btn-warning:not(.disabled):not(:disabled):active, .btn-warning:not(.disabled):not(:disabled):focus { - background-color: #f69332; - color: #FFF; -} -.btn-danger { - background-color: #e33d22; - color: #FFF; -} -.btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active, .btn-danger:not(.disabled):not(:disabled):focus { - background-color: #e9654f; - color: #FFF; -} -.btn-info { - background-color: #42a0f3; - color: #FFF; -} -.btn-info:hover, .btn-info:active, .btn-info:focus, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active, .btn-info:not(.disabled):not(:disabled):focus { - background-color: #72b8f6; - color: #FFF; -} -.btn-success { - background-color: #75b82d; - color: #FFF; -} -.btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success:not(.disabled):not(:disabled):hover, .btn-success:not(.disabled):not(:disabled):active, .btn-success:not(.disabled):not(:disabled):focus { - background-color: #8fd246; - color: #FFF; -} - -/* 11.2 - Badges */ -.badge-blue { - background-color: #4e63c9; - color: #FFF; -} -.badge-blue:hover, .badge-blue:active, .badge-blue:focus, a:hover > .badge-blue, a:active > .badge-blue, a:focus > .badge-blue, .badge-blue:not(.disabled):not(:disabled):hover, .badge-blue:not(.disabled):not(:disabled):active, .badge-blue:not(.disabled):not(:disabled):focus, a:hover > .badge-blue:not(.disabled):not(:disabled), a:active > .badge-blue:not(.disabled):not(:disabled), a:focus > .badge-blue:not(.disabled):not(:disabled) { - background-color: #7585d5; - color: #FFF; -} -.badge-violet { - background-color: #ce4dcd; - color: #FFF; -} -.badge-violet:hover, .badge-violet:active, .badge-violet:focus, a:hover > .badge-violet, a:active > .badge-violet, a:focus > .badge-violet, .badge-violet:not(.disabled):not(:disabled):hover, .badge-violet:not(.disabled):not(:disabled):active, .badge-violet:not(.disabled):not(:disabled):focus, a:hover > .badge-violet:not(.disabled):not(:disabled), a:active > .badge-violet:not(.disabled):not(:disabled), a:focus > .badge-violet:not(.disabled):not(:disabled) { - background-color: #d975d8; - color: #FFF; -} -.badge-purple { - background-color: #7951c0; - color: #FFF; -} -.badge-purple:hover, .badge-purple:active, .badge-purple:focus, a:hover > .badge-purple, a:active > .badge-purple, a:focus > .badge-purple, .badge-purple:not(.disabled):not(:disabled):hover, .badge-purple:not(.disabled):not(:disabled):active, .badge-purple:not(.disabled):not(:disabled):focus, a:hover > .badge-purple:not(.disabled):not(:disabled), a:active > .badge-purple:not(.disabled):not(:disabled), a:focus > .badge-purple:not(.disabled):not(:disabled) { - background-color: #9676ce; - color: #FFF; -} -.badge-red { - background-color: #e33d22; - color: #FFF; -} -.badge-red:hover, .badge-red:active, .badge-red:focus, a:hover > .badge-red, a:active > .badge-red, a:focus > .badge-red, .badge-red:not(.disabled):not(:disabled):hover, .badge-red:not(.disabled):not(:disabled):active, .badge-red:not(.disabled):not(:disabled):focus, a:hover > .badge-red:not(.disabled):not(:disabled), a:active > .badge-red:not(.disabled):not(:disabled), a:focus > .badge-red:not(.disabled):not(:disabled) { - background-color: #e9654f; - color: #FFF; -} -.badge-orange { - background-color: #eb790a; - color: #FFF; -} -.badge-orange:hover, .badge-orange:active, .badge-orange:focus, a:hover > .badge-orange, a:active > .badge-orange, a:focus > .badge-orange, .badge-orange:not(.disabled):not(:disabled):hover, .badge-orange:not(.disabled):not(:disabled):active, .badge-orange:not(.disabled):not(:disabled):focus, a:hover > .badge-orange:not(.disabled):not(:disabled), a:active > .badge-orange:not(.disabled):not(:disabled), a:focus > .badge-orange:not(.disabled):not(:disabled) { - background-color: #f69332; - color: #FFF; -} -.badge-green { - background-color: #75b82d; - color: #FFF; -} -.badge-green:hover, .badge-green:active, .badge-green:focus, a:hover > .badge-green, a:active > .badge-green, a:focus > .badge-green, .badge-green:not(.disabled):not(:disabled):hover, .badge-green:not(.disabled):not(:disabled):active, .badge-green:not(.disabled):not(:disabled):focus, a:hover > .badge-green:not(.disabled):not(:disabled), a:active > .badge-green:not(.disabled):not(:disabled), a:focus > .badge-green:not(.disabled):not(:disabled) { - background-color: #8fd246; - color: #FFF; -} -.badge-skyblue { - background-color: #42a0f3; - color: #FFF; -} -.badge-skyblue:hover, .badge-skyblue:active, .badge-skyblue:focus, a:hover > .badge-skyblue, a:active > .badge-skyblue, a:focus > .badge-skyblue, .badge-skyblue:not(.disabled):not(:disabled):hover, .badge-skyblue:not(.disabled):not(:disabled):active, .badge-skyblue:not(.disabled):not(:disabled):focus, a:hover > .badge-skyblue:not(.disabled):not(:disabled), a:active > .badge-skyblue:not(.disabled):not(:disabled), a:focus > .badge-skyblue:not(.disabled):not(:disabled) { - background-color: #72b8f6; - color: #FFF; -} -.badge-dark { - background-color: #2D2D2D; - color: #FFF; -} -.badge-dark:hover, .badge-dark:active, .badge-dark:focus, a:hover > .badge-dark, a:active > .badge-dark, a:focus > .badge-dark, .badge-dark:not(.disabled):not(:disabled):hover, .badge-dark:not(.disabled):not(:disabled):active, .badge-dark:not(.disabled):not(:disabled):focus, a:hover > .badge-dark:not(.disabled):not(:disabled), a:active > .badge-dark:not(.disabled):not(:disabled), a:focus > .badge-dark:not(.disabled):not(:disabled) { - background-color: #474747; - color: #FFF; -} -.badge-light { - background-color: #eeeeec; - color: #111; -} -.badge-light:hover, .badge-light:active, .badge-light:focus, a:hover > .badge-light, a:active > .badge-light, a:focus > .badge-light, .badge-light:not(.disabled):not(:disabled):hover, .badge-light:not(.disabled):not(:disabled):active, .badge-light:not(.disabled):not(:disabled):focus, a:hover > .badge-light:not(.disabled):not(:disabled), a:active > .badge-light:not(.disabled):not(:disabled), a:focus > .badge-light:not(.disabled):not(:disabled) { - background-color: white; - color: #111; -} -.badge-turquoise { - background-color: #46bd9e; - color: #FFF; -} -.badge-turquoise:hover, .badge-turquoise:active, .badge-turquoise:focus, a:hover > .badge-turquoise, a:active > .badge-turquoise, a:focus > .badge-turquoise, .badge-turquoise:not(.disabled):not(:disabled):hover, .badge-turquoise:not(.disabled):not(:disabled):active, .badge-turquoise:not(.disabled):not(:disabled):focus, a:hover > .badge-turquoise:not(.disabled):not(:disabled), a:active > .badge-turquoise:not(.disabled):not(:disabled), a:focus > .badge-turquoise:not(.disabled):not(:disabled) { - background-color: #6ccab2; - color: #FFF; -} -.badge-yellow { - background-color: #f6d32d; - color: #FFF; -} -.badge-yellow:hover, .badge-yellow:active, .badge-yellow:focus, a:hover > .badge-yellow, a:active > .badge-yellow, a:focus > .badge-yellow, .badge-yellow:not(.disabled):not(:disabled):hover, .badge-yellow:not(.disabled):not(:disabled):active, .badge-yellow:not(.disabled):not(:disabled):focus, a:hover > .badge-yellow:not(.disabled):not(:disabled), a:active > .badge-yellow:not(.disabled):not(:disabled), a:focus > .badge-yellow:not(.disabled):not(:disabled) { - background-color: #f8dd5e; - color: #FFF; -} -.badge-brown { - background-color: #986a44; - color: #FFF; -} -.badge-brown:hover, .badge-brown:active, .badge-brown:focus, a:hover > .badge-brown, a:active > .badge-brown, a:focus > .badge-brown, .badge-brown:not(.disabled):not(:disabled):hover, .badge-brown:not(.disabled):not(:disabled):active, .badge-brown:not(.disabled):not(:disabled):focus, a:hover > .badge-brown:not(.disabled):not(:disabled), a:active > .badge-brown:not(.disabled):not(:disabled), a:focus > .badge-brown:not(.disabled):not(:disabled) { - background-color: #b5835a; - color: #FFF; -} -.badge-grey { - background-color: #77767b; - color: #FFF; -} -.badge-grey:hover, .badge-grey:active, .badge-grey:focus, a:hover > .badge-grey, a:active > .badge-grey, a:focus > .badge-grey, .badge-grey:not(.disabled):not(:disabled):hover, .badge-grey:not(.disabled):not(:disabled):active, .badge-grey:not(.disabled):not(:disabled):focus, a:hover > .badge-grey:not(.disabled):not(:disabled), a:active > .badge-grey:not(.disabled):not(:disabled), a:focus > .badge-grey:not(.disabled):not(:disabled) { - background-color: #919094; - color: #FFF; -} -.badge-primary { - background-color: #7951c0; - color: #FFF; -} -.badge-primary:hover, .badge-primary:active, .badge-primary:focus, a:hover > .badge-primary, a:active > .badge-primary, a:focus > .badge-primary, .badge-primary:not(.disabled):not(:disabled):hover, .badge-primary:not(.disabled):not(:disabled):active, .badge-primary:not(.disabled):not(:disabled):focus, a:hover > .badge-primary:not(.disabled):not(:disabled), a:active > .badge-primary:not(.disabled):not(:disabled), a:focus > .badge-primary:not(.disabled):not(:disabled) { - background-color: #9676ce; - color: #FFF; -} -.badge-secondary { - background-color: #4e63c9; - color: #FFF; -} -.badge-secondary:hover, .badge-secondary:active, .badge-secondary:focus, a:hover > .badge-secondary, a:active > .badge-secondary, a:focus > .badge-secondary, .badge-secondary:not(.disabled):not(:disabled):hover, .badge-secondary:not(.disabled):not(:disabled):active, .badge-secondary:not(.disabled):not(:disabled):focus, a:hover > .badge-secondary:not(.disabled):not(:disabled), a:active > .badge-secondary:not(.disabled):not(:disabled), a:focus > .badge-secondary:not(.disabled):not(:disabled) { - background-color: #7585d5; - color: #FFF; -} -.badge-warning { - background-color: #eb790a; - color: #FFF; -} -.badge-warning:hover, .badge-warning:active, .badge-warning:focus, a:hover > .badge-warning, a:active > .badge-warning, a:focus > .badge-warning, .badge-warning:not(.disabled):not(:disabled):hover, .badge-warning:not(.disabled):not(:disabled):active, .badge-warning:not(.disabled):not(:disabled):focus, a:hover > .badge-warning:not(.disabled):not(:disabled), a:active > .badge-warning:not(.disabled):not(:disabled), a:focus > .badge-warning:not(.disabled):not(:disabled) { - background-color: #f69332; - color: #FFF; -} -.badge-danger { - background-color: #e33d22; - color: #FFF; -} -.badge-danger:hover, .badge-danger:active, .badge-danger:focus, a:hover > .badge-danger, a:active > .badge-danger, a:focus > .badge-danger, .badge-danger:not(.disabled):not(:disabled):hover, .badge-danger:not(.disabled):not(:disabled):active, .badge-danger:not(.disabled):not(:disabled):focus, a:hover > .badge-danger:not(.disabled):not(:disabled), a:active > .badge-danger:not(.disabled):not(:disabled), a:focus > .badge-danger:not(.disabled):not(:disabled) { - background-color: #e9654f; - color: #FFF; -} -.badge-info { - background-color: #42a0f3; - color: #FFF; -} -.badge-info:hover, .badge-info:active, .badge-info:focus, a:hover > .badge-info, a:active > .badge-info, a:focus > .badge-info, .badge-info:not(.disabled):not(:disabled):hover, .badge-info:not(.disabled):not(:disabled):active, .badge-info:not(.disabled):not(:disabled):focus, a:hover > .badge-info:not(.disabled):not(:disabled), a:active > .badge-info:not(.disabled):not(:disabled), a:focus > .badge-info:not(.disabled):not(:disabled) { - background-color: #72b8f6; - color: #FFF; -} -.badge-success { - background-color: #75b82d; - color: #FFF; -} -.badge-success:hover, .badge-success:active, .badge-success:focus, a:hover > .badge-success, a:active > .badge-success, a:focus > .badge-success, .badge-success:not(.disabled):not(:disabled):hover, .badge-success:not(.disabled):not(:disabled):active, .badge-success:not(.disabled):not(:disabled):focus, a:hover > .badge-success:not(.disabled):not(:disabled), a:active > .badge-success:not(.disabled):not(:disabled), a:focus > .badge-success:not(.disabled):not(:disabled) { - background-color: #8fd246; - color: #FFF; -} - -/* 11.3 - Réseaux sociaux */ -.share-buttons { - margin-top: 15px; - margin-bottom: 15px; -} - -.reagir { - text-align: right; -} - -.btn-facebook { - background-color: #3B5998; - color: #FFF; -} -.btn-facebook:hover, .btn-facebook:active, .btn-facebook:focus, .btn-facebook:not(.disabled):not(:disabled):hover, .btn-facebook:not(.disabled):not(:disabled):active, .btn-facebook:not(.disabled):not(:disabled):focus { - background-color: #4c70ba; - color: #FFF; -} -.btn-twitter { - background-color: #55ACEE; - color: #FFF; -} -.btn-twitter:hover, .btn-twitter:active, .btn-twitter:focus, .btn-twitter:not(.disabled):not(:disabled):hover, .btn-twitter:not(.disabled):not(:disabled):active, .btn-twitter:not(.disabled):not(:disabled):focus { - background-color: #83c3f3; - color: #FFF; -} -.btn-googleplus { - background-color: #d34836; - color: #FFF; -} -.btn-googleplus:hover, .btn-googleplus:active, .btn-googleplus:focus, .btn-googleplus:not(.disabled):not(:disabled):hover, .btn-googleplus:not(.disabled):not(:disabled):active, .btn-googleplus:not(.disabled):not(:disabled):focus { - background-color: #dc6e60; - color: #FFF; -} -.btn-diaspora { - background-color: #313739; - color: #FFF; -} -.btn-diaspora:hover, .btn-diaspora:active, .btn-diaspora:focus, .btn-diaspora:not(.disabled):not(:disabled):hover, .btn-diaspora:not(.disabled):not(:disabled):active, .btn-diaspora:not(.disabled):not(:disabled):focus { - background-color: #495154; - color: #FFF; -} -.btn-mastodon { - background-color: #282c37; - color: #FFF; -} -.btn-mastodon:hover, .btn-mastodon:active, .btn-mastodon:focus, .btn-mastodon:not(.disabled):not(:disabled):hover, .btn-mastodon:not(.disabled):not(:disabled):active, .btn-mastodon:not(.disabled):not(:disabled):focus { - background-color: #3d4455; - color: #FFF; -} - -.previews-section { - display: flex; - align-content: flex-start; - flex-wrap: wrap; -} - -.preview-container { margin-bottom: 1em; - padding: 0.4em; - width: 100%; + border-bottom: 2px solid black; + content: 'Error: expected ";".\a \2577 \a 11 \2502 @include card()\a \2502 ^\a \2575 \a scss\\components\\_cards.scss 11:20 @import\a scss\\_drawing.scss 10:9 @import\a scss\\style.scss 21:9 root stylesheet'; } - -@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 { - border-radius: 3px 3px 3px 3px; - width: 100%; - margin: auto; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); -} - -.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 0.5s; - color: #FFF; - 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: white; -} - -.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: white; - text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); -} - -.preview-item:hover .preview-overlay { - opacity: 0.9; - transition: opacity 0.5s; - backdrop-filter: blur(2px); -} - -.comment-text { - margin-top: 0.8em; -} - -.card-preview time { - margin-bottom: 0.4em; - display: block; -} - -/*# sourceMappingURL=style.css.map */