optimized-react-component-library-xyz123 2.2.6 → 2.2.7

package/src/css/styles.css

@@ -10,95 +10,12 @@
   --error: #8e0039;
   --main: #ffffff;
   --info: #545454;
+  --alertintext: #234b96;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
   --background-third: #414141;
 }
 
-body {
-  color: var(--text);
-}
-
-body,
-#root {
-  min-height: 100vh;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-}
-
-html {
-  font-size: 62.5%; /* 1rem = 10px */
-}
-
-body {
-  font-family: Arial;
-  font-size: 1.6rem;
-  font-weight: 400;
-  background-color: var(--background);
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-body a {
-  text-decoration: underline;
-  text-underline-offset: 0.35rem;
-  line-height: 2rem;
-  display: inline-flex;
-  align-items: center;
-  color: var(--action);
-}
-
-body a:hover {
-  text-decoration: underline 0.2rem;
-}
-
-#root {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin: 0;
-}
-
-main {
-  flex: 1;
-}
-
-#main-content:focus:focus-visible,
-h1:focus:focus-visible,
-h2:focus:focus-visible,
-#pts-form-id-error-summary:focus:focus-visible,
-#pts-error-summary:focus:focus-visible {
-  outline: none !important;
-  border: none;
-}
-
-h1,
-h2,
-h3 {
-  margin: 0;
-  margin-bottom: 3.6rem;
-}
-
-h1 {
-  font-size: 2.4rem;
-}
-
-h2 {
-  font-size: 2rem;
-  width: 100%;
-}
-
-h3 {
-  font-size: 1.6rem;
-}
-
-h4 {
-  margin: 0;
-  font-size: 1.6rem;
-}
-
 #main-content {
   padding-top: 3.6rem;
   padding-bottom: 6.4rem;
@@ -108,24 +25,6 @@ h4 {
   width: 100%;
 }
 
-section {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--main);
-  padding: 3.6rem;
-  margin: 1.6rem 0.8rem;
-  border-radius: 0.4rem;
-  margin-left: 0.8rem;
-  margin-right: 0.8rem;
-  margin-top: 1.6rem;
-}
-
-
-p[aria-live='assertive']:empty {
-  margin: 0;
-  padding: 0;
-}
-
 .pts-root-categoryDescription {
   margin-top: 0px;
 }
@@ -348,300 +247,15 @@ input:focus-visible:-webkit-autofill {
   text-decoration: underline 0.2rem;
 }
 
-/**Header with navigation**/
-
-
-
-.pts-navigation-header-container {
-  display: flex;
-  min-height: 80px;
-  padding: 0px 70px;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--main);
-}
-
-.pts-navigation-header-content {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-}
-
-
-.pts-navigation-header-logo svg {
-  height: 4.7rem;
-  width: auto;
-}
-
-.pts-navigation-header-headline-container{
-  display:flex;
-  justify-content: center;
-  align-items: flex-end;
-}
-
-.pts-navigation-header-headline-container p{
-  position: relative;
-  font-family: 'Aeonik';
-  font-size: 24px;
-  font-weight: 700;
-  top: 8px;
-}
-
-.pts-navigation-header-icons{
-  position: relative;
-  top: 2px;
-}
-
-.pts-close-icon{
-  position: relative;
-  bottom: -1px;
-}
-
-.pts-open-icon{
-  position: relative;
-  top: 4px;
-}
-
-.pts-navigation-overlay{
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 998;
-}
-
-.pts-navigation-header-nav-container{
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  align-items: flex-end;
-  height: 5rem;
-}
-
-.pts-navigation-header-nav-container button {
-    background: none;
-    line-height: 2.4rem;
-    text-decoration-skip-ink: none;
-    border: none;
-    color: var(--action);
-    font-size: 1.6rem;
-    padding: 0;
-    cursor: pointer;
-    width: 13rem;
-    z-index: 900;
-}
-
-.pts-navigation-header-button-label {
-  position: relative;
-  padding-left: 0.8rem;
-}
-
-
-/******NAVIGATION MENU********/
-.pts-navigation-menu-container {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 100%;
-    max-width: 570px;
-    z-index: 999;
-    opacity: 0;
-    transform: translateX(100%);
-    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ;
-}
-
-.pts-navigation-menu-container.open {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-
-.pts-navigation-close-text {
-  padding-left: 0.8rem;
-  font-size: 16px;
-}
-
-.pts-navigation-link-list, 
-.pts-navigation-link,
-.pts-sub-navigation-list {
-  all: unset;
-  list-style: none;
-  background-color:var(--main);;
-}
-
-.pts-navigation-link-list {
-  width: 100%;
-  padding-inline-start: 0px;
-}
-
-.pts-navigation-button a,
-.pts-sub-navigation-item a {
-  text-decoration: none;
-  color: var(--text)
-}
-
-.pts-navigation-link-expand-button {
-  border: none;
-  padding: 0;
-  cursor: pointer;
-}
-
-.pts-sub-navigation-container {
-    background-color: #d5b9dd;
-    border-left: var(--action) 5px solid;
-    padding-left: 3.6rem;
-    display: flex ;
-    align-items: flex-end ;
-    gap: 18px ;
-}
-
-.pts-sub-navigation-list {
-    display:block;
-    width: 100%;
-}
-
-.pts-sub-navigation-item {
-    height: 5.1rem;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    border-bottom: 2px solid var(--background) ;
-    padding-left: 3rem;
-}
-
-
-.pts-navigation-button,
-.pts-navigation-close-container {
-    padding: 2.1rem 3.6rem;
-    border-width: 0px;
-    border-bottom: 2px solid var(--background);
-    background-color: var(--main);
-    text-align: left;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.pts-navigation-close-button {
-  border: none;
-  color: var(--action);
-  background-color: var(--main);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  cursor: pointer;
-}
-
-/*******Breadcrumbs********/
-.pts-breadcrumbs nav {
-    background-color: unset;
-    position: unset;
-    display: flex;
-}
-
-.pts-breadcrumbs {
-    background-color: var(--background-third);
-    height: 4rem;
-    display: flex;
-    align-items: center;
-    padding-left: 6rem;
-    padding-top: 2px;
-    
-}
-
-.pts-breadcrumbs ol{
-  all: unset;
-}
-
-.pts-breadcrumbs li{
-  all: unset;
-  list-style: none;
-}
-
-
-.pts-breadcrumbs a:hover {
-    color: var(--main);
-    text-decoration: underline 2px;
-}
-
-.pts-breadcrumbs a {
-   text-decoration: underline;
-}
-
-.pts-crumb-label,
-.pts-breadcrumbs a {
-  color: var(--main);
-  position: relative;
-  line-height: 2rem;
-}
-
-.pts-breadcrumbs svg {
-  margin: 0 1.6rem;
-  top: 3px;
-  position: relative;
-}
-
-
-/******SEARCH BAR*******/
-.pts-searchBar-container {
-    height: 7rem;
-    background-color: var(--background);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.pts-searchBar-button {
-    height: 3.9rem;
-    background-color: var(--action);
-    border-radius: 8px;
-    border: var(--action) solid 1px;
-    color: var(--main);
-}
-
-.pts-searchBar-Button svg {
-    margin-right: 0.5rem;
-}
-
-.pts-searchBar-container input {
-    border-radius: 8px;
-    width: 65vw;
-    border: var(--action) solid 1px;
-    margin-right: -10px;
-    padding: 1rem;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-
 /* ---------- TextBODY ---------- */
 
 .pts-textBody-container p {
   margin-bottom: 1.6rem;
 }
 
-.pts-standard-link a{
-  align-items: start;
-}
-
-.pts-standard-link-text{
-  margin-top: 2px;
-}
-
-.pts-standard-link-icon{
+.MoreInfoIcon {
   margin-top: 2px;
 }
-.pts-icon-circle svg{
-    width: 1.6rem;
-    height: 1.6rem;
-}
 
 .MoreInfoIcon svg {
   width: 1.6rem;
@@ -653,9 +267,7 @@ input:focus-visible:-webkit-autofill {
   margin-right: 1.6rem;
 }
 
-
-.MoreInfoIcon svg path,
-.MoreInfoIcon {
+.MoreInfoIcon svg path {
   fill: var(--main);
 }
 
@@ -1082,6 +694,38 @@ input:focus-visible:-webkit-autofill {
     transform: rotate(360deg);
   }
 }
+/* ---------- ALERT IN TEXT ---------- */
+.pts-alertInText-container {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin-top: 3.2rem;
+}
+.pts-alertInText-left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border: 1px solid var(--alertintext);
+  background-color: var(--alertintext);
+  padding: 8px;
+  padding-top: 16px;
+}
+.pts-alertInText-right {
+  display: flex;
+  padding: 0px 16px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border: 1px solid var(--alertintext);
+  color: var(--text);
+}
+
 /*-----------ALWAYS IN THE END OF STYLES----------------*/
 
 .cleanPadding {
@@ -1105,107 +749,3 @@ input:focus-visible:-webkit-autofill {
   white-space: nowrap;
   border: 0;
 }
-
-
-
-
-/****New STUFF****/
-.pts-collapse {
-  position: relative;
-}
-
-.pts-collapse-button {
-  background-color: var(--action);
-  color: white;
-  cursor: pointer;
-  padding: 12px 16px;
-  width: 100%;
-  border: none;
-  border-radius: 8px;
-  outline: none;
-  display: grid;
-  text-align: left;
-  grid-template-columns: 95% 5%;
-  align-items: center;
-  font-size: 16px;
-}
-
-.pts-collapse-button.open {
-  border-radius: 8px 8px 0 0;
-}
-
-.pts-collapse-title {
-    all: unset;
-    font-family: Arial;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-}
-
-.pts-collapse-body {
-  position: relative;
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s ease;
-}
-
-.pts-collapse-body.open {
-  grid-template-rows: 1fr;
-  border: 2px solid var(--background);
-  border-top: none;
-  border-radius:0 0 8px 8px;
-}
-
-.pts-collapse-content {
-  overflow: hidden;
-}
-
-
-/******Links ********/
-
-.pts-icon-circle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  width: 2rem;         
-  height: 2rem;
-  border-radius: 50%;  
-  border: 2px solid var(--action);
-  background-color: var(--action); 
-  margin-right: 1.6rem;
-}
-
-.pts-icon-circle.pts-fileIcon svg{
-   margin-left: 2px;
-}
-  
-.pts-linkList-container {
-  margin: 0;
-  padding: 0;
-}
-
-.pts-linkList-container ul {
-  all :unset;
-  margin: 0;
-  padding: 0;
-}
-.pts-linkList-container li {
-  padding: 6px;
-  list-style: none;
-}
-
-[hidden]{
-  display:none;
-}
-
-
-@media (prefers-reduced-motion: reduce) {
-  .pts-collapse-body {
-    transition: none !important;
-  }
-
-   .pts-navigation-menu-container {
-    transition: none !important;
-  }
-}