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

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 885 additions and 286 deletions
source/css/atoms/container.pcss
View file @ aac6d1d3
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
} }
@responsive {
/* Removes default container padding from the element. */ /* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */ /* @note: needs to be kept in sync with tailwind configuration */
.container-padding--zero { .container-padding--zero {
...@@ -27,4 +26,3 @@ ...@@ -27,4 +26,3 @@
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
}
source/css/atoms/form-field.pcss
View file @ aac6d1d3
.text-input-addon { .text-input-addon {
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-no-wrap border border-grey-200 transition duration-200; @apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-nowrap border border-grey-200 transition duration-200;
} }
.text-input { .text-input {
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
@apply relative flex; @apply relative flex;
input { input {
@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-grey-200 border border-grey-200 transition duration-200; @apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-200 transition duration-200;
&:hover:not([disabled]):not([readonly]) { &:hover:not([disabled]):not([readonly]) {
@apply border-grey-300; @apply border-grey-300;
...@@ -127,6 +127,7 @@ ...@@ -127,6 +127,7 @@
&:checked { &:checked {
@apply bg-blue-300 border-transparent; @apply bg-blue-300 border-transparent;
} }
&[disabled] { &[disabled] {
......
source/css/atoms/full-calendar.pcss 0 → 100644
View file @ aac6d1d3
:root {
--fc-button-bg-color: #000;
--fc-button-border-color: #000;
--fc-button-hover-bg-color: #f9ce05;
--fc-button-hover-border-color: #f9ce05;
--fc-button-active-bg-color: #f9ce05;
--fc-button-active-border-color: #f9ce05;
--fc-event-bg-color: #fea86a;
--fc-event-border-color: #fea86a;
--fc-border-color: #ed9654;
--fc-today-bg-color: #ed9654;
--fc-daygrid-event-dot-width: 4px;
}
.fc {
@apply font-condensed;
}
.fc-col-header {
width: 100%!important;
}
/* Don't underline only when there is no href attribute defined. */
.fc .fc-col-header-cell-cushion:not([href]),
.fc .fc-daygrid-day-number:not([href]) {
@apply no-underline;
}
.fc .fc-col-header-cell {
@apply bg-orange-300 p-3 font-alt text-white text-xl capitalize;
}
.fc .fc-button {
@apply font-alt rounded-none px-5 py-2 duration-150;
}
.fc .fc-button:hover:not(:disabled),
.fc .fc-button:active:not(:disabled){
@apply text-black;
}
.fc .fc-event {
@apply p-1 rounded-none border-none text-sm;
}
.fc .fc-toolbar-title,
.fc .fc-today-button {
@apply capitalize;
}
.fc .fc-daygrid-day-number {
@apply font-alt text-3xl text-orange-300;
}
.fc .fc-multimonth-daygrid .fc-daygrid-day-number {
@apply text-base;
}
.fc .fc-day-today .fc-daygrid-day-number {
@apply text-white;
}
source/css/atoms/heading.pcss
View file @ aac6d1d3
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
} }
.h-alt { .h-alt {
@apply font-alt font-normal leading-negative; @apply font-alt font-normal;
line-height: 0.96;
} }
.h-allcaps { .h-allcaps {
...@@ -11,40 +12,46 @@ ...@@ -11,40 +12,46 @@
} }
@responsive {
.head-alt-xl, .head-alt-xl,
.content-block .head-alt-xl { .content-block .head-alt-xl {
@apply text-7xl font-alt font-normal leading-negative; @apply text-7xl font-alt font-normal;
line-height: 0.96;
} }
.head-alt-lg, .head-alt-lg,
.content-block .head-alt-lg { .content-block .head-alt-lg {
@apply text-6xl font-alt font-normal leading-negative; @apply text-6xl font-alt font-normal;
line-height: 0.96;
} }
.head-alt-md, .head-alt-md,
.content-block .head-alt-md { .content-block .head-alt-md {
@apply text-4xl font-alt font-normal leading-negative; @apply text-4xl font-alt font-normal;
line-height: 0.96;
} }
.head-alt-base, .head-alt-base,
.content-block .head-alt-base { .content-block .head-alt-base {
@apply text-3xl font-alt font-normal leading-negative; @apply text-3xl font-alt font-normal;
line-height: 0.96;
} }
.head-alt-sm, .head-alt-sm,
.content-block .head-alt-sm { .content-block .head-alt-sm {
@apply text-2xl font-alt font-normal leading-negative; @apply text-2xl font-alt font-normal;
line-height: 0.96;
} }
.head-alt-xs, .head-alt-xs,
.content-block .head-alt-xs { .content-block .head-alt-xs {
@apply text-xl font-alt font-normal leading-negative; @apply text-xl font-alt font-normal;
line-height: 0.96;
} }
.head-alt-2xs, .head-alt-2xs,
.content-block .head-alt-2xs { .content-block .head-alt-2xs {
@apply text-lg font-alt font-normal leading-negative; @apply text-lg font-alt font-normal;
line-height: 0.96;
} }
...@@ -125,5 +132,3 @@ ...@@ -125,5 +132,3 @@
.content-block .head-allcaps-heavy-4xs { .content-block .head-allcaps-heavy-4xs {
@apply text-sm font-condensed font-bold uppercase leading-tight; @apply text-sm font-condensed font-bold uppercase leading-tight;
} }
}
source/css/atoms/horizontal-rule.pcss
View file @ aac6d1d3
hr:not(.hr--unstyled) { hr:not(.hr--unstyled) {
@apply border-t border-grey-100 my-4; @apply border-t border-grey-100 my-4 md:my-8;
@screen md {
@apply my-8;
}
&.hr--big { &.hr--big {
@apply my-8; @apply my-8 md:my-16;
@screen md {
@apply my-16;
}
} }
&.hr--condensed { &.hr--condensed {
@apply my-2; @apply my-2 md:my-4;
@screen md {
@apply my-4;
}
} }
} }
source/css/atoms/icons.pcss
View file @ aac6d1d3
@font-face { @font-face {
font-family: 'pirati-ui'; font-family: 'pirati-ui';
src: url('../fonts/pirati-ui.eot?71e4e2c92abaa13920ac90278872d7d4'); src: url('../fonts/pirati-ui.eot?964zxx');
src: url('../fonts/pirati-ui.eot?71e4e2c92abaa13920ac90278872d7d4#iefix') format('embedded-opentype'), src: url('../fonts/pirati-ui.eot?964zxx#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?71e4e2c92abaa13920ac90278872d7d4') format('truetype'), url('../fonts/pirati-ui.ttf?964zxx') format('truetype'),
url('../fonts/pirati-ui.woff?71e4e2c92abaa13920ac90278872d7d4') format('woff'), url('../fonts/pirati-ui.woff?964zxx') format('woff'),
url('../fonts/pirati-ui.svg?71e4e2c92abaa13920ac90278872d7d4#pirati-ui') format('svg'); url('../fonts/pirati-ui.svg?964zxx#pirati-ui') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
...@@ -26,117 +25,363 @@ ...@@ -26,117 +25,363 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.ico--lock-open:before { content: "\e949"; } .ico--mastodon:before {
.ico--lock:before { content: "\e94a"; } content: "\e973";
.ico--dots-three-vertical:before { content: "\e940"; } }
.ico--dots-three-horizontal:before { content: "\e941"; } .ico--helios:before {
.ico--log-out:before { content: "\e942"; } content: "\e96e";
.ico--pin:before { content: "\e943"; } }
.ico--edit-pencil:before { content: "\e929"; } .ico--redmine:before {
.ico--at:before { content: "\e905"; } content: "\e96f";
.ico--strategy:before { content: "\e932"; } }
.ico--pig:before { content: "\e928"; } .ico--zulip:before {
.ico--thermometer:before { content: "\e90a"; } content: "\e970";
.ico--pirati:before { content: "\e90d"; } }
.ico--stackshare:before { content: "\e90f"; } .ico--forum:before {
.ico--open-source:before { content: "\e90e"; } content: "\e971";
.ico--search:before { content: "\e913"; } }
.ico--switch:before { content: "\e94b"; } .ico--pirati:before {
.ico--loop:before { content: "\e94c"; } content: "\e90d";
.ico--repeat:before { content: "\e94c"; } }
.ico--player:before { content: "\e94c"; } .ico--jitsi:before {
.ico--reload:before { content: "\e94c"; } content: "\e90f";
.ico--refresh:before { content: "\e94c"; } }
.ico--update:before { content: "\e94c"; } .ico--open-source:before {
.ico--synchronize:before { content: "\e94c"; } content: "\e90e";
.ico--arrows:before { content: "\e94c"; } }
.ico--spinner:before { content: "\e94d"; } .ico--donation-full:before {
.ico--loading:before { content: "\e94d"; } content: "\e96c";
.ico--loading-wheel:before { content: "\e94d"; } }
.ico--refresh1:before { content: "\e94d"; } .ico--donation-outline:before {
.ico--repeat1:before { content: "\e94d"; } content: "\e96d";
.ico--busy:before { content: "\e94d"; } }
.ico--wait:before { content: "\e94d"; } .ico--strategy:before {
.ico--arrow:before { content: "\e94d"; } content: "\e932";
.ico--bullhorn:before { content: "\e944"; } }
.ico--bin:before { content: "\e945"; } .ico--pig:before {
.ico--trashcan:before { content: "\e945"; } content: "\e928";
.ico--remove:before { content: "\e945"; } }
.ico--delete:before { content: "\e945"; } .ico--thermometer:before {
.ico--recycle:before { content: "\e945"; } content: "\e90a";
.ico--dispose:before { content: "\e945"; } }
.ico--cross:before { content: "\e937"; } .ico--menu:before {
.ico--checkbox-checked:before { content: "\e938"; } content: "\e933";
.ico--quill:before { content: "\e939"; } }
.ico--feather:before { content: "\e939"; } .ico--chevron-right:before {
.ico--write:before { content: "\e939"; } content: "\e923";
.ico--edit:before { content: "\e939"; } }
.ico--sphere:before { content: "\e93a"; } .ico--chevron-left:before {
.ico--globe:before { content: "\e93a"; } content: "\e924";
.ico--internet:before { content: "\e93a"; } }
.ico--wikipedia:before { content: "\e93b"; } .ico--chevron-down:before {
.ico--brand:before { content: "\e93b"; } content: "\e925";
.ico--youtube:before { content: "\e936"; } }
.ico--users:before { content: "\e934"; } .ico--chevron-up:before {
.ico--group:before { content: "\e934"; } content: "\e926";
.ico--team:before { content: "\e934"; } }
.ico--members:before { content: "\e934"; } .ico--link-horizontal:before {
.ico--community:before { content: "\e934"; } content: "\e910";
.ico--collaborate:before { content: "\e934"; } }
.ico--book:before { content: "\e935"; } .ico--beer:before {
.ico--read:before { content: "\e935"; } content: "\e909";
.ico--reading:before { content: "\e935"; } }
.ico--bubbles:before { content: "\e930"; } .ico--food:before {
.ico--map:before { content: "\e914"; } content: "\e968";
.ico--compass:before { content: "\e915"; } }
.ico--folder-open:before { content: "\e916"; } .ico--dots-three-vertical:before {
.ico--folder:before { content: "\e917"; } content: "\e940";
.ico--drawer:before { content: "\e918"; } }
.ico--stop:before { content: "\e919"; } .ico--dots-three-horizontal:before {
.ico--github:before { content: "\e91a"; } content: "\e941";
.ico--clock:before { content: "\e91b"; } }
.ico--calendar:before { content: "\e91c"; } .ico--log-out:before {
.ico--flickr:before { content: "\e91d"; } content: "\e942";
.ico--instagram:before { content: "\e91e"; } }
.ico--twitter:before { content: "\e91f"; } .ico--envelope:before {
.ico--newspaper:before { content: "\e920"; } content: "\e908";
.ico--cart:before { content: "\e921"; } }
.ico--home:before { content: "\e922"; } .ico--pin:before {
.ico--link:before { content: "\e912"; } content: "\e943";
.ico--power:before { content: "\e90c"; } }
.ico--house:before { content: "\e93f"; } .ico--at:before {
.ico--rocket:before { content: "\e946"; } content: "\e905";
.ico--jet:before { content: "\e946"; } }
.ico--speed:before { content: "\e946"; } .ico--glass:before {
.ico--spaceship:before { content: "\e946"; } content: "\e967";
.ico--fast:before { content: "\e946"; } }
.ico--location:before { content: "\e906"; } .ico--checkmark:before {
.ico--phone:before { content: "\e907"; } content: "\e965";
.ico--linkedin:before { content: "\e903"; } }
.ico--github1:before { content: "\e904"; } .ico--info:before {
.ico--gplus:before { content: "\e900"; } content: "\e901";
.ico--twitter1:before { content: "\e901"; } }
.ico--facebook:before { content: "\e902"; } .ico--question:before {
.ico--menu:before { content: "\e933"; } content: "\e904";
.ico--chevron-right:before { content: "\e923"; } }
.ico--chevron-left:before { content: "\e924"; } .ico--warning:before {
.ico--chevron-down:before { content: "\e925"; } content: "\e93f";
.ico--chevron-up:before { content: "\e926"; } }
.ico--eye-off:before { content: "\e947"; } .ico--code:before {
.ico--eye:before { content: "\e948"; } content: "\e94a";
.ico--zoom_out_map:before { content: "\e927"; } }
.ico--arrow-down:before { content: "\e911"; } .ico--checkbox-unchecked:before {
.ico--link1:before { content: "\e910"; } content: "\e94e";
.ico--city:before { content: "\e908"; } }
.ico--beer:before { content: "\e909"; } .ico--star-full:before {
.ico--thumbs-down:before { content: "\e93d"; } content: "\e94f";
.ico--thumbs-up:before { content: "\e93e"; } }
.ico--tasks:before { content: "\e93c"; } .ico--star-empty:before {
.ico--calculator:before { content: "\e931"; } content: "\e950";
.ico--bank:before { content: "\e92a"; } }
.ico--facebook-official:before { content: "\e92b"; } .ico--bookmark:before {
.ico--close:before { content: "\e92c"; } content: "\e951";
.ico--anchor:before { content: "\e92d"; } }
.ico--feed:before { content: "\e92e"; } .ico--cog:before {
.ico--paw:before { content: "\e90b"; } content: "\e952";
.ico--envelope:before { content: "\e92f"; } }
\ No newline at end of file .ico--key:before {
content: "\e953";
}
.ico--zoom-in:before {
content: "\e954";
}
.ico--zoom-out:before {
content: "\e955";
}
.ico--shrink:before {
content: "\e956";
}
.ico--printer:before {
content: "\e957";
}
.ico--file-openoffice:before {
content: "\e958";
}
.ico--user:before {
content: "\e959";
}
.ico--file-excel:before {
content: "\e95a";
}
.ico--file-word:before {
content: "\e95b";
}
.ico--file-pdf:before {
content: "\e95c";
}
.ico--file-picture:before {
content: "\e95d";
}
.ico--file-blank:before {
content: "\e95e";
}
.ico--folder-upload:before {
content: "\e95f";
}
.ico--upload:before {
content: "\e960";
}
.ico--cloud-upload:before {
content: "\e961";
}
.ico--folder-download:before {
content: "\e962";
}
.ico--download:before {
content: "\e963";
}
.ico--cloud-download:before {
content: "\e964";
}
.ico--alarm:before {
content: "\e900";
}
.ico--calculator:before {
content: "\e911";
}
.ico--facebook-full:before {
content: "\e913";
}
.ico--feed:before {
content: "\e927";
}
.ico--library:before {
content: "\e929";
}
.ico--office:before {
content: "\e92a";
}
.ico--attachment:before {
content: "\e92b";
}
.ico--enlarge:before {
content: "\e92c";
}
.ico--eye-off:before {
content: "\e92e";
}
.ico--eye:before {
content: "\e92f";
}
.ico--share:before {
content: "\e931";
}
.ico--search:before {
content: "\e939";
}
.ico--pencil:before {
content: "\e93c";
}
.ico--lock-open:before {
content: "\e947";
}
.ico--lock:before {
content: "\e948";
}
.ico--equalizer:before {
content: "\e949";
}
.ico--switch:before {
content: "\e94b";
}
.ico--loop:before {
content: "\e94c";
}
.ico--refresh:before {
content: "\e94d";
}
.ico--bullhorn:before {
content: "\e944";
}
.ico--bin:before {
content: "\e945";
}
.ico--cross:before {
content: "\e937";
}
.ico--checkbox-checked:before {
content: "\e938";
}
.ico--globe:before {
content: "\e93a";
}
.ico--wikipedia:before {
content: "\e93b";
}
.ico--youtube:before {
content: "\e936";
}
.ico--users:before {
content: "\e934";
}
.ico--book:before {
content: "\e935";
}
.ico--bubbles:before {
content: "\e930";
}
.ico--map:before {
content: "\e914";
}
.ico--compass:before {
content: "\e915";
}
.ico--folder-open:before {
content: "\e916";
}
.ico--folder:before {
content: "\e917";
}
.ico--drawer:before {
content: "\e918";
}
.ico--stop:before {
content: "\e919";
}
.ico--github:before {
content: "\e91a";
}
.ico--clock:before {
content: "\e91b";
}
.ico--calendar:before {
content: "\e91c";
}
.ico--flickr:before {
content: "\e91d";
}
.ico--instagram:before {
content: "\e91e";
}
.ico--twitter:before {
content: "\e91f";
}
.ico--newspaper:before {
content: "\e920";
}
.ico--cart:before {
content: "\e921";
}
.ico--home:before {
content: "\e922";
}
.ico--link:before {
content: "\e912";
}
.ico--power:before {
content: "\e90c";
}
.ico--rocket:before {
content: "\e946";
}
.ico--location:before {
content: "\e906";
}
.ico--phone:before {
content: "\e907";
}
.ico--linkedin:before {
content: "\e903";
}
.ico--facebook:before {
content: "\e902";
}
.ico--envelop:before {
content: "\e972";
}
.ico--file-text2:before {
content: "\e974";
}
.ico--price-tag:before {
content: "\e975";
}
.ico--price-tags:before {
content: "\e976";
}
.ico--stats-dots:before {
content: "\e99b";
}
.ico--bed:before {
content: "\e969";
}
.ico--train:before {
content: "\e96a";
}
.ico--bus:before {
content: "\e96b";
}
.ico--wheelchair:before {
content: "\e966";
}
.ico--thumbs-down:before {
content: "\e93d";
}
.ico--thumbs-up:before {
content: "\e93e";
}
.ico--anchor:before {
content: "\e92d";
}
.ico--paw:before {
content: "\e90b";
}
source/css/atoms/list.pcss
View file @ aac6d1d3
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
.unordered-list--dense, .unordered-list--dense,
.content-block ul { .content-block ul {
@apply row-gap-0; @apply gap-y-0;
} }
.unordered-list--linked, .unordered-list--linked,
......
source/css/atoms/super-button.pcss
View file @ aac6d1d3
.super-button { .super-button {
@apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200; @apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200 md:px-6;
&:hover { &:hover {
@apply no-underline; @apply no-underline;
} }
@screen md {
@apply px-6;
}
} }
.super-button__body { .super-button__body {
......
source/css/atoms/table.pcss
View file @ aac6d1d3
...@@ -12,6 +12,13 @@ ...@@ -12,6 +12,13 @@
} }
} }
.table--light {
th,
thead td {
@apply bg-transparent text-black;
}
}
.table--striped, .table--striped,
.content-block table { .content-block table {
tr:nth-child(even) td { tr:nth-child(even) td {
...@@ -35,6 +42,15 @@ ...@@ -35,6 +42,15 @@
th, th,
thead td, thead td,
td { td {
@apply p-2; @apply px-2 py-1;
}
}
.table--unxpadded {
th,
thead td,
td {
@apply px-0;
} }
} }
source/css/atoms/text-shadow.pcss 0 → 100644
View file @ aac6d1d3
.text-shadow-xs {
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}
.text-shadow-sm {
text-shadow: 1px 1px .25rem rgba(0, 0, 0, 0.3)
}
.text-shadow {
text-shadow: 1px 1px .25rem rgba(0, 0, 0, 0.3);
}
.text-shadow-md {
text-shadow: 1px 1px .5rem rgba(0, 0, 0, 0.5);
}
.text-shadow-lg {
text-shadow: 1px 1px .5rem rgba(0, 0, 0, 0.8);
}
source/css/atoms/tooltip.pcss 0 → 100644
View file @ aac6d1d3
.tooltip {
--bg-opacity: 0.8 !important;
z-index: 999;
@apply inline-block relative pointer-events-none;
&::before,
&::after {
content: "";
width: 0;
height: 0;
position: absolute;
opacity: 0.8;
}
&,
&.tooltip--default {
@apply text-xs py-2 px-4 rounded-none;
}
&--top,
&.tooltip--top
&.place-top {
margin-top: -10px;
&::before {
border-top: 8px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -8px;
left: 50%;
margin-left: -10px;
}
&::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
bottom: -6px;
left: 50%;
margin-left: -8px;
border-top-style: solid;
border-top-width: 6px;
}
}
&--bottom,
&.tooltip--bottom,
&.place-bottom {
margin-top: 10px;
&::before {
border-bottom: 8px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -8px;
left: 50%;
margin-left: -10px;
}
&::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -6px;
left: 50%;
margin-left: -8px;
border-bottom-style: solid;
border-bottom-width: 6px;
}
}
&--left,
&.tooltip--left,
&.place-left {
margin-left: -10px;
margin-top: 0;
&::before {
border-left: 8px solid transparent;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
right: -8px;
top: 50%;
margin-top: -5px;
}
&::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
right: -6px;
top: 50%;
margin-top: -4px;
border-left-style: solid;
border-left-width: 6px;
}
}
&--right,
&.tooltip--right,
&.place-right {
margin-left: 10px;
margin-top: 0;
&::before {
border-right: 8px solid transparent;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
left: -8px;
top: 50%;
margin-top: -5px;
}
&::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
left: -6px;
top: 50%;
margin-top: -4px;
border-right-style: solid;
border-right-width: 6px;
}
}
&,
&--default,
&--dark,
&.type-dark,
&--black {
@apply bg-black text-white;
&.place-top::after,
&.tooltip--top::after {
border-top-color: theme("colors.black");
}
&.place-bottom::after,
&.tooltip--bottom::after {
border-bottom-color: theme("colors.black");
}
&.place-left::after,
&.tooltip--left::after {
border-left-color: theme("colors.black");
}
&.place-right::after,
&.tooltip--right::after {
border-right-color: theme("colors.black");
}
}
&--error,
&.type-error,
&--red-600 {
@apply bg-red-600 text-white;
&.place-top::after,
&.tooltip--top::after {
border-top-color: theme("colors.red.600");
}
&.place-bottom::after,
&.tooltip--bottom::after {
border-bottom-color: theme("colors.red.600");
}
&.place-left::after,
&.tooltip--left::after {
border-left-color: theme("colors.red.600");
}
&.place-right::after,
&.tooltip--right::after {
border-right-color: theme("colors.red.600");
}
}
&--warning,
&.type-warning,
&--yellow-400 {
@apply bg-yellow-400 text-black;
&.place-top::after,
&.tooltip--top::after {
border-top-color: theme("colors.yellow.400");
}
&.place-bottom::after,
&.tooltip--bottom::after {
border-bottom-color: theme("colors.yellow.400");
}
&.place-left::after,
&.tooltip--left::after {
border-left-color: theme("colors.yellow.400");
}
&.place-right::after,
&.tooltip--right::after {
border-right-color: theme("colors.yellow.400");
}
}
&--info,
&.type-info,
&--blue-300 {
@apply bg-blue-300 text-white;
&.place-top::after,
&.tooltip--top::after {
border-top-color: theme("colors.blue.300");
}
&.place-bottom::after,
&.tooltip--bottom::after {
border-bottom-color: theme("colors.blue.300");
}
&.place-left::after,
&.tooltip--left::after {
border-left-color: theme("colors.blue.300");
}
&.place-right::after,
&.tooltip--right::after {
border-right-color: theme("colors.blue.300");
}
}
&--grey-125,
&--light,
&.type-light {
@apply bg-grey-125 text-grey-300;
&.place-top::after,
&.tooltip--top::after {
border-top-color: theme("colors.grey.125");
}
&.place-bottom::after,
&.tooltip--bottom::after {
border-bottom-color: theme("colors.grey.125");
}
&.place-left::after,
&.tooltip--left::after {
border-left-color: theme("colors.grey.125");
}
&.place-right::after,
&.tooltip--right::after {
border-right-color: theme("colors.grey.125");
}
}
&--green-400,
&--success,
&.type-success {
@apply bg-green-400 text-white;
&.place-top::after,
&.tooltip--top::after {
border-top-color: theme("colors.green.400");
}
&.place-bottom::after,
&.tooltip--bottom::after {
border-bottom-color: theme("colors.green.400");
}
&.place-left::after,
&.tooltip--left::after {
border-left-color: theme("colors.green.400");
}
&.place-right::after,
&.tooltip--right::after {
border-right-color: theme("colors.green.400");
}
}
}
source/css/molecules/article-card.pcss
View file @ aac6d1d3
...@@ -21,15 +21,15 @@ ...@@ -21,15 +21,15 @@
/* padding shall be kept in sync with general card */ /* padding shall be kept in sync with general card */
/* No pointer events to make full article cover clickable */ /* No pointer events to make full article cover clickable */
@apply absolute left-0 bottom-0 p-4 pointer-events-none; @apply absolute left-0 bottom-0 p-4 pointer-events-none;
} }
.article-card-sharing { .article-card-sharing {
/* Turn on pointer events to make sharer clickable */ @apply mb-4 lg:transition lg:duration-200 lg:opacity-0 lg:pointer-events-auto;
@apply mb-4 transition duration-200 opacity-0 pointer-events-auto;
} }
.article-card:hover .article-card-sharing { .article-card:hover .article-card-sharing {
@apply opacity-100; @apply lg:opacity-100;
} }
.article-card-meta { .article-card-meta {
......
source/css/molecules/banner.pcss
View file @ aac6d1d3
.banner { .banner {
@apply px-4 py-8 flex flex-wrap flex-col; @apply px-4 py-8 flex flex-wrap flex-col lg:px-8;
@screen lg {
@apply px-8;
}
} }
.banner__icon { .banner__icon {
......
source/css/molecules/calendar.pcss
View file @ aac6d1d3
...@@ -14,11 +14,7 @@ ...@@ -14,11 +14,7 @@
@apply h-full border-r border-grey-125 p-2 flex justify-center items-start; @apply h-full border-r border-grey-125 p-2 flex justify-center items-start;
&:first-child { &:first-child {
@apply border-l; @apply border-l xl:border-l-0;
@screen xl {
@apply border-l-0;
}
} }
&.calendar-table-row__col--norborder { &.calendar-table-row__col--norborder {
......
source/css/molecules/candidate-card.pcss
View file @ aac6d1d3
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
@apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10; @apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10;
> div { > div {
@apply px-4 flex items-center; @apply px-4 flex items-center md:justify-center;
&:not(:first-child) { &:not(:first-child) {
@apply border-l border-grey-125; @apply border-l border-grey-125;
...@@ -48,8 +48,6 @@ ...@@ -48,8 +48,6 @@
} }
@screen md { @screen md {
@apply justify-center;
&:first-child { &:first-child {
@apply w-auto text-left; @apply w-auto text-left;
} }
...@@ -66,12 +64,9 @@ ...@@ -66,12 +64,9 @@
} }
.candidate-card__social { .candidate-card__social {
@apply p-4; @apply p-4 md:text-center;
grid-area: social;
@screen md { grid-area: social;
@apply text-center;
}
} }
@screen sm { @screen sm {
......
source/css/molecules/candidate-table-row.pcss
View file @ aac6d1d3
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
} }
.candidate-table-row__affiliation { .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; grid-area: affiliation;
} }
......
source/css/molecules/chips.pcss
View file @ aac6d1d3
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
py-2 px-3 py-2 px-3
text-xs text-xs
font-bold leading-none tracking-normal font-bold leading-none tracking-normal
cursor-pointer whitespace-nowrap;
whitespace-no-wrap;
} }
.chip--condensed { .chip--condensed {
......
source/css/molecules/content-block.pcss
View file @ aac6d1d3
...@@ -65,6 +65,10 @@ ...@@ -65,6 +65,10 @@
@apply text-sm; @apply text-sm;
} }
pre {
line-height: 1;
}
/* Contact lines are quite frequent so these are blacklisted for anchor style specifically. */ /* Contact lines are quite frequent so these are blacklisted for anchor style specifically. */
a:not(.contact-line):not(.content-block--nostyle) { a:not(.contact-line):not(.content-block--nostyle) {
@apply underline; @apply underline;
......
source/css/molecules/form-field.pcss
View file @ aac6d1d3
...@@ -17,21 +17,30 @@ ...@@ -17,21 +17,30 @@
box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05); box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05);
} }
&, /* Allow bypass defualt positioning */
&--row-items { &:not(.form-field__wrapper--freeform) {
.form-field__control + .form-field__control { .form-field__control + .form-field__control {
@apply ml-4; @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; @apply flex-col;
.form-field__control + .form-field__control { .form-field__control + .form-field__control {
@apply ml-0 mt-4; @apply ml-0 mt-4;
} }
} }
}
.form-field__error, .form-field__error,
.form-field__help-text { .form-field__help-text {
......
source/css/molecules/modal.pcss
View file @ aac6d1d3
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
top-0 left-0 bottom-0 right-0 top-0 left-0 bottom-0 right-0
z-50 z-50
flex items-center flex-row flex items-center flex-row
bg-white bg-opacity-75 bg-grey-125 bg-opacity-75
cursor-pointer overflow-auto; cursor-pointer overflow-auto;
} }
...@@ -26,17 +26,30 @@ ...@@ -26,17 +26,30 @@
.modal__container { .modal__container {
@apply @apply
h-full h-auto
p-3 p-3
pointer-events-auto shadow-md; pointer-events-auto
md:p-0;
@screen md {
@apply h-auto p-0;
}
.modal__container-body { .modal__container-body {
@apply min-h-full bg-white; @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 { .ReactModal__Body--open {
......

Pirátský GitLab - Home of the CopyLeft