@eeacms/volto-eea-design-system 0.2.1

package/theme/themes/eea/definitions/elements/icon.less

@@ -0,0 +1,499 @@
+/*!
+ * # Semantic UI - Icon
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type: 'element';
+@element: 'icon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+             Icon
+*******************************/
+
+@font-face {
+  font-display: swap;
+  font-family: 'Icons';
+  src: @fallbackSRC;
+  src: @src;
+  font-style: normal;
+  font-weight: @normal;
+  font-variant: normal;
+  text-decoration: inherit;
+  text-transform: none;
+}
+
+i.icon {
+  display: inline-block;
+  opacity: @opacity;
+
+  margin: 0em @distanceFromText 0em 0em;
+
+  width: @width;
+  height: @height;
+
+  font-family: 'Icons';
+  font-style: normal;
+  font-weight: @normal;
+  text-decoration: inherit;
+  text-align: center;
+
+  speak: none;
+  font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  backface-visibility: hidden;
+}
+
+i.icon:before {
+  background: none !important;
+}
+
+/*******************************
+             Types
+*******************************/
+
+/*--------------
+    Loading
+---------------*/
+
+i.icon.loading {
+  height: 1em;
+  line-height: 1;
+  animation: icon-loading @loadingDuration linear infinite;
+}
+@keyframes icon-loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*******************************
+             States
+*******************************/
+
+i.icon.hover {
+  opacity: 1 !important;
+}
+
+i.icon.active {
+  opacity: 1 !important;
+}
+
+i.emphasized.icon {
+  opacity: 1 !important;
+}
+
+i.disabled.icon {
+  opacity: @disabledOpacity !important;
+}
+
+/*******************************
+           Variations
+*******************************/
+
+/*-------------------
+        Fitted
+--------------------*/
+
+i.fitted.icon {
+  width: auto;
+  margin: 0em !important;
+}
+
+/*-------------------
+         Link
+--------------------*/
+
+i.link.icon,
+i.link.icons {
+  cursor: pointer;
+  opacity: @linkOpacity;
+  transition: opacity @defaultDuration @defaultEasing;
+}
+i.link.icon:hover,
+i.link.icons:hover {
+  opacity: 1 !important;
+}
+
+/*-------------------
+      Circular
+--------------------*/
+
+i.circular.icon {
+  border-radius: 500em !important;
+  line-height: 1 !important;
+
+  padding: @circularPadding !important;
+  box-shadow: @circularShadow;
+
+  width: @circularSize !important;
+  height: @circularSize !important;
+}
+i.circular.inverted.icon {
+  border: none;
+  box-shadow: none;
+}
+
+/*-------------------
+      Flipped
+--------------------*/
+
+i.flipped.icon,
+i.horizontally.flipped.icon {
+  transform: scale(-1, 1);
+}
+i.vertically.flipped.icon {
+  transform: scale(1, -1);
+}
+
+/*-------------------
+      Rotated
+--------------------*/
+
+i.rotated.icon,
+i.right.rotated.icon,
+i.clockwise.rotated.icon {
+  transform: rotate(90deg);
+}
+
+i.left.rotated.icon,
+i.counterclockwise.rotated.icon {
+  transform: rotate(-90deg);
+}
+
+/*-------------------
+      Bordered
+--------------------*/
+
+i.bordered.icon {
+  line-height: 1;
+  vertical-align: baseline;
+
+  width: @borderedSize;
+  height: @borderedSize;
+  padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
+  box-shadow: @borderedShadow;
+}
+i.bordered.inverted.icon {
+  border: none;
+  box-shadow: none;
+}
+
+/*-------------------
+      Inverted
+--------------------*/
+
+/* Inverted Shapes */
+i.inverted.bordered.icon,
+i.inverted.circular.icon {
+  background-color: @black !important;
+  color: @white !important;
+}
+
+i.inverted.icon {
+  color: @white;
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+/* Red */
+i.red.icon {
+  color: @red !important;
+}
+i.inverted.red.icon {
+  color: @lightRed !important;
+}
+i.inverted.bordered.red.icon,
+i.inverted.circular.red.icon {
+  background-color: @red !important;
+  color: @white !important;
+}
+
+/* Orange */
+i.orange.icon {
+  color: @orange !important;
+}
+i.inverted.orange.icon {
+  color: @lightOrange !important;
+}
+i.inverted.bordered.orange.icon,
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: @white !important;
+}
+
+/* Yellow */
+i.yellow.icon {
+  color: @yellow !important;
+}
+i.inverted.yellow.icon {
+  color: @lightYellow !important;
+}
+i.inverted.bordered.yellow.icon,
+i.inverted.circular.yellow.icon {
+  background-color: @yellow !important;
+  color: @white !important;
+}
+
+/* Olive */
+i.olive.icon {
+  color: @olive !important;
+}
+i.inverted.olive.icon {
+  color: @lightOlive !important;
+}
+i.inverted.bordered.olive.icon,
+i.inverted.circular.olive.icon {
+  background-color: @olive !important;
+  color: @white !important;
+}
+
+/* Green */
+i.green.icon {
+  color: @green !important;
+}
+i.inverted.green.icon {
+  color: @lightGreen !important;
+}
+i.inverted.bordered.green.icon,
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: @white !important;
+}
+
+/* Teal */
+i.teal.icon {
+  color: @teal !important;
+}
+i.inverted.teal.icon {
+  color: @lightTeal !important;
+}
+i.inverted.bordered.teal.icon,
+i.inverted.circular.teal.icon {
+  background-color: @teal !important;
+  color: @white !important;
+}
+
+/* Blue */
+i.blue.icon {
+  color: @blue !important;
+}
+i.inverted.blue.icon {
+  color: @lightBlue !important;
+}
+i.inverted.bordered.blue.icon,
+i.inverted.circular.blue.icon {
+  background-color: @blue !important;
+  color: @white !important;
+}
+
+/* Violet */
+i.violet.icon {
+  color: @violet !important;
+}
+i.inverted.violet.icon {
+  color: @lightViolet !important;
+}
+i.inverted.bordered.violet.icon,
+i.inverted.circular.violet.icon {
+  background-color: @violet !important;
+  color: @white !important;
+}
+
+/* Purple */
+i.purple.icon {
+  color: @purple !important;
+}
+i.inverted.purple.icon {
+  color: @lightPurple !important;
+}
+i.inverted.bordered.purple.icon,
+i.inverted.circular.purple.icon {
+  background-color: @purple !important;
+  color: @white !important;
+}
+
+/* Pink */
+i.pink.icon {
+  color: @pink !important;
+}
+i.inverted.pink.icon {
+  color: @lightPink !important;
+}
+i.inverted.bordered.pink.icon,
+i.inverted.circular.pink.icon {
+  background-color: @pink !important;
+  color: @white !important;
+}
+
+/* Brown */
+i.brown.icon {
+  color: @brown !important;
+}
+i.inverted.brown.icon {
+  color: @lightBrown !important;
+}
+i.inverted.bordered.brown.icon,
+i.inverted.circular.brown.icon {
+  background-color: @brown !important;
+  color: @white !important;
+}
+
+/* Grey */
+i.grey.icon {
+  color: @grey !important;
+}
+i.inverted.grey.icon {
+  color: @lightGrey !important;
+}
+i.inverted.bordered.grey.icon,
+i.inverted.circular.grey.icon {
+  background-color: @grey !important;
+  color: @white !important;
+}
+
+/* Black */
+i.black.icon {
+  color: @black !important;
+}
+i.inverted.black.icon {
+  color: @lightBlack !important;
+}
+i.inverted.bordered.black.icon,
+i.inverted.circular.black.icon {
+  background-color: @black !important;
+  color: @white !important;
+}
+
+/*-------------------
+        Sizes
+--------------------*/
+
+i.mini.icon,
+i.mini.icons {
+  line-height: 1;
+  font-size: @mini;
+}
+i.tiny.icon,
+i.tiny.icons {
+  line-height: 1;
+  font-size: @tiny;
+}
+i.small.icon,
+i.small.icons {
+  line-height: 1;
+  font-size: @small;
+}
+i.icon,
+i.icons {
+  font-size: @medium;
+}
+i.large.icon,
+i.large.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @large;
+}
+i.big.icon,
+i.big.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @big;
+}
+i.huge.icon,
+i.huge.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @huge;
+}
+i.massive.icon,
+i.massive.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @massive;
+}
+
+/*******************************
+            Groups
+*******************************/
+
+i.icons {
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+}
+
+i.icons .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  margin: 0em;
+  margin: 0;
+}
+
+i.icons .icon:first-child {
+  position: static;
+  width: auto;
+  height: auto;
+  vertical-align: top;
+  transform: none;
+  margin-right: @distanceFromText;
+}
+
+/* Corner Icon */
+i.icons .corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  transform: none;
+  font-size: @cornerIconSize;
+  text-shadow: @cornerIconShadow;
+}
+i.icons .top.right.corner.icon {
+  top: 0;
+  left: auto;
+  right: 0;
+  bottom: auto;
+}
+i.icons .top.left.corner.icon {
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+}
+i.icons .bottom.left.corner.icon {
+  top: auto;
+  left: 0;
+  right: auto;
+  bottom: 0;
+}
+i.icons .bottom.right.corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+}
+
+i.icons .inverted.corner.icon {
+  text-shadow: @cornerIconInvertedShadow;
+}
+
+.loadUIOverrides();

package/theme/themes/eea/elements/button.overrides

@@ -0,0 +1,199 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+//Color for button text depends on background
+.text-color(@backColor) when (lightness(@backColor) >= 40%) {
+  color: @primaryButtonColor;
+}
+.text-color(@backColor) when (lightness(@backColor) < 40%) {
+  color: @white;
+}
+
+/* Global Button Styles */
+// 147629 to remove later, basic buttons don't need borders, svg buttons are
+// basic and volto ui has elements that are highlighted because of it
+//.ui.button,
+//.ui.buttons .button,
+//.ui.buttons {
+//  border: @buttonBorder @backgroundColor;
+//
+//  &:hover,
+//  &:active,
+//  &:focus {
+//    border-color: @hoverBackgroundColor;
+//  }
+//}
+
+/* Primary Button Border */
+.ui.button.primary,
+.ui.buttons.primary {
+  border: @buttonBorder @primaryButtonColor;
+
+  &:hover,
+  &:focus {
+    border: @buttonBorder @primaryColorHover;
+  }
+
+  &:active {
+    border: @buttonBorder @primaryButtonBackgroundActive;
+    background: @primaryButtonBackgroundActive;
+  }
+}
+
+.ui.disabled.primary.button,
+.ui.button.primary:disabled {
+  border: @buttonBorder @primaryButtonDisabledBackground;
+  background: @primaryButtonDisabledBackground;
+  opacity: @buttonDisabledOpacity !important;
+}
+
+/* Secondary Button */
+.ui.button.secondary,
+.ui.buttons.secondary {
+  border: @buttonBorder @secondaryButtonColor;
+  background-color: @secondaryButtonBackground;
+  color: @secondaryButtonColor;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: @secondaryButtonColor;
+    color: @secondaryButtonColorHover;
+  }
+}
+
+.ui.disabled.secondary.button,
+.ui.button.secondary:disabled {
+  border: @buttonBorder @secondaryButtonDisabledColor;
+  color: @secondaryButtonDisabledColor;
+  opacity: @buttonDisabledOpacity !important;
+}
+
+/* Secondary Button Inverted */
+.ui.button.inverted.secondary,
+.ui.buttons.inverted.secondary {
+  border: @buttonBorder @secondaryButtonInvertedColor;
+  color: @secondaryButtonInvertedColor;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: @secondaryButtonInvertedColor;
+    color: @japaneseIndigo;
+  }
+}
+
+ui.inverted.secondary.buttons .button,
+.ui.inverted.secondary.button {
+  box-shadow: none !important; // to override the important box shadow - button.less:3271
+}
+
+/* Call to action Button */
+.ui.button.action {
+  border: @buttonBorder @actionButtonBackground;
+  background-color: @actionButtonBackground;
+  color: @actionButtonColor;
+
+  &:hover,
+  &:focus {
+    border: @buttonBorder @actionButtonBackgroundHover;
+    background-color: @actionButtonBackgroundHover;
+  }
+
+  &:active {
+    border: @buttonBorder @actionButtonBackgroundActive;
+    background: @actionButtonBackgroundActive;
+  }
+}
+
+.ui.button.action[class*='right labeled'].icon.button {
+  padding-right: 3em !important; // to apply to theme button paddings - button.less:856
+
+  i {
+    margin-right: 5px !important; // to apply to theme button paddings - button.less:693
+  }
+}
+
+/* Text Button */
+button.ui.button.text,
+button.ui.buttons.text,
+p.ui.button {
+  border: none;
+  background-color: @textButtonBackground;
+  color: @primaryColor;
+
+  &:hover,
+  &:active,
+  &:focus {
+    border: none;
+    background-color: @textButtonBackground;
+    color: @primaryColorHover;
+  }
+}
+
+.ui.circular.icon.button {
+  padding: @circularButtonPadding;
+
+  .icon {
+    font-size: @circularButtonIconFontSize;
+  }
+}
+
+/* Advanced Search Button - to be deleted*/
+.ui.button.search {
+  box-sizing: border-box;
+  border: @buttonBorder @white;
+  background: @searchButtonBackground;
+  border-radius: @searchButtonBorderRadius;
+  color: @searchButtonColor;
+  font-size: @searchButtonFontSize;
+
+  &:active,
+  &:visited,
+  &:focus,
+  &:hover {
+    border: @buttonBorder @white;
+    background: @searchButtonBackground;
+    color: @searchButtonColor;
+  }
+}
+
+.ui.icon.left.labeled.button.search {
+  padding-left: 3.375em !important;
+}
+
+.ui.labeled.icon.button.search > .icon {
+  left: @searchButtonIconLeft;
+  background: @searchButtonBackground;
+  font-size: @searchButtonFontSize;
+  opacity: @searchButtonIconOpacity;
+}
+
+.searchbox.field > .ui.action.input > .icon.button {
+  padding-top: 0;
+  padding-right: 0;
+  background: none;
+  color: @blue;
+  line-height: 1.6;
+
+  &:hover {
+    background: none;
+  }
+
+  .icon {
+    font-weight: bold;
+  }
+}
+
+.ui.basic.button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: initial;
+
+  &:focus {
+    outline: none;
+  }
+}