qc-trousse-sdg 1.2.5 → 1.3.0-develop.1

package/public/css/qc-doc-sdg.css

@@ -1,144 +1,3 @@
-@charset "UTF-8";
-/*
-Return rem size from pixel size according to root font-size as define in settings
-Always use this function for rem values
-// root font-size : 100 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1rem; }
-
-// root font-size : 62.5 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1.6rem; }
-*/
-/*
-Return rem size from pixel size according to root font-size as define in settings
-Always use this function for rem values
-// root font-size : 100 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1rem; }
-
-// root font-size : 62.5 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1.6rem; }
-*/
-/* TODO voir si meilleure façon d'intégrer en scss... */
-.qc-icon {
-  display: inline-block;
-  content: "";
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% auto;
-  min-width: 32px;
-  height: 32px;
-}
-.qc-icon.qc-icon-sm {
-  min-width: 12px;
-  height: 12px;
-}
-.qc-icon.qc-icon-md {
-  min-width: 20px;
-  height: 20px;
-}
-.qc-icon.qc-icon-lg {
-  min-width: 40px;
-  height: 40px;
-}
-.qc-icon.qc-external-link {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#external-link);
-}
-.qc-icon.qc-warning {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#warning);
-}
-.qc-icon.qc-arrow-up-white {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#arrow-up-white);
-}
-.qc-icon.qc-clipboard {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#clipboard);
-}
-.qc-icon.qc-error {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#error);
-}
-.qc-icon.qc-error-white {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#error-white);
-}
-.qc-icon.qc-information {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#information);
-}
-.qc-icon.qc-information-white {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#information-white);
-}
-.qc-icon.qc-minus {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#minus);
-}
-.qc-icon.qc-plus {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#plus);
-}
-.qc-icon.qc-question-mark {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#question-mark);
-}
-.qc-icon.qc-success {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#success);
-}
-.qc-icon.qc-success-white {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#success-white);
-}
-.qc-icon.qc-xclose-white {
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#xclose-white);
-}
-.qc-icon.qc-xclose-blue {
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#xclose-blue);
-}
-.qc-icon.qc-chevron-blue, .qc-icon.qc-chevron-white {
-  width: 16px;
-  min-width: 16px;
-  height: 10px;
-}
-.qc-icon.qc-chevron-blue {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#chevron-blue);
-}
-.qc-icon.qc-chevron-white {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#chevron-white);
-}
-.qc-icon.qc-facebook {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#facebook);
-}
-.qc-icon.qc-linkedin {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#linkedin);
-  height: 30px;
-}
-.qc-icon.qc-twitter {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#twitter);
-}
-.qc-icon.qc-youtube {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#youtube);
-}
-.qc-icon.qc-warning-alert-icon {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#warning);
-}
-.qc-icon.qc-general-alert-icon {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#information);
-}
-.qc-icon.qc-search {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#loupe-piv-droite);
-}
-.qc-icon.qc-search-submit {
-  background-image: url(../img/qc-sprite.svg?v=1.2.5#loupe-piv-fonce);
-}
-
 qc-code {
   display: block;
   max-inline-size: var(--qc-max-content-width);
@@ -198,24 +57,138 @@ pre code button.copied .copied, pre .qc-code button.copied .copied {
   margin-top: var(--qc-spacer-lg);
 }
 
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 0.4rem;
+}
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1.6rem;
+}
+
+code.hljs {
+  padding: 0.4rem;
+}
+
+/* end baseline CSS */
+.hljs {
+  background: var(--qc-color-grey-pale);
+  color: var(--qc-color-blue-dark);
+}
+
+/* Base color: saturation 0; */
+.hljs-subst {
+  /* default */
+}
+
+/* purposely ignored */
+.hljs-comment {
+  color: var(--qc-color-grey-dark);
+}
+
+.hljs-tag,
+.hljs-punctuation {
+  color: var(--qc-color-blue-medium);
+}
+
+.hljs-tag .hljs-name,
+.hljs-tag .hljs-attr {
+  color: var(--qc-color-blue-dark);
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+
+/* User color: hue: 0 */
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: var(--qc-color-red-dark);
+}
+
+.hljs-title,
+.hljs-section {
+  color: var(--qc-color-red-dark);
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-operator,
+.hljs-selector-pseudo {
+  color: var(--qc-color-pink-regular);
+}
+
+/* Language color: hue: 90; */
+.hljs-literal {
+  color: var(--qc-color-green-regular);
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: var(--qc-color-green-dark);
+}
+
+/* Meta color: hue: 200 */
+.hljs-meta {
+  color: var(--qc-color-blue-medium);
+}
+
+.hljs-meta .hljs-string {
+  color: var(--qc-color-blue-regular);
+}
+
+/* Misc effects */
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
 .qc-shading-0 {
-  box-shadow: 0 0 0 var(--qc-color-grey-light);
+  border: 1px solid var(--qc-box_shadow-0-color);
 }
 
-.qc-shading-1, .btn.btn-primary {
-  box-shadow: 0 1px 4px var(--qc-color-grey-light);
+.qc-shading-1 {
+  box-shadow: 0 var(--qc-box_shadow-1-offset) var(--qc-box_shadow-1-blur) var(--qc-color-box_shadow);
 }
 
 .qc-shading-2 {
-  box-shadow: 0 2px 8px var(--qc-color-grey-light);
+  box-shadow: 0 var(--qc-box_shadow-2-offset) var(--qc-box_shadow-2-blur) var(--qc-color-box_shadow);
 }
 
 .qc-shading-3 {
-  box-shadow: 0 4px 16px var(--qc-color-grey-light);
+  box-shadow: 0 var(--qc-box_shadow-3-offset) var(--qc-box_shadow-3-blur) var(--qc-color-box_shadow);
 }
 
 .qc-shading-4 {
-  box-shadow: 0 6px 24px var(--qc-color-grey-light);
+  box-shadow: 0 var(--qc-box_shadow-4-offset) var(--qc-box_shadow-4-blur) var(--qc-color-box_shadow);
 }
 
 .btn {
@@ -223,6 +196,7 @@ pre code button.copied .copied, pre .qc-code button.copied .copied {
   font-size: var(--qc-font-size-md);
   line-height: var(--qc-line-height-md);
   font-weight: var(--qc-font-weight-regular);
+  font-family: var(--qc-font-family-content);
   display: inline-block;
   box-sizing: border-box;
   min-width: 11.2rem;
@@ -241,22 +215,24 @@ pre code button.copied .copied, pre .qc-code button.copied .copied {
   border: 1px solid transparent;
 }
 .btn.btn-primary {
-  color: #fff;
+  color: var(--qc-color-background);
   border-color: var(--qc-color-blue-piv);
   background-color: var(--qc-color-blue-piv);
+  box-shadow: 0 var(--qc-box_shadow-1-offset) var(--qc-box_shadow-1-blur) var(--qc-color-box_shadow);
 }
 .btn.btn-primary:hover {
-  border-color: #156bb2;
-  background-color: #156bb2;
+  border-color: var(--qc-color-blue-regular);
+  background-color: var(--qc-color-blue-regular);
 }
-.btn.btn-primary:focus {
-  border-color: var(--qc-color-blue-dark);
-  background-color: #156bb2;
+.btn.btn-primary:focus, .btn.btn-primary:focus-visible {
+  border-color: var(--qc-color-blue-regular);
+  background-color: var(--qc-color-blue-regular);
   box-shadow: 0 2px 8px rgba(34, 54, 84, 0.24), 0 0 0 2px var(--qc-color-blue-light);
+  outline: none;
 }
 .btn.btn-primary:active {
-  border-color: #3783c9;
-  background-color: #3783c9;
+  border-color: var(--qc-color-blue-regular_light);
+  background-color: var(--qc-color-blue-regular_light);
 }
 
 table.qc-table {
@@ -292,27 +268,71 @@ table.qc-table.qc-bordered tbody th, table.qc-table.qc-bordered tbody td {
   border-bottom: 1px solid var(--qc-color-grey-light);
 }
 
-main {
-  padding-bottom: var(--qc-spacer-lg);
+.ui-autocomplete {
+  max-height: calc(16rem + 2px) !important;
+  overflow-y: auto !important;
+  list-style-type: none !important;
+  padding-left: 0 !important;
+  margin: 0 !important;
+  border: 1px solid var(--qc-color-grey-medium);
+  background-color: var(--qc-color-background);
+  box-shadow: 0 var(--qc-box_shadow-4-offset) var(--qc-box_shadow-4-blur) var(--qc-color-box_shadow);
+  cursor: pointer;
 }
 
-.color-details {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+.ui-menu-item {
+  padding: 0 !important;
+  margin: 0 !important;
 }
-.color-details > div + div {
-  margin-left: var(--qc-spacer-md);
+
+.ui-menu-item-wrapper {
+  padding: 0.8rem;
 }
-.color-details + .color-details {
-  margin-top: var(--qc-spacer-md);
+
+.ui-state-active {
+  background-color: var(--qc-color-blue-pale);
 }
 
-.color-sample {
-  width: 4.8rem;
-  height: 4.8rem;
-  border-radius: 50%;
-  flex-shrink: 0;
+.ui-autocomplete::-webkit-scrollbar {
+  width: 8px;
+  margin-left: 5px;
+}
+
+/* Track */
+.ui-autocomplete::-webkit-scrollbar-track {
+  background: var(--qc-color-background);
+}
+
+/* Handle */
+.ui-autocomplete::-webkit-scrollbar-thumb {
+  background: var(--qc-color-blue-piv);
+  border-radius: 15px;
+}
+
+/* Handle on hover */
+.ui-autocomplete::-webkit-scrollbar-thumb:hover {
+  background: var(--qc-color-blue-piv);
+}
+
+.ui-helper-hidden-accessible {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+main {
+  margin-bottom: var(--qc-spacer-lg);
+}
+
+qc-color-doc {
+  display: block;
+  margin-bottom: var(--qc-spacer-md);
 }
 
 .title-samples {
@@ -338,6 +358,10 @@ main {
   font-family: var(--qc-font-family-header);
 }
 
+h1, h2, h3, h4, h5, h6 {
+  scroll-margin-top: 9.6rem;
+}
+
 #grid-samples {
   position: relative;
   text-align: center;
@@ -372,14 +396,19 @@ main {
   height: 100%;
 }
 
-.square-box {
+#liste-elevation {
+  display: flex;
+  gap: var(--qc-grid-gutter);
+  flex-wrap: wrap;
+}
+#liste-elevation [class*=qc-shading-] {
   display: flex;
   width: 12rem;
   height: 12rem;
   justify-content: center;
   align-items: center;
 }
-.square-box.qc-shading-0 {
+#liste-elevation [class*=qc-shading-].qc-shading-0 {
   border: 1px solid var(--qc-color-grey-light);
 }
 
@@ -389,14 +418,34 @@ a.pseudo-hover {
 }
 a.pseudo-active {
   color: var(--qc-color-link-active);
+  text-decoration: none;
 }
-a.visited {
-  color: var(--qc-color-link-visited);
+a.pseudo-focus {
+  color: var(--qc-color-link-hover);
+  text-decoration: none;
+  outline: 2px solid var(--qc-color-link-focus-outline);
+  outline-offset: 1px;
+}
+a.pseudo-visited {
+  color: var(--qc-color-link-visited) !important;
 }
 a.not-visited:visited:not(:hover) {
   color: var(--qc-color-link-text);
 }
 
+a.pseudo-visited span.qc-ext-link-img {
+  background: var(--qc-color-link-visited) !important;
+}
+a.pseudo-focus span.qc-ext-link-img {
+  background: var(--qc-color-link-hover) !important;
+}
+a.pseudo-hover span.qc-ext-link-img {
+  background: var(--qc-color-link-hover) !important;
+}
+a.pseudo-active span.qc-ext-link-img {
+  background: var(--qc-color-link-active) !important;
+}
+
 p, h1, h2, h3, h4, h5, h6 {
   -webkit-hyphens: auto;
           hyphens: auto;
@@ -406,182 +455,45 @@ table.component-attributes-description td:first-child {
   white-space: nowrap;
 }
 
-#custom-piv-search-form .input-group {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-}
-#custom-piv-search-form .input-group input {
-  width: 100%;
-  padding: 0.6rem 1.2rem;
-  border: 1px solid var(--qc-color-blue-dark);
-  border-right: none;
-}
-#custom-piv-search-form .input-group input:focus {
-  outline: 0.2rem solid var(--qc-color-blue-light);
-  border-right: 1px solid black;
-  z-index: 1;
-}
-#custom-piv-search-form .input-group input::-moz-placeholder {
-  font-size: var(--qc-font-size-sm);
-}
-#custom-piv-search-form .input-group input::placeholder {
-  font-size: var(--qc-font-size-sm);
-}
-#custom-piv-search-form .input-group button {
-  display: flex;
-  justify-content: center;
-  border: 1px solid var(--qc-color-blue-dark);
-  border-left: none;
-  background-color: white;
-  width: 4.16rem;
-}
-#custom-piv-search-form .input-group button:focus {
-  outline: 0.2rem solid var(--qc-color-blue-light);
-  border-left: 1px solid black;
-}
-#custom-piv-search-form .input-group button .qc-search-submit {
-  min-width: 2.4rem;
-  height: 2.4rem;
-  align-self: center;
-}
-#custom-piv-search-form .input-group button .sr-description {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  clip: rect(0 0 0 0);
-}
-
 qc-piv-footer + qc-code {
   margin-top: 0;
 }
 
-pre code.hljs {
+qc-doc-exemple {
   display: block;
-  overflow-x: auto;
-  padding: 1em;
+  margin-bottom: var(--qc-spacer-xl);
 }
 
-code.hljs {
-  padding: 3px 5px;
-}
-
-/*!
-  Theme: Default
-  Description: Original highlight.js style
-  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
-  Maintainer: @highlightjs/core-team
-  Website: https://highlightjs.org/
-  License: see project LICENSE
-  Touched: 2021
-*/
-/*
-This is left on purpose making default.css the single file that can be lifted
-as-is from the repository directly without the need for a build step
-
-Typically this "required" baseline CSS is added by `makestuff.js` during build.
-*/
-pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em;
+dl {
+  margin: 0 0 var(--qc-spacer-content-block-mb);
 }
-
-code.hljs {
-  padding: 3px 5px;
+dl dt {
+  font-weight: var(--qc-font-weight-content-medium);
 }
-
-/* end baseline CSS */
-.hljs {
-  background: #F3F3F3;
-  color: #444;
+dl dd {
+  margin-left: 0;
+  margin-bottom: var(--qc-spacer-list-item-mb);
 }
-
-/* Base color: saturation 0; */
-.hljs-subst {
-  /* default */
+dl dd + dd {
+  margin-top: calc(-1 * var(--qc-spacer-list-item-mb));
 }
-
-/* purposely ignored */
-.hljs-comment {
-  color: #697070;
-}
-
-.hljs-tag,
-.hljs-punctuation {
-  color: rgba(68, 68, 68, 0.6666666667);
-}
-
-.hljs-tag .hljs-name,
-.hljs-tag .hljs-attr {
-  color: #444;
-}
-
-.hljs-keyword,
-.hljs-attribute,
-.hljs-selector-tag,
-.hljs-meta .hljs-keyword,
-.hljs-doctag,
-.hljs-name {
-  font-weight: bold;
+dl dd + dd:has(.pseudo-focus) {
+  margin-top: calc(-1 * var(--qc-spacer-list-item-mb) + 6px);
 }
-
-/* User color: hue: 0 */
-.hljs-type,
-.hljs-string,
-.hljs-number,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-quote,
-.hljs-template-tag,
-.hljs-deletion {
-  color: #880000;
-}
-
-.hljs-title,
-.hljs-section {
-  color: #880000;
-  font-weight: bold;
-}
-
-.hljs-regexp,
-.hljs-symbol,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-link,
-.hljs-selector-attr,
-.hljs-operator,
-.hljs-selector-pseudo {
-  color: #ab5656;
-}
-
-/* Language color: hue: 90; */
-.hljs-literal {
-  color: #695;
-}
-
-.hljs-built_in,
-.hljs-bullet,
-.hljs-code,
-.hljs-addition {
-  color: #397300;
-}
-
-/* Meta color: hue: 200 */
-.hljs-meta {
-  color: #1f7199;
+dl.qc-list-inline dt, dl.qc-list-inline dd {
+  display: inline;
 }
-
-.hljs-meta .hljs-string {
-  color: #38a;
+dl.qc-list-inline dt::before {
+  display: block;
+  content: "";
+  margin-bottom: var(--qc-spacer-list-item-mb);
 }
 
-/* Misc effects */
-.hljs-emphasis {
-  font-style: italic;
+.table-overflow {
+  width: 100%;
+  overflow-x: auto;
 }
 
-.hljs-strong {
-  font-weight: bold;
+hr {
+  max-width: var(--qc-max-content-width);
 }