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 936 additions and 304 deletions
source/css/atoms/alert.pcss 0 → 100644
View file @ aac6d1d3
.alert {
@apply p-4 flex leading-snug;
&--dark,
&--black {
@apply bg-black text-white;
}
&--light,
&--grey-125 {
@apply bg-grey-125 text-grey-300;
}
&--error,
&--red-600 {
@apply bg-red-600 text-white;
}
&--warning,
&--yellow-400 {
@apply bg-yellow-400 text-black;
}
&--success,
&--green-400 {
@apply bg-green-400 text-white;
}
&--info,
&--blue-300 {
@apply bg-blue-300 text-white;
}
&--faded {
@apply bg-opacity-75;
}
}
.alert__icon {
@apply mr-2;
}
source/css/atoms/animations.pcss 0 → 100644
View file @ aac6d1d3
/* Obsolete with Tailwind 1.6, backported. */
@keyframes animate-ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
source/css/atoms/avatar.pcss
View file @ aac6d1d3
......@@ -6,7 +6,6 @@
}
}
@responsive {
.avatar--2xs {
@apply w-8;
}
......@@ -31,7 +30,6 @@
.avatar--3xl {
@apply w-56;
}
}
.avatar--bordered {
img {
......
source/css/atoms/card.pcss
View file @ aac6d1d3
@responsive {
.card {
@apply elevation-2;
}
......@@ -6,7 +5,6 @@
.card__body {
@apply p-8;
}
}
.card--hoveractive {
@apply transition duration-200;
......@@ -23,3 +21,12 @@
.card-body-text {
@apply font-light leading-normal text-sm break-words ;
}
.card-actions {
@apply px-8 py-4 border-t border-grey-125 flex items-center;
}
.card-actions--right {
@apply justify-end;
}
source/css/atoms/contact-line.pcss
View file @ aac6d1d3
......@@ -9,11 +9,7 @@
&.contact-line--responsive {
i {
@apply hidden;
@screen lg {
@apply inline-block;
}
@apply hidden lg:inline-block;
}
}
}
source/css/atoms/container.pcss
View file @ aac6d1d3
......@@ -10,7 +10,6 @@
}
@responsive {
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
.container-padding--zero {
......@@ -27,4 +26,3 @@
margin-left: 0;
margin-right: 0;
}
}
source/css/atoms/form-field.pcss
View file @ aac6d1d3
.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 {
......@@ -114,7 +114,7 @@
@apply relative flex;
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]) {
@apply border-grey-300;
......@@ -127,6 +127,7 @@
&:checked {
@apply bg-blue-300 border-transparent;
}
&[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 @@
}
.h-alt {
@apply font-alt font-normal leading-negative;
@apply font-alt font-normal;
line-height: 0.96;
}
.h-allcaps {
......@@ -11,40 +12,46 @@
}
@responsive {
.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,
.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,
.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,
.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,
.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,
.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,
.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 @@
.content-block .head-allcaps-heavy-4xs {
@apply text-sm font-condensed font-bold uppercase leading-tight;
}
}
source/css/atoms/horizontal-rule.pcss
View file @ aac6d1d3
hr:not(.hr--unstyled) {
@apply border-t border-grey-100 my-4;
@screen md {
@apply my-8;
}
@apply border-t border-grey-100 my-4 md:my-8;
&.hr--big {
@apply my-8;
@screen md {
@apply my-16;
}
@apply my-8 md:my-16;
}
&.hr--condensed {
@apply my-2;
@screen md {
@apply my-4;
}
@apply my-2 md:my-4;
}
}
source/css/atoms/icons.pcss
View file @ aac6d1d3
@font-face {
font-family: 'pirati-ui';
src: url('../fonts/pirati-ui.eot?71e4e2c92abaa13920ac90278872d7d4');
src: url('../fonts/pirati-ui.eot?71e4e2c92abaa13920ac90278872d7d4#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?71e4e2c92abaa13920ac90278872d7d4') format('truetype'),
url('../fonts/pirati-ui.woff?71e4e2c92abaa13920ac90278872d7d4') format('woff'),
url('../fonts/pirati-ui.svg?71e4e2c92abaa13920ac90278872d7d4#pirati-ui') format('svg');
src: url('../fonts/pirati-ui.eot?964zxx');
src: url('../fonts/pirati-ui.eot?964zxx#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?964zxx') format('truetype'),
url('../fonts/pirati-ui.woff?964zxx') format('woff'),
url('../fonts/pirati-ui.svg?964zxx#pirati-ui') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
......@@ -26,117 +25,363 @@
-moz-osx-font-smoothing: grayscale;
}
.ico--lock-open:before { content: "\e949"; }
.ico--lock:before { content: "\e94a"; }
.ico--dots-three-vertical:before { content: "\e940"; }
.ico--dots-three-horizontal:before { content: "\e941"; }
.ico--log-out:before { content: "\e942"; }
.ico--pin:before { content: "\e943"; }
.ico--edit-pencil:before { content: "\e929"; }
.ico--at:before { content: "\e905"; }
.ico--strategy:before { content: "\e932"; }
.ico--pig:before { content: "\e928"; }
.ico--thermometer:before { content: "\e90a"; }
.ico--pirati:before { content: "\e90d"; }
.ico--stackshare:before { content: "\e90f"; }
.ico--open-source:before { content: "\e90e"; }
.ico--search:before { content: "\e913"; }
.ico--switch:before { content: "\e94b"; }
.ico--loop:before { content: "\e94c"; }
.ico--repeat:before { content: "\e94c"; }
.ico--player:before { content: "\e94c"; }
.ico--reload:before { content: "\e94c"; }
.ico--refresh:before { content: "\e94c"; }
.ico--update:before { content: "\e94c"; }
.ico--synchronize:before { content: "\e94c"; }
.ico--arrows:before { content: "\e94c"; }
.ico--spinner:before { content: "\e94d"; }
.ico--loading:before { content: "\e94d"; }
.ico--loading-wheel:before { content: "\e94d"; }
.ico--refresh1:before { content: "\e94d"; }
.ico--repeat1:before { content: "\e94d"; }
.ico--busy:before { content: "\e94d"; }
.ico--wait:before { content: "\e94d"; }
.ico--arrow:before { content: "\e94d"; }
.ico--bullhorn:before { content: "\e944"; }
.ico--bin:before { content: "\e945"; }
.ico--trashcan:before { content: "\e945"; }
.ico--remove:before { content: "\e945"; }
.ico--delete:before { content: "\e945"; }
.ico--recycle:before { content: "\e945"; }
.ico--dispose:before { content: "\e945"; }
.ico--cross:before { content: "\e937"; }
.ico--checkbox-checked:before { content: "\e938"; }
.ico--quill:before { content: "\e939"; }
.ico--feather:before { content: "\e939"; }
.ico--write:before { content: "\e939"; }
.ico--edit:before { content: "\e939"; }
.ico--sphere:before { content: "\e93a"; }
.ico--globe:before { content: "\e93a"; }
.ico--internet:before { content: "\e93a"; }
.ico--wikipedia:before { content: "\e93b"; }
.ico--brand:before { content: "\e93b"; }
.ico--youtube:before { content: "\e936"; }
.ico--users:before { content: "\e934"; }
.ico--group:before { content: "\e934"; }
.ico--team:before { content: "\e934"; }
.ico--members:before { content: "\e934"; }
.ico--community:before { content: "\e934"; }
.ico--collaborate:before { content: "\e934"; }
.ico--book:before { content: "\e935"; }
.ico--read:before { content: "\e935"; }
.ico--reading: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--house:before { content: "\e93f"; }
.ico--rocket:before { content: "\e946"; }
.ico--jet:before { content: "\e946"; }
.ico--speed:before { content: "\e946"; }
.ico--spaceship:before { content: "\e946"; }
.ico--fast:before { content: "\e946"; }
.ico--location:before { content: "\e906"; }
.ico--phone:before { content: "\e907"; }
.ico--linkedin:before { content: "\e903"; }
.ico--github1:before { content: "\e904"; }
.ico--gplus:before { content: "\e900"; }
.ico--twitter1:before { content: "\e901"; }
.ico--facebook:before { content: "\e902"; }
.ico--menu:before { content: "\e933"; }
.ico--chevron-right:before { content: "\e923"; }
.ico--chevron-left:before { content: "\e924"; }
.ico--chevron-down:before { content: "\e925"; }
.ico--chevron-up:before { content: "\e926"; }
.ico--eye-off:before { content: "\e947"; }
.ico--eye:before { content: "\e948"; }
.ico--zoom_out_map:before { content: "\e927"; }
.ico--arrow-down:before { content: "\e911"; }
.ico--link1:before { content: "\e910"; }
.ico--city:before { content: "\e908"; }
.ico--beer:before { content: "\e909"; }
.ico--thumbs-down:before { content: "\e93d"; }
.ico--thumbs-up:before { content: "\e93e"; }
.ico--tasks:before { content: "\e93c"; }
.ico--calculator:before { content: "\e931"; }
.ico--bank:before { content: "\e92a"; }
.ico--facebook-official:before { content: "\e92b"; }
.ico--close:before { content: "\e92c"; }
.ico--anchor:before { content: "\e92d"; }
.ico--feed:before { content: "\e92e"; }
.ico--paw:before { content: "\e90b"; }
.ico--envelope:before { content: "\e92f"; }
\ No newline at end of file
.ico--mastodon:before {
content: "\e973";
}
.ico--helios:before {
content: "\e96e";
}
.ico--redmine:before {
content: "\e96f";
}
.ico--zulip:before {
content: "\e970";
}
.ico--forum:before {
content: "\e971";
}
.ico--pirati:before {
content: "\e90d";
}
.ico--jitsi:before {
content: "\e90f";
}
.ico--open-source:before {
content: "\e90e";
}
.ico--donation-full:before {
content: "\e96c";
}
.ico--donation-outline:before {
content: "\e96d";
}
.ico--strategy:before {
content: "\e932";
}
.ico--pig:before {
content: "\e928";
}
.ico--thermometer:before {
content: "\e90a";
}
.ico--menu:before {
content: "\e933";
}
.ico--chevron-right:before {
content: "\e923";
}
.ico--chevron-left:before {
content: "\e924";
}
.ico--chevron-down:before {
content: "\e925";
}
.ico--chevron-up:before {
content: "\e926";
}
.ico--link-horizontal:before {
content: "\e910";
}
.ico--beer:before {
content: "\e909";
}
.ico--food:before {
content: "\e968";
}
.ico--dots-three-vertical:before {
content: "\e940";
}
.ico--dots-three-horizontal:before {
content: "\e941";
}
.ico--log-out:before {
content: "\e942";
}
.ico--envelope:before {
content: "\e908";
}
.ico--pin:before {
content: "\e943";
}
.ico--at:before {
content: "\e905";
}
.ico--glass:before {
content: "\e967";
}
.ico--checkmark:before {
content: "\e965";
}
.ico--info:before {
content: "\e901";
}
.ico--question:before {
content: "\e904";
}
.ico--warning:before {
content: "\e93f";
}
.ico--code:before {
content: "\e94a";
}
.ico--checkbox-unchecked:before {
content: "\e94e";
}
.ico--star-full:before {
content: "\e94f";
}
.ico--star-empty:before {
content: "\e950";
}
.ico--bookmark:before {
content: "\e951";
}
.ico--cog:before {
content: "\e952";
}
.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 @@
.unordered-list--dense,
.content-block ul {
@apply row-gap-0;
@apply gap-y-0;
}
.unordered-list--linked,
......
source/css/atoms/super-button.pcss
View file @ aac6d1d3
.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 {
@apply no-underline;
}
@screen md {
@apply px-6;
}
}
.super-button__body {
......
source/css/atoms/table.pcss
View file @ aac6d1d3
......@@ -12,6 +12,13 @@
}
}
.table--light {
th,
thead td {
@apply bg-transparent text-black;
}
}
.table--striped,
.content-block table {
tr:nth-child(even) td {
......@@ -35,6 +42,15 @@
th,
thead 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 @@
/* padding shall be kept in sync with general card */
/* No pointer events to make full article cover clickable */
@apply absolute left-0 bottom-0 p-4 pointer-events-none;
}
.article-card-sharing {
/* Turn on pointer events to make sharer clickable */
@apply mb-4 transition duration-200 opacity-0 pointer-events-auto;
@apply mb-4 lg:transition lg:duration-200 lg:opacity-0 lg:pointer-events-auto;
}
.article-card:hover .article-card-sharing {
@apply opacity-100;
@apply lg:opacity-100;
}
.article-card-meta {
......
source/css/molecules/banner.pcss
View file @ aac6d1d3
.banner {
@apply px-4 py-8 flex flex-wrap flex-col;
@screen lg {
@apply px-8;
}
@apply px-4 py-8 flex flex-wrap flex-col lg:px-8;
}
.banner__icon {
......
source/css/molecules/calendar.pcss
View file @ aac6d1d3
......@@ -14,11 +14,7 @@
@apply h-full border-r border-grey-125 p-2 flex justify-center items-start;
&:first-child {
@apply border-l;
@screen xl {
@apply border-l-0;
}
@apply border-l xl:border-l-0;
}
&.calendar-table-row__col--norborder {
......
source/css/molecules/candidate-card.pcss
View file @ aac6d1d3
......@@ -33,7 +33,7 @@
@apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10;
> div {
@apply px-4 flex items-center;
@apply px-4 flex items-center md:justify-center;
&:not(:first-child) {
@apply border-l border-grey-125;
......@@ -48,8 +48,6 @@
}
@screen md {
@apply justify-center;
&:first-child {
@apply w-auto text-left;
}
......@@ -66,12 +64,9 @@
}
.candidate-card__social {
@apply p-4;
grid-area: social;
@apply p-4 md:text-center;
@screen md {
@apply text-center;
}
grid-area: social;
}
@screen sm {
......

Pirátský GitLab - Home of the CopyLeft