diff --git a/main/ui-main/package-lock.json b/main/ui-main/package-lock.json
index 2ef64a21a61d3aca35bab72a8d29c135e875c215..2e98f6f5b6b2a3b51ca2b85b4fc4fb3d4209e62a 100644
--- a/main/ui-main/package-lock.json
+++ b/main/ui-main/package-lock.json
@@ -146,12 +146,49 @@
}
}
},
+ "color": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+ "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+ "dev": true,
+ "requires": {
+ "color-convert": "^1.9.3",
+ "color-string": "^1.6.0"
+ }
+ },
+ "color-convert": {
+ "version": "1.9.3",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+ "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+ "dev": true,
+ "requires": {
+ "color-name": "1.1.3"
+ },
+ "dependencies": {
+ "color-name": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+ "dev": true
+ }
+ }
+ },
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
+ "color-string": {
+ "version": "1.9.1",
+ "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+ "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+ "dev": true,
+ "requires": {
+ "color-name": "^1.0.0",
+ "simple-swizzle": "^0.2.2"
+ }
+ },
"cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -275,6 +312,12 @@
"function-bind": "^1.1.1"
}
},
+ "is-arrayish": {
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+ "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+ "dev": true
+ },
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -320,6 +363,12 @@
"integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
"dev": true
},
+ "lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "dev": true
+ },
"merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -514,6 +563,15 @@
"queue-microtask": "^1.2.2"
}
},
+ "simple-swizzle": {
+ "version": "0.2.2",
+ "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+ "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+ "dev": true,
+ "requires": {
+ "is-arrayish": "^0.3.1"
+ }
+ },
"source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
diff --git a/main/ui-main/package.json b/main/ui-main/package.json
index 6cf1937e1046d3bde3e018027170240d4a78343d..d186875e1da56c063d0816421be0342c4204f40b 100644
--- a/main/ui-main/package.json
+++ b/main/ui-main/package.json
@@ -9,7 +9,9 @@
"devDependencies": {
"postcss": "^8.4.16",
"postcss-nested": "^5.0.6",
- "tailwindcss": "^3.1.8"
+ "tailwindcss": "^3.1.8",
+ "lodash": "^4.17.15",
+ "color": "^3.1.2"
},
"scripts": {
"build": "tailwindcss -i ./src/css/style.pcss -o ./public/styles.css --postcss",
diff --git a/main/ui-main/public/index.html b/main/ui-main/public/index.html
index 003d33f293711c02c9693e0d083ba85a308f4cbe..7f949ddf0e8ba4a23dcd84627161ce53f040a2d7 100644
--- a/main/ui-main/public/index.html
+++ b/main/ui-main/public/index.html
@@ -54,11 +54,17 @@
<i class="ico--instagram"></i>
</a>
</div>
- <a href="#" class="px-12 py-3 bg-lightGreen mr-2">
- Dary
+ <a href="#"
+ class="btn btn--green-500 btn--hoveractive font-condensed uppercase mr-2">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">Dary</div>
+ </div>
</a>
- <a href="#" class="px-12 py-3 text-blue-100 bg-purple mr-2">
- Nalodění
+ <a href="#"
+ class="btn btn--violet-500 btn--hoveractive font-condensed uppercase mr-16">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">Nalodění</div>
+ </div>
</a>
</div>
</div>
diff --git a/main/ui-main/public/styles.css b/main/ui-main/public/styles.css
index 3aa83eae0148da28a3110a0fcd6f91903ee96f73..a9fce66dbdf70ece067aaba129994d24effcba9c 100644
--- a/main/ui-main/public/styles.css
+++ b/main/ui-main/public/styles.css
@@ -1040,44 +1040,581 @@ video {
}
}
-/**
- * Custom components
- */
+.btn{
+ display: inline-block;
+ text-align: center;
+ font-weight: 400;
+ max-width: 20rem;
+ text-decoration: none;
+}
-.container {
+.btn[disabled]{
+ opacity: 0.7;
+ cursor: not-allowed;
}
-.container--default{
- max-width: 1200px;
+.btn:hover{
+ text-decoration: none;
}
-.container--wide {
- max-width: 1430px;
+.btn__body{
+ display: flex;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ padding: .75em 2em;
}
-@responsive {
- /* Removes default container padding from the element. */
+.btn__body, .btn__icon, .btn__inline-icon{
+ transition-property: color,background-color,border-color;
+ transition-duration: .2s;
+ color: #ffffff;
+}
- /* @note: needs to be kept in sync with tailwind configuration */
+.btn__body, .btn__icon{
+ background-color: #000000;
+}
- .container-padding--zero {
- margin-left: -1rem;
- margin-right: -1rem;
- }
+.btn--icon .btn__body-wrap{
+ display: flex;
+}
+
+.btn--condensed .btn__body{
+ padding: .75em 1em;
+}
- @media (min-width: 1200px) {
- .container-padding--zero {
- margin-left: -2rem;
- margin-right: -2rem
- }
+@-webkit-keyframes btn-loading-spinner{
+ to{
+ transform: rotate(360deg);
}
+}
- .container-padding--auto {
- margin-left: 0;
- margin-right: 0;
+@keyframes btn-loading-spinner{
+ to{
+ transform: rotate(360deg);
}
}
+.btn--black .btn__body, .btn--black .btn__icon{
+ background-color: #000000;
+ color: #ffffff;
+}
+
+.btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(0, 0, 0);
+ color: #fff;
+}
+
+.btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: #262626;
+}
+
+.btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-black:hover .btn__body, .btn--to-black.btn--activated .btn__body{
+ background-color: #000000 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-black:hover .btn__icon, .btn--to-black.btn--activated .btn__icon{
+ border-color: #343434 !important;
+ background-color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-black:hover .btn__inline-icon, .btn--to-black.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--grey-700 .btn__body, .btn--grey-700 .btn__icon{
+ background-color: #202020;
+ color: #ffffff;
+}
+
+.btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: #343434;
+ color: #fff;
+}
+
+.btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: #262626;
+}
+
+.btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-grey-700:hover .btn__body, .btn--to-grey-700.btn--activated .btn__body{
+ background-color: #202020 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-grey-700:hover .btn__icon, .btn--to-grey-700.btn--activated .btn__icon{
+ border-color: #303132 !important;
+ background-color: #202020 !important;
+}
+
+.btn--hoveractive.btn--to-grey-700:hover .btn__inline-icon, .btn--to-grey-700.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--grey-500 .btn__body, .btn--grey-500 .btn__icon{
+ background-color: #303132;
+ color: #ffffff;
+}
+
+.btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: #4c4c4c;
+ color: #fff;
+}
+
+.btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: #343434;
+}
+
+.btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-grey-500:hover .btn__body, .btn--to-grey-500.btn--activated .btn__body{
+ background-color: #303132 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-grey-500:hover .btn__icon, .btn--to-grey-500.btn--activated .btn__icon{
+ border-color: #4c4c4c !important;
+ background-color: #303132 !important;
+}
+
+.btn--hoveractive.btn--to-grey-500:hover .btn__inline-icon, .btn--to-grey-500.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--grey-125 .btn__body, .btn--grey-125 .btn__icon{
+ background-color: #f0f0f0;
+ color: #000000;
+}
+
+.btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(192, 192, 192);
+ color: #fff;
+}
+
+.btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(168, 168, 168);
+}
+
+.btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-grey-125:hover .btn__body, .btn--to-grey-125.btn--activated .btn__body{
+ background-color: #f0f0f0 !important;
+ color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-grey-125:hover .btn__icon, .btn--to-grey-125.btn--activated .btn__icon{
+ border-color: rgb(216, 216, 216) !important;
+ background-color: #f0f0f0 !important;
+}
+
+.btn--hoveractive.btn--to-grey-125:hover .btn__inline-icon, .btn--to-grey-125.btn--activated .btn__inline-icon{
+ color: #000000 !important;
+}
+
+.btn--white .btn__body, .btn--white .btn__icon{
+ background-color: #ffffff;
+ color: #000000;
+}
+
+.btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(204, 204, 204);
+ color: #fff;
+}
+
+.btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(179, 179, 179);
+}
+
+.btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-white:hover .btn__body, .btn--to-white.btn--activated .btn__body{
+ background-color: #ffffff !important;
+ color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-white:hover .btn__icon, .btn--to-white.btn--activated .btn__icon{
+ border-color: #f3f3f3 !important;
+ background-color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-white:hover .btn__inline-icon, .btn--to-white.btn--activated .btn__inline-icon{
+ color: #000000 !important;
+}
+
+.btn--blue-300 .btn__body, .btn--blue-300 .btn__icon{
+ background-color: #027da8;
+ color: #ffffff;
+}
+
+.btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(2, 100, 134);
+ color: #fff;
+}
+
+.btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(1, 88, 118);
+}
+
+.btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-blue-300:hover .btn__body, .btn--to-blue-300.btn--activated .btn__body{
+ background-color: #027da8 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-blue-300:hover .btn__icon, .btn--to-blue-300.btn--activated .btn__icon{
+ border-color: rgb(2, 113, 151) !important;
+ background-color: #027da8 !important;
+}
+
+.btn--hoveractive.btn--to-blue-300:hover .btn__inline-icon, .btn--to-blue-300.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--cyan-200 .btn__body, .btn--cyan-200 .btn__icon{
+ background-color: #57b3bd;
+ color: #ffffff;
+}
+
+.btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(62, 149, 159);
+ color: #fff;
+}
+
+.btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(55, 131, 139);
+}
+
+.btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-cyan-200:hover .btn__body, .btn--to-cyan-200.btn--activated .btn__body{
+ background-color: #57b3bd !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-cyan-200:hover .btn__icon, .btn--to-cyan-200.btn--activated .btn__icon{
+ border-color: rgb(70, 168, 178) !important;
+ background-color: #57b3bd !important;
+}
+
+.btn--hoveractive.btn--to-cyan-200:hover .btn__inline-icon, .btn--to-cyan-200.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--green-300 .btn__body, .btn--green-300 .btn__icon{
+ background-color: #76cc9f;
+ color: #ffffff;
+}
+
+.btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(71, 187, 126);
+ color: #fff;
+}
+
+.btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(61, 164, 110);
+}
+
+.btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-green-300:hover .btn__body, .btn--to-green-300.btn--activated .btn__body{
+ background-color: #76cc9f !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-green-300:hover .btn__icon, .btn--to-green-300.btn--activated .btn__icon{
+ border-color: rgb(95, 195, 143) !important;
+ background-color: #76cc9f !important;
+}
+
+.btn--hoveractive.btn--to-green-300:hover .btn__inline-icon, .btn--to-green-300.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--green-400 .btn__body, .btn--green-400 .btn__icon{
+ background-color: #4ca971;
+ color: #ffffff;
+}
+
+.btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(61, 135, 90);
+ color: #fff;
+}
+
+.btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(53, 118, 79);
+}
+
+.btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-green-400:hover .btn__body, .btn--to-green-400.btn--activated .btn__body{
+ background-color: #4ca971 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-green-400:hover .btn__icon, .btn--to-green-400.btn--activated .btn__icon{
+ border-color: rgb(68, 152, 102) !important;
+ background-color: #4ca971 !important;
+}
+
+.btn--hoveractive.btn--to-green-400:hover .btn__inline-icon, .btn--to-green-400.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--green-500 .btn__body, .btn--green-500 .btn__icon{
+ background-color: #4fc49f;
+ color: #000000;
+}
+
+.btn--green-500 .btn__icon{
+ border-color: rgb(62, 185, 146);
+ background-color: #4fc49f;
+}
+
+.btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(55, 165, 130);
+ color: #fff;
+}
+
+.btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(48, 144, 114);
+}
+
+.btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-green-500:hover .btn__body, .btn--to-green-500.btn--activated .btn__body{
+ background-color: #4fc49f !important;
+ color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-green-500:hover .btn__icon, .btn--to-green-500.btn--activated .btn__icon{
+ border-color: rgb(62, 185, 146) !important;
+ background-color: #4fc49f !important;
+}
+
+.btn--hoveractive.btn--to-green-500:hover .btn__inline-icon, .btn--to-green-500.btn--activated .btn__inline-icon{
+ color: #000000 !important;
+}
+
+.btn--orange-300 .btn__body, .btn--orange-300 .btn__icon{
+ background-color: #ed9654;
+ color: #ffffff;
+}
+
+.btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(231, 114, 26);
+ color: #fff;
+}
+
+.btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(203, 100, 21);
+}
+
+.btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-orange-300:hover .btn__body, .btn--to-orange-300.btn--activated .btn__body{
+ background-color: #ed9654 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-orange-300:hover .btn__icon, .btn--to-orange-300.btn--activated .btn__icon{
+ border-color: rgb(234, 132, 55) !important;
+ background-color: #ed9654 !important;
+}
+
+.btn--hoveractive.btn--to-orange-300:hover .btn__inline-icon, .btn--to-orange-300.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--violet-400 .btn__body, .btn--violet-400 .btn__icon{
+ background-color: #840048;
+ color: #ffffff;
+}
+
+.btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(106, 0, 58);
+ color: #fff;
+}
+
+.btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(92, 0, 50);
+}
+
+.btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-violet-400:hover .btn__body, .btn--to-violet-400.btn--activated .btn__body{
+ background-color: #840048 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-violet-400:hover .btn__icon, .btn--to-violet-400.btn--activated .btn__icon{
+ border-color: rgb(119, 0, 65) !important;
+ background-color: #840048 !important;
+}
+
+.btn--hoveractive.btn--to-violet-400:hover .btn__inline-icon, .btn--to-violet-400.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--violet-500 .btn__body, .btn--violet-500 .btn__icon{
+ background-color: #670047;
+ color: #000000;
+}
+
+.btn--violet-500 .btn__icon{
+ border-color: rgb(93, 0, 64);
+ background-color: #670047;
+}
+
+.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(82, 0, 57);
+ color: #fff;
+}
+
+.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(72, 0, 50);
+}
+
+.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-violet-500:hover .btn__body, .btn--to-violet-500.btn--activated .btn__body{
+ background-color: #670047 !important;
+ color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-violet-500:hover .btn__icon, .btn--to-violet-500.btn--activated .btn__icon{
+ border-color: rgb(93, 0, 64) !important;
+ background-color: #670047 !important;
+}
+
+.btn--hoveractive.btn--to-violet-500:hover .btn__inline-icon, .btn--to-violet-500.btn--activated .btn__inline-icon{
+ color: #000000 !important;
+}
+
+.btn--red-600 .btn__body, .btn--red-600 .btn__icon{
+ background-color: #d60d53;
+ color: #ffffff;
+}
+
+.btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(171, 10, 66);
+ color: #fff;
+}
+
+.btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(150, 9, 58);
+}
+
+.btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-red-600:hover .btn__body, .btn--to-red-600.btn--activated .btn__body{
+ background-color: #d60d53 !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-red-600:hover .btn__icon, .btn--to-red-600.btn--activated .btn__icon{
+ border-color: rgb(193, 12, 75) !important;
+ background-color: #d60d53 !important;
+}
+
+.btn--hoveractive.btn--to-red-600:hover .btn__inline-icon, .btn--to-red-600.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+.btn--brands-facebook .btn__body, .btn--brands-facebook .btn__icon{
+ background-color: #067ceb;
+ color: #ffffff;
+}
+
+.btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(5, 99, 188);
+ color: #fff;
+}
+
+.btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(4, 87, 165);
+}
+
+.btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-brands-facebook:hover .btn__body, .btn--to-brands-facebook.btn--activated .btn__body{
+ background-color: #067ceb !important;
+ color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-brands-facebook:hover .btn__icon, .btn--to-brands-facebook.btn--activated .btn__icon{
+ border-color: rgb(5, 112, 212) !important;
+ background-color: #067ceb !important;
+}
+
+.btn--hoveractive.btn--to-brands-facebook:hover .btn__inline-icon, .btn--to-brands-facebook.btn--activated .btn__inline-icon{
+ color: #ffffff !important;
+}
+
+/**
+ * Custom components
+ */
+
+.container {
+}
+
+.container--default{
+ max-width: 1200px;
+}
+
+.container--wide {
+ max-width: 1430px;
+}
+
.navbar-menu__link{
cursor: pointer;
font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
@@ -1161,18 +1698,20 @@ video {
margin-right: 0.5rem;
}
+.mr-16{
+ margin-right: 4rem;
+}
+
.w-36{
width: 9rem;
}
-.px-12{
- padding-left: 3rem;
- padding-right: 3rem;
+.font-condensed{
+ font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
}
-.py-3{
- padding-top: 0.75rem;
- padding-bottom: 0.75rem;
+.uppercase{
+ text-transform: uppercase;
}
.text-white{
@@ -1180,11 +1719,6 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
-.text-blue-100{
- --tw-text-opacity: 1;
- color: rgb(171 205 239 / var(--tw-text-opacity));
-}
-
.transition{
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1197,6 +1731,24 @@ video {
transition-duration: 200ms;
}
+.btn.btn--fullwidth{
+ width: 100%;
+ max-width: 100%;
+}
+
+.btn.btn--fullwidth .btn__body-wrap{
+ width: 100%;
+ max-width: 100%;
+}
+
+.btn.btn--fullwidth .btn__body{
+ flex: 1;
+}
+
+.btn.btn--autowidth{
+ width: auto;
+}
+
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
diff --git a/main/ui-main/tailwind-plugins/buttons.js b/main/ui-main/tailwind-plugins/buttons.js
new file mode 100644
index 0000000000000000000000000000000000000000..5f06909b721aad69fa201c92bb383be1b9ac17f2
--- /dev/null
+++ b/main/ui-main/tailwind-plugins/buttons.js
@@ -0,0 +1,200 @@
+const _ = require('lodash');
+const Color = require('color');
+// const defaultConfig = require('tailwindcss/defaultConfig')();
+
+const darken = (clr, val) => Color(clr).darken(val).rgb().string();
+const lighten = (clr, val) => Color(clr).lighten(val).rgb().string();
+
+function defaultOptions() {
+ return {
+ textAlign: 'center',
+ display: 'inline-block',
+ fontWeight: '400',
+ maxWidth: '20rem',
+ colors: {},
+ }
+}
+
+module.exports = function (options) {
+ options = _.isFunction(options)
+ ? options(defaultOptions())
+ : _.defaults(options, defaultOptions());
+
+ return function ({ addComponents, addUtilities, e, theme }) {
+ const getThemeColor = (alias, fallback) => {
+ if (!alias) {
+ return fallback;
+ }
+ return theme(`colors.${alias}`);
+ }
+
+ const btnUtilities = {
+ '.btn.btn--fullwidth': {
+ width: '100%',
+ maxWidth: '100%',
+ '.btn__body-wrap': {
+ width: '100%',
+ maxWidth: '100%',
+ },
+ '.btn__body': {
+ flex: '1'
+ }
+ },
+ '.btn.btn--autowidth': {
+ width: 'auto',
+ }
+ };
+
+ addUtilities(btnUtilities, ['responsive']);
+
+ const defaultIconBorder = getThemeColor(options.defaultColor.iconBorder, lighten(getThemeColor(options.defaultColor.background, '#000'), 0.1));
+
+ addComponents([
+ {
+ '.btn': {
+ display: 'inline-block',
+ textAlign: 'center',
+ display: 'inline-block',
+ fontWeight: theme('fontWeight.normal'),
+ maxWidth: theme('maxWidth.xs'),
+ textDecoration: 'none',
+ },
+ '.btn[disabled]': {
+ opacity: '0.7',
+ cursor: 'not-allowed',
+ },
+ '.btn:hover': {
+ textDecoration: 'none',
+ },
+ '.btn__body': {
+ display: 'flex',
+ height: '100%',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '.75em 2em'
+ },
+ '.btn__icon': {
+ display: 'flex',
+ alignItems: 'center',
+ borderLeftWidth: '1px',
+ padding: `0 ${theme('spacing.4')}`,
+ borderColor: defaultIconBorder,
+ },
+ // All possible parts are transition ready
+ '.btn__body, .btn__icon, .btn__inline-icon': {
+ transitionProperty: 'color,background-color,border-color',
+ transitionDuration: '.2s',
+ color: getThemeColor(options.defaultColor.text),
+ },
+ '.btn__body, .btn__icon': {
+ backgroundColor: getThemeColor(options.defaultColor.background),
+ },
+ '.btn__icon img': {
+ width: theme('spacing.4')
+ },
+ // Button with a standalone icon on right side
+ '.btn--icon .btn__body-wrap': {
+ display: 'flex',
+ },
+ // Button with a standalone icon on the left
+ '.btn--inverted-icon .btn__icon': {
+ order: '-1',
+ borderRightWidth: '1px',
+ borderLeftWidth: '0',
+ },
+ // Button with an inline icon
+ '.btn__inline-icon': {
+ marginRight: theme('spacing.2'),
+ },
+ // Smaller size
+ '.btn--condensed .btn__body': {
+ padding: '.75em 1em',
+ },
+ '@keyframes btn-loading-spinner': {
+ 'to': {
+ transform: 'rotate(360deg)',
+ }
+ },
+ '.btn--loading': {
+ position: 'relative',
+ },
+ '.btn--loading::before': {
+ pointerEvents: 'none',
+ content: "''",
+ position: 'absolute',
+ left: '0',
+ right: '0',
+ top: '0',
+ bottom: '0',
+ zIndex: '2',
+ backgroundColor: theme('colors.black'),
+ opacity: '0.4',
+ },
+ '.btn--loading::after': {
+ pointerEvents: 'none',
+ content: "''",
+ position: 'absolute',
+ left: '0',
+ right: '0',
+ top: '0',
+ bottom: '0',
+ zIndex: '3',
+ top: '50%',
+ left: '50%',
+ width: '1.5rem',
+ height: '1.5rem',
+ marginTop: '-0.75rem',
+ marginLeft: '-0.75rem',
+ borderRadius: '50%',
+ border: `3px solid ${theme('colors.cyan.200')}`,
+ borderLeftColor: 'transparent',
+ animation: 'btn-loading-spinner 1s linear infinite',
+ }
+ },
+ ..._.map(options.colors, (colorOptions, name) => {
+ const bg = getThemeColor(colorOptions.background, '#000');
+ return {
+ // Standard colorized variant
+ [`.btn--${e(name)} .btn__body, .btn--${e(name)} .btn__icon`]: {
+ backgroundColor: getThemeColor(colorOptions.background),
+ color: getThemeColor(colorOptions.text),
+ },
+ [`.btn--${e(name)} .btn__icon`]: {
+ borderColor: getThemeColor(colorOptions.iconBorder, darken(bg, 0.1)),
+ backgroundColor: getThemeColor(colorOptions.iconBackground, bg),
+ },
+ // Hover state unless set with --to-* variant.
+ [`.btn--${e(name)}.btn--hoveractive:not([class^="btn--to-"]):hover`]: {
+ '.btn__body, .btn__icon': {
+ backgroundColor: getThemeColor(colorOptions.hoverBackground, darken(bg, 0.2)),
+ color: getThemeColor(colorOptions.hoverText, '#fff'),
+ },
+ '.btn__icon': {
+ borderColor: getThemeColor(
+ colorOptions.hoverIconBorder,
+ darken(bg, 0.3)
+ ),
+ },
+ '.btn__icon svg, .btn__icon i': {
+ color: getThemeColor(colorOptions.hoverText, '#fff'),
+ fill: getThemeColor(colorOptions.hoverText, '#fff')
+ }
+ },
+ [`.btn--hoveractive.btn--to-${e(name)}:hover, .btn--to-${e(name)}.btn--activated`]: {
+ '.btn__body': {
+ backgroundColor: `${getThemeColor(colorOptions.background)} !important`,
+ color: `${getThemeColor(colorOptions.text)} !important`,
+ },
+ '.btn__icon': {
+ borderColor: `${getThemeColor(colorOptions.iconBorder, darken(getThemeColor(colorOptions.background, '#000'), 0.1))} !important`,
+ backgroundColor: `${getThemeColor(colorOptions.iconBackground, getThemeColor(colorOptions.background, '#000'))} !important`,
+ },
+ '.btn__inline-icon': {
+ color: `${getThemeColor(colorOptions.text)} !important`,
+ }
+ }
+ }
+ })
+ ])
+ }
+}
diff --git a/main/ui-main/tailwind.config.js b/main/ui-main/tailwind.config.js
index 50d2a8ae5f9277112cc08c9e30a00bda2a1ff2b1..b59a5125e2e3114be90323136b0f283409a0dd93 100644
--- a/main/ui-main/tailwind.config.js
+++ b/main/ui-main/tailwind.config.js
@@ -141,5 +141,84 @@ module.exports = {
'black': '#000',
},
},
- plugins: [],
+ plugins: [
+ require("./tailwind-plugins/buttons")({
+ defaultColor: {
+ text: 'white',
+ background: 'black',
+ iconBorder: 'grey.300'
+ },
+ colors: {
+ 'black': {
+ text: 'white',
+ background: 'black',
+ iconBorder: 'grey.400',
+ hoverIconBorder: 'grey.600',
+ },
+ 'grey-700': {
+ text: 'white',
+ background: 'grey.700',
+ iconBorder: 'grey.500',
+ hoverBackground: 'grey.400',
+ hoverIconBorder: 'grey.600',
+ },
+ 'grey-500': {
+ text: 'white',
+ background: 'grey.500',
+ iconBorder: 'grey.300',
+ hoverBackground: 'grey.300',
+ hoverIconBorder: 'grey.400',
+ },
+ 'grey-125': {
+ text: 'black',
+ background: 'grey.125',
+ },
+ 'white': {
+ text: 'black',
+ background: 'white',
+ iconBorder: 'grey.100',
+ },
+ 'blue-300': {
+ text: 'white',
+ background: 'blue.300',
+ },
+ 'cyan-200': {
+ text: 'white',
+ background: 'cyan.200',
+ },
+ 'green-300': {
+ text: 'white',
+ background: 'green.300',
+ },
+ 'green-400': {
+ text: 'white',
+ background: 'green.400',
+ },
+ 'green-500': {
+ text: 'black',
+ background: 'green.500',
+ },
+ 'orange-300': {
+ text: 'white',
+ background: 'orange.300',
+ },
+ 'violet-400': {
+ text: 'white',
+ background: 'violet.400',
+ },
+ 'violet-500': {
+ text: 'black',
+ background: 'violet.500',
+ },
+ 'red-600': {
+ text: 'white',
+ background: 'red.600',
+ },
+ 'brands-facebook': {
+ text: 'white',
+ background: 'brands.facebook',
+ }
+ }
+ })
+ ],
}