new file mode 100644

@@ -0,0 +1,17 @@

+# EditorConfig is awesome: http://EditorConfig.org

+

+# top-most EditorConfig file

+root = true

+

+# Unix-style newlines with a newline ending every file

+[*]

+end_of_line = lf

+insert_final_newline = true

+trim_trailing_whitespace = true

+

+[*.{php,twig,yml}]

+indent_style = space

+indent_size = 4

+

+[*.{html5,svg,min.css,min.js}]

+insert_final_newline = false

new file mode 100644

@@ -0,0 +1,6 @@

+# Composer

+/.idea/

+/composer.lock

+/vendor/

+/node_modules/

+package-lock.json

new file mode 100644

@@ -0,0 +1,40 @@

+{

+    "name": "vonrotenberg/cirrusui-bundle",

+    "description": "Cirrus UI CSS framework for contao",

+    "license": "MIT License",

+    "type": "contao-bundle",

+    "authors": [

+        {

+            "name": "Benjamin Roth",

+            "homepage": "https://www.vonrotenberg.de"

+        }

+    ],

+    "homepage": "https://www.vonrotenberg.de",

+    "support": {

+        "issues": "https://www.vonrotenberg.de"

+    },

+    "require": {

+        "php": "^7.4 || ^8.0",

+        "contao/core-bundle": "^4.13 || ^5.0"

+    },

+    "require-dev": {

+        "contao/manager-plugin": "^2.0"

+    },

+    "conflict": {

+        "contao/manager-plugin": "<2.0 || >=3.0"

+    },

+    "autoload": {

+        "psr-4": {

+            "vonRotenberg\\CirrusuiBundle\\": "src/"

+        }

+    },

+    "config": {

+        "allow-plugins": {

+            "contao-components/installer": true,

+            "contao/manager-plugin": true

+        }

+    },

+    "extra": {

+        "contao-manager-plugin": "vonRotenberg\\CirrusuiBundle\\ContaoManager\\Plugin"

+    }

+}

new file mode 100644

@@ -0,0 +1,5 @@

+<?php

+

+// Add the colorbox style sheet

+$GLOBALS['TL_CSS']['cirrus'] = 'bundles/vonrotenbergcirrusui/cirrus-core.min.css|static';

+?>

new file mode 100644

@@ -0,0 +1,17 @@

+/**

+ * Script to run after npm install

+ *

+ * Copy selected files to public directory

+ */

+

+'use strict'

+

+var gentlyCopy = require('gently-copy')

+

+var filesToCopy = ['./node_modules/cirrus-ui/dist/*']

+

+// public directory

+var publicPath = './public/'

+

+// Moving files to user's local directory

+gentlyCopy(filesToCopy, publicPath, {overwrite: true})

new file mode 100644

@@ -0,0 +1,11 @@

+{

+  "name": "contao-cirrusui",

+  "version": "1.0.0",

+  "dependencies": {

+    "cirrus-ui": "^0.7.1",

+    "gently-copy": "^3.2.0"

+  },

+  "scripts": {

+    "postinstall": "node ./npm-post-install.js"

+  }

+}

new file mode 100644

@@ -0,0 +1,22352 @@

+/*

+* Cirrus 0.7.1

+* Stanley Lim, Copyright 2022

+* https://spiderpig86.github.io/Cirrus

+*/

+@charset "UTF-8";

+/* v1 Color scheme for Cirrus */

+/*

+  Functions

+  TODO Refactor to different categories

+*/

+/*

+    Converts a given hex value to RGB.

+*/

+/*

+    Generates delimited class name prefix.

+*/

+/*

+    Gets entry from given config by key and will merge with extended properties inside the extend map. This function also exists because merging with a null map does not work.

+    Use case is that if we have somthing like this:

+

+    $config: (

+        opacity: null, // Disable default opacity classes

+        extends: (

+            // Framework will now extend with your config and generate .u-opacity-42

+            opacity: (

+                42: .42

+            )

+        )

+    );

+*/

+/*

+    Converts a list of properties to a mapping where the key and value are the property

+    itself.

+*/

+/*

+    To generate the negative variant of classes, we want to prepend 'n' to the key and add a negative sign to the value.

+

+    This automatically skips string values and 0 values.

+    This also assumes that the values passed in are positive variants of classes. This will break with negative variants.

+*/

+/*

+    Merge multiple maps with each other.

+

+    $merged: map-multi-merge($map1, $map2, $map3, ...);

+*/

+/*

+    Filters over a given map only for keys between $start inclusive and

+    $end exclusive.

+*/

+/*

+    Group selectors that share common styling.

+*/

+/*

+    Global Mixins

+*/

+/*

+    Mixin that returns a property map as a series of CSS class properties.

+

+    E.g. $xs: (color: #fff, opacity: 0.5), $sm... =>

+

+    <class>--xs {

+        color: #fff;

+        opacity: 0.5;

+    }

+*/

+/*

+    Bring to front on focus.

+*/

+/* Breakpoints */

+/* Fonts */

+/* Images */

+/************

+ * DEFAULTS *

+ ************/

+/*

+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).

+*/

+/*

+  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.

+*/

+/* Media Queries */

+/* Variant of mixin that takes in mapping of class name to value */

+/**

+ * DART SASS ONLY: Generates viewport classes given styles in a @content mixin

+ * 

+ * When using this mixin, you must follow specify a mixin that takes in the same number of variables that is being passed into @content below -- in this case, 1.

+ * 

+ * Example usage (pretend \ is $):

+ *      

+ *       @include generate-styles-with-viewports('true') using ($viewport) {

+ *           $suffix: if($viewport != '', '-viewport', '');

+ *           .outersuffix {

+ *               background: #222;

+ *               .innersuffix {

+ *                   color: #fff;

+ *               }

+ *           }

+ *       }

+ */

+/* VALUE APIS */

+/* BASE STYLING + RESET FOR CIRRUS */

+:root {

+  /* v1 Colors */

+  --cirrus-fg: #0f172a;

+  --cirrus-bg: #ffffff;

+  --cirrus-select-bg: rgba(0, 161, 255, 0.2);

+  --cirrus-code-bg: rgba(255, 218, 221, 1);

+  --cirrus-code-fg: #dc4753;

+  --cirrus-form-group-bg: rgba(248, 249, 250, 1);

+  --cirrus-form-group-fg: rgba(144, 144, 144, 1);

+  --toast-primary-bg: rgba(49, 59, 80, 0.9);

+  --animation-duration: 0.2s;

+  --focus-opacity: 0.55;

+  --font-size-xs: 0.75rem;

+  --font-size-s: 0.875rem;

+  --font-size-m: 1rem;

+  --font-size-l: 1.25rem;

+  --font-size-xl: 1.5rem;

+  --cirrus-focus-size: 0 0 0.1rem 0.15rem;

+  --cirrus-focus-color: rgba(240, 61, 77, 0.13);

+  --bg-opacity: 1;

+  --color-opacity: 1;

+  --border-opacity: 1;

+}

+

+/* RESET */

+/* Box Sizing */

+*,

+*::before,

+*::after {

+  /* Prevent setting borders from increasing the size of an element */

+  box-sizing: border-box;

+  border: 0 solid currentColor;

+  text-rendering: optimizeLegibility;

+  -webkit-tap-highlight-color: transparent;

+}

+

+/* Remove default margin and padding */

+html,

+body,

+p,

+ol,

+ul,

+li,

+dl,

+dt,

+dd,

+blockquote,

+figure,

+fieldset,

+legend,

+textarea,

+pre,

+iframe,

+hr,

+h1,

+h2,

+h3,

+h4,

+h5,

+h6 {

+  margin: 0;

+  padding: 0;

+}

+

+/* Allow % styles to work on page */

+html,

+body {

+  border: none;

+  height: 100%;

+}

+

+/* Nunito Sans for the font */

+body {

+  letter-spacing: 0.01rem;

+  line-height: 1.8; /* Globally adjust line height */

+  font-size: 1rem;

+  font-weight: 400;

+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+  color: var(--cirrus-fg);

+}

+

+/* Remove bullets from unordered lists */

+ul {

+  list-style: none;

+}

+

+/* Setting up embedded content */

+audio,

+canvas,

+iframe,

+img,

+embed,

+object,

+svg,

+video {

+  display: block;

+  max-width: 100%;

+  height: auto;

+}

+

+iframe {

+  outline: 0;

+  border: 1px solid rgba(0, 0, 0, 0.1);

+  border-radius: 3px;

+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

+}

+

+/* Page sections set to block */

+article,

+aside,

+figure,

+footer,

+header,

+hgroup,

+section {

+  display: block;

+}

+

+button,

+input,

+optgroup,

+select,

+textarea {

+  margin: 0;

+  font-family: inherit;

+  font-size: inherit;

+}

+

+/* Base styling for labels */

+label {

+  display: inline-block;

+  margin: 0.25rem 0;

+}

+

+/* Base styling for fieldsets */

+fieldset {

+  padding: 1rem;

+}

+

+fieldset legend {

+  font-weight: bold;

+}

+

+/* Hidden elements must not show */

+[hidden] {

+  display: none !important;

+}

+

+/* Selection Color */

+::selection {

+  background-color: var(--cirrus-select-bg);

+}

+

+/* When focusing any element */

+:focus {

+  box-shadow: var(--cirrus-focus-size) var(--cirrus-focus-color);

+  outline: none;

+}

+

+/* Remove all animations based on preference */

+@media (prefers-reduced-motion: reduce) {

+  html:focus-within {

+    scroll-behavior: auto;

+  }

+  *,

+*::before,

+*::after {

+    animation-duration: 0.01ms !important;

+    animation-iteration-count: 1 !important;

+    transition-duration: 0.01ms !important;

+    scroll-behavior: auto !important;

+  }

+}

+/* ANIMATIONS */

+/* Keyframes */

+/* Spinning loading animation */

+@keyframes loading {

+  from {

+    transform: rotate(0deg);

+  }

+  to {

+    transform: rotate(359deg);

+  }

+}

+/* Heart animation */

+@keyframes pound {

+  to {

+    transform: scale(1.1);

+  }

+}

+/* Bounce animations */

+@keyframes bounce {

+  from, 20%, 53%, 80%, to {

+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

+    transform: translate3d(0, 0, 0);

+  }

+  40%, 43% {

+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);

+    transform: translate3d(0, -30px, 0);

+  }

+  70% {

+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);

+    transform: translate3d(0, -15px, 0);

+  }

+  90% {

+    transform: translate3d(0, -4px, 0);

+  }

+}

+@keyframes bounceIn {

+  from, 20%, 40%, 60%, 80%, to {

+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

+  }

+  0% {

+    opacity: 0;

+    transform: scale3d(0.3, 0.3, 0.3);

+  }

+  20% {

+    transform: scale3d(1.1, 1.1, 1.1);

+  }

+  40% {

+    transform: scale3d(0.9, 0.9, 0.9);

+  }

+  60% {

+    opacity: 1;

+    transform: scale3d(1.03, 1.03, 1.03);

+  }

+  80% {

+    transform: scale3d(0.97, 0.97, 0.97);

+  }

+  to {

+    opacity: 1;

+    transform: scale3d(1, 1, 1);

+  }

+}

+@keyframes fadeIn {

+  from {

+    opacity: 0;

+  }

+  to {

+    opacity: 1;

+  }

+}

+@keyframes pulse {

+  50% {

+    opacity: 0.5;

+  }

+}

+@keyframes ping {

+  75%, 100% {

+    transform: scale(2);

+    opacity: 0;

+  }

+}

+/* Hover animation */

+.hover-grow {

+  /* Mouse leave */

+  transition-duration: 0.32s;

+}

+

+.hover-grow:hover {

+  /* Mouse enter */

+  transform: scale(1.1);

+  transition-duration: 0.08s;

+}

+

+.animated {

+  animation-duration: 1s;

+  animation-fill-mode: both;

+  /* Loading button position relatively for loading spinner location */

+}

+

+.animated.loading {

+  display: block;

+  position: relative;

+  /* Loading Spinner, align center by default */

+  /* Hide text in loading button */

+}

+

+.animated.loading::after {

+  border: 2px solid #ced4da;

+  border-radius: 50%;

+  border-right-color: transparent;

+  border-top-color: transparent;

+  content: "";

+  display: block;

+  height: 1rem;

+  width: 1rem;

+  left: calc(50% - 0.8em);

+  top: calc(50% - 0.7407407407em);

+  position: absolute;

+  animation: loading 500ms infinite linear;

+}

+

+.animated.loading.loading-white::after {

+  border-left-color: #fff;

+  border-bottom-color: #fff;

+}

+

+.animated.loading.loading-left {

+  padding-left: 3rem;

+  /* Align spinner left */

+}

+

+.animated.loading.loading-left::after {

+  left: 1rem;

+  right: auto;

+}

+

+.animated.loading.loading-right {

+  padding-right: 3rem;

+  /* Align spinner right */

+}

+

+.animated.loading.loading-right::after {

+  left: auto;

+  right: 1rem;

+}

+

+.animated.loading.hide-text {

+  color: transparent !important;

+}

+

+.animated.pound {

+  animation: pound 0.35s infinite alternate;

+  vertical-align: baseline;

+}

+

+.animated.bounce {

+  animation-name: bounce;

+  transform-origin: center bottom;

+}

+

+.animated.bounceIn {

+  animation-name: bounceIn;

+}

+

+.animated.fadeIn {

+  animation-name: fadeIn;

+}

+

+.animated.infinite {

+  animation-iteration-count: infinite;

+}

+

+.animated.infinite.alternate {

+  animation-direction: alternate;

+}

+

+.animated.paused {

+  animation-play-state: paused !important;

+}

+

+.animated.pulse {

+  animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite;

+}

+

+.animated.ping {

+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

+}

+

+/* FONT */

+/* Constants */

+/* Headers */

+h6 {

+  font-size: 1.25rem;

+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+  font-weight: 700;

+  line-height: 1.2;

+  margin-bottom: 1rem;

+}

+

+h5 {

+  font-size: 1.5rem;

+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+  font-weight: 700;

+  line-height: 1.2;

+  margin-bottom: 1rem;

+}

+

+h4 {

+  font-size: 1.75rem;

+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+  font-weight: 700;

+  line-height: 1.2;

+  margin-bottom: 1rem;

+}

+

+h3 {

+  font-size: 2rem;

+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+  font-weight: 700;

+  line-height: 1.2;

+  margin-bottom: 1rem;

+}

+

+h2 {

+  font-size: 2.5rem;

+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+  font-weight: 700;

+  line-height: 1.2;

+  margin-bottom: 1rem;

+}

+

+h1 {

+  font-size: 3rem;

+  letter-spacing: 0.025rem;

+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+  font-weight: 700;

+  line-height: 1.2;

+  margin-bottom: 1rem;

+}

+

+/* Headlines (for larger titles) */

+.headline-4 {

+  font-size: 3.5rem;

+  letter-spacing: 0.05rem;

+}

+

+.headline-3 {

+  font-size: 4.5rem;

+  letter-spacing: 0.05rem;

+}

+

+.headline-2 {

+  font-size: 5.5rem;

+  letter-spacing: 0.05rem;

+}

+

+.headline-1 {

+  font-size: 6.5rem;

+  letter-spacing: 0.05rem;

+}

+

+/* Regular text sizes */

+.text-xs {

+  font-size: 0.75rem !important;

+  line-height: 1.5rem !important;

+}

+

+.text-sm {

+  font-size: 0.875rem !important;

+  line-height: 1.75rem !important;

+}

+

+.text-md {

+  font-size: 1rem !important;

+  line-height: 2rem !important;

+}

+

+.text-lg {

+  font-size: 1.25rem !important;

+  line-height: 2.25rem !important;

+}

+

+.text-xl {

+  font-size: 1.5rem !important;

+  line-height: 2.25rem !important;

+}

+

+p,

+article,

+blockquote {

+  font-size: 1rem;

+  line-height: 2;

+  margin-bottom: 1rem;

+}

+

+p.lead {

+  font-size: 1.2rem;

+}

+

+blockquote {

+  background-color: #f8f9fa;

+  border-left: 5px solid #e9ecef;

+  border-radius: 3px;

+  margin-bottom: 1rem;

+  padding: 1rem 2rem;

+}

+

+blockquote.text--large {

+  font-size: 1.15rem;

+}

+

+blockquote p {

+  margin: 0;

+}

+

+cite {

+  opacity: 0.7;

+}

+

+mark,

+.mark {

+  padding: 0.2em;

+  background-color: #f0e8c4;

+}

+

+.font-primary {

+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+}

+

+.font-alt, .font-secondary {

+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

+}

+

+.content h1 {

+  line-height: 1.125em;

+  margin: 1rem 0;

+}

+

+.content h2 {

+  line-height: 1.125em;

+  margin: 1rem 0;

+}

+

+.content h3 {

+  line-height: 1.125em;

+  margin: 1rem 0;

+}

+

+.content h4 {

+  line-height: 1.125em;

+  margin: 1rem 0;

+}

+

+.content h5 {

+  line-height: 1.125em;

+  margin: 1rem 0;

+}

+

+.content h6 {

+  line-height: 1.125em;

+  margin: 1rem 0;

+}

+

+/* TODO: To deprecate */

+.title {

+  font-weight: bold;

+}

+

+.title:not(:last-child),

+.subtitle:not(:last-child) {

+  margin-bottom: 1rem;

+}

+

+.title + .subtitle {

+  /* Make the subtitlte closer to the title */

+  margin-top: -0.75rem;

+}

+

+/* Use default line-height for these texts and when line-height-inherit is specified */

+.card-tile p,

+.card-tile article,

+.card-tile blockquote {

+  line-height: inherit;

+}

+

+/* Weights */

+.font-extrathin {

+  font-weight: 100;

+}

+

+.font-thin {

+  font-weight: 200;

+}

+

+.font-light {

+  font-weight: 300;

+}

+

+.font-normal {

+  font-weight: 400;

+}

+

+.font-medium {

+  font-weight: 500;

+}

+

+.font-semibold {

+  font-weight: 600;

+}

+

+.font-bold {

+  font-weight: 700;

+}

+

+.font-extrabold {

+  font-weight: 800;

+}

+

+.font-black {

+  font-weight: 900;

+}

+

+/* Text Transformations */

+.uppercase {

+  text-transform: uppercase;

+}

+

+.lowercase {

+  text-transform: lowercase;

+}

+

+.capitalize {

+  text-transform: capitalize;

+}

+

+.rtl {

+  direction: rtl;

+}

+

+/* Font Awesome */

+.icon {

+  /* Usually used in spans */

+  display: inline-block;

+  /* font-size: 21px; Allow font sizes for icons to be overwritten */

+  /* line-height: 1.5rem; Allow line height to be inherited or overwritten */

+  text-align: center;

+  width: 1.5rem;

+  vertical-align: baseline;

+}

+

+.icon.x-small {

+  margin: 0.55rem 0 0 0.1rem;

+}

+

+.icon.small {

+  margin: 0.95rem 0 0 0.1rem;

+}

+

+.icon .fa-wrapper {

+  font-size: inherit;

+}

+

+.info {

+  display: block;

+  font-size: var(--font-size-s);

+  margin-top: 0.25rem;

+  color: #868e96;

+}

+

+.info.inline {

+  /* Keeps the extra info inline */

+  display: inline-block;

+  margin-left: 0.5rem;

+}

+

+.caret {

+  display: inline-block;

+  width: 0;

+  height: 0;

+  margin-left: 2px;

+  vertical-align: middle;

+  border-top: 4px dashed;

+  border-top: 4px solid\9 ;

+  border-right: 4px solid transparent;

+  border-left: 4px solid transparent;