Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
Loading items

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Loading items
Show changes
Showing
with 346 additions and 66 deletions
......@@ -44,7 +44,7 @@
}
.candidate-table-row__affiliation {
@apply flex items-center justify-start whitespace-no-wrap py-1 pl-6 pr-4;
@apply flex items-center justify-start whitespace-nowrap py-1 pl-6 pr-4;
grid-area: affiliation;
}
......
.chip {
@apply
flex inline-flex items-center
py-2 px-3
text-xs
font-bold leading-none tracking-normal
whitespace-nowrap;
}
.chip--condensed {
@apply p-1;
}
.chip--black {
@apply bg-black text-white;
}
.chip--grey-700 {
@apply bg-grey-700 text-white;
}
.chip--grey-500 {
@apply bg-grey-500 text-white;
}
.chip--grey-125 {
@apply bg-grey-125 text-black;
}
.chip--blue-300 {
@apply bg-blue-300 text-white;
}
.chip--cyan-200 {
@apply bg-cyan-200 text-white;
}
.chip--cyan-500 {
@apply bg-cyan-500 text-white;
}
.chip--green-300 {
@apply bg-green-300 text-white;
}
.chip--green-400 {
@apply bg-green-400 text-white;
}
.chip--orange-300 {
@apply bg-orange-200 text-white;
}
.chip--violet-400 {
@apply bg-violet-400 text-white;
}
.chip--red-600 {
@apply bg-red-600 text-white;
}
.chip--hoveractive:hover {
&.chip--black {
@apply bg-grey-700;
}
&.chip--grey-700 {
@apply bg-grey-500;
}
&.chip--grey-500 {
@apply bg-grey-300;
}
&.chip--grey-125 {
@apply bg-grey-100;
}
}
.chip__icon {
@apply self-center cursor-pointer;
font-size: .7rem;
}
.chip--lg {
@apply py-2 pl-3;
}
.chip--select {
@apply relative p-0 inline-flex items-center;
select {
@apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;
appearance: none;
background: none;
}
&.chip--lg {
@apply p-0;
select {
@apply py-3 pl-4 pr-8;
}
}
.chip__icon {
@apply
absolute
right-0
pl-2 pr-3
cursor-pointer;
}
}
......@@ -65,6 +65,10 @@
@apply text-sm;
}
pre {
line-height: 1;
}
/* Contact lines are quite frequent so these are blacklisted for anchor style specifically. */
a:not(.contact-line):not(.content-block--nostyle) {
@apply underline;
......
.dropdown-button {
@apply relative;
}
.dropdown-button__choices {
@apply hidden absolute shadow-md z-10 bottom-0 right-0 transform translate-y-full;
}
.dropdown-button:hover .dropdown-button__choices {
@apply block max-w-sm;
}
.dropdown-button__choice {
@apply block no-underline text-left;
a:hover {
@apply no-underline;
}
}
.dropdown {
@apply relative inline-block;
}
.dropdown__content {
@apply hidden absolute shadow-md z-10;
}
.dropdown:hover .dropdown__content {
@apply block max-w-sm;
}
.dropdown__content-item {
@apply block no-underline;
a:hover {
@apply no-underline;
}
}
.dropdown--right .dropdown__content {
@apply right-0;
}
......@@ -14,24 +14,33 @@
@apply absolute w-full h-full pointer-events-none;
content: "";
box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05);
}
&,
&--row-items {
/* Allow bypass defualt positioning */
&:not(.form-field__wrapper--freeform) {
.form-field__control + .form-field__control {
@apply ml-4;
}
}
&--col-items {
}
.form-field__wrapper--row-items {
@apply flex-row;
.form-field__control + .form-field__control {
@apply ml-4 mt-0;
}
}
.form-field__wrapper--col-items {
@apply flex-col;
.form-field__control + .form-field__control {
@apply ml-0 mt-4;
}
}
}
.form-field__error,
.form-field__help-text {
......
.modal-blur {
/* Add the blur effect */
/* filter: blur(8px);
-webkit-filter: blur(8px); */
}
.modal__overlay {
@apply
fixed
top-0 left-0 bottom-0 right-0
z-50
flex items-center flex-row
bg-grey-125 bg-opacity-75
cursor-pointer overflow-auto;
}
.modal__content {
@apply
inline-block
flex flex-row flex-grow items-center justify-center
max-w-full
h-full
m-auto
cursor-auto pointer-events-none outline-none;
}
.modal__container {
@apply
h-auto
p-3
pointer-events-auto
md:p-0;
.modal__container-body {
@apply bg-white relative;
}
}
.modal__close {
@apply
absolute
right-0
top-0
h-8
w-8
flex
items-center
justify-center
z-50
m-auto
text-black
bg-white;
}
.ReactModal__Body--open {
@apply overflow-hidden;
}
.pagination {
@apply inline-flex mx-auto;
@apply inline-flex;
&:not(.pagination--inline) {
@apply mx-auto;
}
}
.pagination-container {
......
.candidate-card-list {
@apply grid grid-flow-row gap-0 row-gap-4;
@apply grid grid-flow-row gap-0 gap-y-4;
}
@responsive {
.candidate-card-list__item-wrapper {
@apply px-2 border-r border-grey-100;
}
......@@ -14,4 +13,3 @@
.candidate-card-list__item-wrapper--noborder {
@apply border-0;
}
}
......@@ -22,12 +22,12 @@
@apply gap-4;
grid-template-areas: "brand main-links social";
grid-template-columns: 25% 1fr 25%;
grid-template-columns: 34% 1fr 25%;
}
}
.footer-collapsible__toggle {
@apply flex items-center cursor-pointer;
@apply flex items-center cursor-pointer lg:cursor-auto;
&:after {
content: "\e925";
......@@ -40,11 +40,7 @@
transform: rotate(-180deg);
}
@screen lg {
@apply cursor-auto;
&:after {
@apply hidden;
}
@apply lg:hidden
}
}
.hero {
@apply py-4;
@screen md {
@apply py-24;
@apply py-8 md:py-24;
}
.hero--condensed {
@apply py-8 md:py-16;
}
.hero--image {
......
......@@ -16,6 +16,12 @@
}
}
.navbar--simple .navbar__content {
grid-template-areas: "brand menutoggle"
"main main"
"actions actions";
}
.navbar__brand {
grid-area: brand;
}
......@@ -53,7 +59,7 @@
}
.navbar-menu__submenu .navbar-menu__link {
@apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-no-wrap;
@apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-nowrap;
}
.navbar-menu__link,
......@@ -99,6 +105,11 @@
}
}
.navbar--simple .navbar__content {
grid-template-areas: "brand main actions";
grid-template-columns: auto 1fr auto;
}
.navbar__section--expandable {
@apply bg-transparent px-0 py-0 m-0;
}
......
......@@ -8,19 +8,11 @@
.subnav-aside__close,
.subnav-aside__close:hover {
@apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline;
@screen xl {
@apply block;
}
@apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline xl:block;
}
.subnav-aside__item {
@apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50;
@screen lg {
@apply py-8;
}
@apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50 lg:py-8;
}
.subnav-aside__item--visible {
......
.vertical-navbar {
@apply p-8 border-l border-grey-100 bg-grey-50 bg-opacity-50;
}
.vertical-navbar__items {
@apply h-allcaps leading-loose;
}
.vertical-navbar__item--active {
@apply font-bold bg-grey-125 block -mx-8 px-8;
}
File mode changed from 100755 to 100644
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
@import url('https://gfonts.pirati.cz/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
/* Icons */
@import "./atoms/icons.pcss";
......@@ -15,9 +15,14 @@
*/
@import "tailwindcss/components";
/* Tippy.js styles */
@import 'tippy.js/dist/tippy.css';
/**
* Custom components
*/
@import "./atoms/animations.pcss";
@import "./atoms/alert.pcss";
@import "./atoms/avatar.pcss";
@import "./atoms/card.pcss";
@import "./atoms/contact-line.pcss";
......@@ -30,10 +35,13 @@
@import "./atoms/icons.pcss";
@import "./atoms/list.pcss";
@import "./atoms/paragraph.pcss";
@import "./atoms/full-calendar.pcss";
@import "./atoms/quotation.pcss";
@import "./atoms/social-icon.pcss";
@import "./atoms/super-button.pcss";
@import "./atoms/table.pcss";
@import "./atoms/text-shadow.pcss";
@import "./atoms/tooltip.pcss";
@import "./molecules/article-card.pcss";
@import "./molecules/badge.pcss";
......@@ -41,9 +49,13 @@
@import "./molecules/calendar.pcss";
@import "./molecules/candidate-card.pcss";
@import "./molecules/candidate-table-row.pcss";
@import "./molecules/chips.pcss";
@import "./molecules/content-block.pcss";
@import "./molecules/dropdown.pcss";
@import "./molecules/dropdown-button.pcss";
@import "./molecules/flip-clock.pcss";
@import "./molecules/form-field.pcss";
@import "./molecules/modal.pcss";
@import "./molecules/pagination.pcss";
@import "./molecules/program-point-list.pcss";
@import "./molecules/social-icon-group.pcss";
......@@ -56,8 +68,10 @@
@import "./organisms/navbar.pcss";
@import "./organisms/subnav.pcss";
@import "./organisms/region-map.pcss";
@import "./organisms/vertical-navbar.pcss";
@import "./templates/candidate-detail.pcss";
@import "./templates/cf2021.pcss";
/**
* This injects Tailwind's utility classes and any utility classes registered
......@@ -67,12 +81,12 @@
::-moz-selection {
color: theme("colors.white");
background: theme("colors.grey.500");
background: theme("colors.cyan.300");
}
::selection {
color: theme("colors.white");
background: theme("colors.grey.500");
background: theme("colors.cyan.300");
}
:root {
......@@ -101,7 +115,22 @@ a.icon-link:hover {
@apply hidden;
}
/**
* Custom utilities
*/
@import "./utils.pcss";
.copyleft {
transform: matrix(-1, 0, 0, 1, 0, 0) !important;
}
.inline-block-nogap {
/* Avoid gaps between inline-block elements */
font-size: 0;
}
/* auto-size iframe according to aspect ratio while keeping the 100% height */
.iframe-container {
@apply relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.iframe-container iframe {
@apply absolute top-0 left-0 w-full h-full;
}
.candidate-detail__hero {
z-index: -1;
}
.candidate-detail__sidebar {
@apply bg-white;
@apply bg-white z-10;
@screen lg {
margin-top: -6rem;
......
.cf2021 {
@apply grid gap-8;
grid-template-areas: "title"
"video"
"notifications"
"posts";
@screen lg {
grid-template-areas: "title title"
"video notifications"
"posts notifications";
grid-template-rows: auto auto 1fr;
grid-template-columns: theme("width.7/12") 1fr;
}
@screen xl {
grid-template-columns: theme("width.2/3") 1fr;
}
}
.cf2021__title {
grid-area: title;
}
.cf2021__video {
grid-area: video;
}
.cf2021__notifications {
grid-area: notifications;
}
.cf2021__posts {
grid-area: posts;
}
.copyleft {
transform: matrix(-1, 0, 0, 1, 0, 0) !important;
}
.inline-block-nogap {
/* Avoid gaps between inline-block elements */
font-size: 0;
}
File mode changed from 100755 to 100644