@performant-software/semantic-components 0.5.4 → 0.5.7

package/src/css/themes/material/elements/icon.variables

@@ -0,0 +1,11 @@
+@fontPath  : '../../themes/material/assets/fonts';
+
+@width: 1em;
+@height: 1em;
+
+@small: 13px;
+@medium: 16px;
+@large: 18px;
+@big : 20px;
+@huge: 28px;
+@massive: 32px;

package/src/css/themes/material/globals/site.variables

@@ -0,0 +1,128 @@
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+       Fonts
+--------------------*/
+
+@headerFont        : 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@pageFont          : 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@googleFontName    : 'Roboto';
+
+/*-------------------
+      Base Sizes
+--------------------*/
+
+@emSize            : 14px;
+@fontSize          : 13px;
+
+/*--------------
+      Page
+---------------*/
+
+@pageBackground      : #F9F9F9;
+@lineHeight          : 1.33;
+@textColor           : #212121;
+
+/*--------------
+  Page Heading
+---------------*/
+
+@headerLineHeight : 1.33em;
+@headerFontWeight : 400;
+
+@h1               : 2.25rem;
+@h2               : 2rem;
+@h3               : 1.75rem;
+@h4               : 1.5rem;
+@h5               : 1.25rem;
+
+
+/*-------------------
+        Paths
+--------------------*/
+
+@imagePath : '../../themes/material/assets/images';
+@fontPath  : '../../themes/material/assets/fonts';
+
+/*--------------
+   Paragraphs
+---------------*/
+
+@paragraphLineHeight: 1.7em;
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+@black            : #1B1C1D;
+@blue             : #2196F3;
+@green            : #4CAF50;
+@grey             : #9E9E9E;
+@orange           : #FF9800;
+@pink             : #E91E63;
+@purple           : #9C27B0;
+@red              : #F44336;
+@teal             : #1de9b6;
+@yellow           : #FFEB3B;
+
+/*---  Light Colors  ---*/
+@lightBlack       : #333333;
+@lightBlue        : #2979FF;
+@lightGreen       : #00E676;
+@lightOrange      : #FF9100;
+@lightPink        : #F50057;
+@lightPurple      : #D500F9;
+@lightRed         : #FF1744;
+@lightTeal        : #1DE9B6;
+@lightYellow      : #FFEA00;
+
+/*---   Neutrals  ---*/
+@fullBlack        : #000000;
+@darkGrey         : #AAAAAA;
+@lightGrey        : #DCDDDE;
+@offWhite         : #FAFAFA;
+@darkWhite        : #F0F0F0;
+@white            : #FFFFFF;
+
+/*-------------------
+    Brand Colors
+--------------------*/
+
+@primaryColor        : @blue;
+@secondaryColor      : @grey;
+
+@lightPrimaryColor   : @lightBlue;
+@lightSecondaryColor : @lightGrey;
+
+/*-------------------
+      Paragraph
+--------------------*/
+
+@paragraphMargin     : 0em 0em 1.53em;
+
+/*-------------------
+       Links
+--------------------*/
+
+@linkColor           : #009FDA;
+@linkUnderline       : none;
+@linkHoverColor      : lighten(@linkColor, 5);
+@linkHoverUnderline  : @linkUnderline;
+
+/*-------------------
+  Highlighted Text
+--------------------*/
+
+@highlightBackground : #009FDA;
+@highlightColor      : @white;
+
+/*-------------------
+       Accents
+--------------------*/
+
+/* 4px @ default em */
+@relativeBorderRadius: @relative4px;
+@absoluteBorderRadius: 4px;

package/src/css/themes/material/modules/dropdown.overrides

@@ -0,0 +1,5 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
+
+.ui.dropdown {
+  font-family: 'Roboto';
+}

package/src/css/themes/material/modules/dropdown.variables

@@ -0,0 +1,20 @@
+/*******************************
+             Menu
+*******************************/
+
+@menuBorderRadius: @borderRadius;
+@menuBorderColor: #DADADA;
+@menuBoxShadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+
+@menuPadding: @relative8px 0em;
+@itemVerticalPadding: 1em;
+@itemHorizontalPadding: 1.5em;
+
+@menuHeaderFontSize: @small;
+@menuHeaderFontWeight: bold;
+@menuHeaderTextTransform: none;
+
+@selectionBorderEmWidth: 0em;
+@selectionItemDivider: none;
+
+@labelBoxShadow: none;

package/src/css/themes/material/modules/modal.overrides

@@ -0,0 +1,6 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto);
+
+.ui.modal .header {
+  font-family: "Roboto", Arial, Sans-serif !important;
+  font-weight: 400 !important;
+}

package/src/css/themes/material/modules/modal.variables

@@ -0,0 +1,15 @@
+@boxShadow: 0px 10px 18px rgba(0, 0, 0, 0.22);
+@borderRadius: 0em;
+
+
+@headerBackground: @white;
+@headerVerticalPadding: 1.7142rem;
+@headerHorizontalPadding: 1.7142rem;
+@headerFontWeight: 400;
+@headerFontFamily: 'Roboto', "Helvetica Neue", Arial, sans-serif;
+@headerBorder: none;
+
+@contentPadding: 1rem 2rem 2rem;
+
+@actionBorder: none;
+@actionBackground: @white;

package/src/css/themes/pulsar/elements/loader.overrides

@@ -0,0 +1,70 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+.ui.loader:after {
+  -webkit-animation: loader-pulsar 2s infinite linear;
+  animation: loader-pulsar 2s infinite linear;
+}
+
+@-webkit-keyframes loader-pulsar {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+    opacity: 0;
+  }
+  20% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+  40% {
+    -webkit-transform: rotate(740deg);
+            transform: rotate(740deg);
+    opacity: 1;
+  }
+  60% {
+    -webkit-transform: rotate(1120deg);
+            transform: rotate(1120deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: rotate(1440deg);
+            transform: rotate(1440deg);
+  }
+  100% {
+    -webkit-transform: rotate(1800deg);
+            transform: rotate(1800deg);
+    opacity: 0;
+  }
+}
+
+@keyframes loader-pulsar {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+    opacity: 0;
+  }
+  20% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+  40% {
+    -webkit-transform: rotate(740deg);
+            transform: rotate(740deg);
+    opacity: 1;
+  }
+  60% {
+    -webkit-transform: rotate(1120deg);
+            transform: rotate(1120deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: rotate(1440deg);
+            transform: rotate(1440deg);
+  }
+  100% {
+    -webkit-transform: rotate(1800deg);
+            transform: rotate(1800deg);
+    opacity: 0;
+  }
+}

package/src/css/themes/pulsar/elements/loader.variables

@@ -0,0 +1,7 @@
+/*******************************
+             Loader
+*******************************/
+
+@loaderSpeed: 2s;
+@loaderLineColor: @primaryColor;
+@invertedLoaderLineColor: @lightPrimaryColor;

package/src/css/themes/raised/elements/button.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

package/src/css/themes/raised/elements/button.variables

@@ -0,0 +1,27 @@
+/*******************************
+            Button
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@backgroundColor: #F8F8F8;
+@backgroundImage: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+@verticalAlign: middle;
+@borderRadius: 0.4em;
+@borderBoxShadowColor: @borderColor;
+
+/* Shadow */
+@shadowDistance: 0.3em;
+@verticalPadding: 1em;
+@horizontalPadding: 2em;
+
+/* transition box shadow as well */
+@transition:
+  opacity @defaultDuration @defaultEasing,
+  background-color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing
+;

package/src/css/themes/resetcss/globals/reset.overrides

@@ -0,0 +1,52 @@
+/*******************************
+           Overrides
+*******************************/
+
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/css/themes/resetcss/globals/reset.variables

@@ -0,0 +1,3 @@
+/*******************************
+             Reset
+*******************************/

package/src/css/themes/round/elements/button.variables

@@ -0,0 +1,138 @@
+/*******************************
+            Button
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+@borderRadius: @circularRadius;
+@textTransform: uppercase;
+@backgroundColor: #FFFFFF;
+@backgroundImage: none;
+@fontWeight: bold;
+@textColor: rgba(0, 0, 0, 0.6);
+@boxShadow:
+  0px 0px 0px 2px rgba(0, 0, 0, 0.2) inset
+;
+
+/* Padding */
+@verticalPadding: 1.25em;
+@horizontalPadding: 3em;
+
+/* Icon */
+@iconOpacity: 0.8;
+@iconDistance: 0.4em;
+@iconTransition: opacity @defaultDuration @defaultEasing;
+@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
+@iconVerticalAlign: top;
+
+/*-------------------
+        Group
+--------------------*/
+
+@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
+
+
+/*-------------------
+        States
+--------------------*/
+
+@hoverBackgroundColor: #FAFAFA;
+@hoverBackgroundImage: none;
+@hoverBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
+
+@downBackgroundColor: #F0F0F0;
+@downBackgroundImage: none;
+@downBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.35) inset !important;
+
+@activeBackgroundColor: #DDDDDD;
+@activeBackgroundImage: none;
+@activeBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset !important;
+
+@loadingBackgroundColor: #FFFFFF;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Labeled Icon */
+@labeledIconWidth: 1em + (@verticalPadding * 2);
+@labeledIconBackgroundColor: transparent;
+@labeledIconPadding: (@horizontalPadding + 1em);
+@labeledIconBorder: rgba(0, 0, 0, 0.05);
+@labeledIconColor: '';
+
+@labeledIconLeftShadow: none;
+@labeledIconRightShadow: none;
+
+/* Basic */
+@basicBoxShadow: 0px 0px 0px 1px @borderColor;
+@iconOffset: 0.05em;
+@basicLoadingColor: #FFFFFF;
+
+@basicHoverBackground: #FAFAFA;
+@basicHoverBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+
+@basicDownBackground: rgba(0, 0, 0, 0.02);
+@basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+
+@basicActiveBackground: @transparentBlack;
+@basicActiveColor: @selectedTextColor;
+
+/* Basic Inverted */
+@basicInvertedBackground: transparent;
+@basicInvertedHoverBackground: transparent;
+@basicInvertedDownBackground: @transparentWhite;
+@basicInvertedActiveBackground: @transparentWhite;
+
+@basicInvertedBoxShadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5);
+@basicInvertedHoverBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+@basicInvertedDownBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+@basicInvertedActiveBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+
+@basicInvertedColor: @darkWhite;
+@basicInvertedHoverColor: @darkWhiteHover;
+@basicInvertedDownColor: @darkWhiteActive;
+@basicInvertedActiveColor: @invertedTextColor;
+
+
+/* Basic Group */
+@basicGroupBorder: 1px solid @borderColor;
+@basicGroupBoxShadow: 0px 0px 0px 1px @borderColor;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Colors */
+@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
+@coloredBoxShadow: @shadowBoxShadow;
+
+/* Compact */
+@compactVerticalPadding: (@verticalPadding * 0.75);
+@compactHorizontalPadding: (@horizontalPadding * 0.75);
+
+/* Attached */
+@attachedOffset: -1px;
+@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+@attachedHorizontalPadding: 0.75em;
+
+/* Floated */
+@floatedMargin: 0.25em;
+
+/* Animated */
+@animationDuration: 0.3s;
+@animationEasing: ease;
+@fadeScaleHigh: 1.5;
+@fadeScaleLow: 0.75;
+
+/* Sizing */
+@mini: 0.7rem;
+@tiny: 0.8rem;
+@small: 0.875rem;
+@medium: 1rem;
+@large: 1.125rem;
+@big: 1.25rem;
+@huge: 1.375rem;
+@massive: 1.5rem;
+

package/src/css/themes/rtl/globals/site.overrides

@@ -0,0 +1,6 @@
+/*******************************
+        Global Overrides
+*******************************/
+
+/* Import Droid Arabic Kufi */
+@import 'https://fonts.googleapis.com/earlyaccess/droidarabickufi.css';

package/src/css/themes/rtl/globals/site.variables

@@ -0,0 +1,14 @@
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+       Fonts
+--------------------*/
+
+@googleFontName    : 'Droid Sans';
+
+/* Kufi imported in site.overrides */
+@headerFont        : 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@pageFont          : 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+

package/src/css/themes/striped/modules/progress.overrides

@@ -0,0 +1,29 @@
+/*******************************
+            Progress
+*******************************/
+
+.ui.progress .bar {
+  background-size: 30px 30px;
+  background-image:
+    linear-gradient(
+      135deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.08) 75%,
+      transparent 75%, transparent
+    )
+  ;
+}
+
+.ui.progress.active .bar:after {
+  animation: none;
+}
+.ui.progress.active .bar {
+  animation: progress-striped 3s linear infinite;
+}
+@keyframes progress-striped {
+  0% {
+    background-position: 0px 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
+}

package/src/css/themes/striped/modules/progress.variables

@@ -0,0 +1,3 @@
+/*******************************
+            Progress
+*******************************/

package/src/css/themes/timeline/views/feed.overrides

@@ -0,0 +1,27 @@
+/*******************************
+    User Variable Overrides
+*******************************/
+
+.ui.feed > .event .label {
+  border-left: 3px solid #DDDDDD;
+}
+.ui.feed > .event:last-child .label {
+  border-left-color: transparent;
+}
+
+.ui.feed > .event > .label {
+  margin-left: 1.6em;
+}
+
+.ui.feed > .event > .label > img,
+.ui.feed > .event > .label > .icon {
+  background-color: #009FDA;
+  border-radius: 500rem;
+  color: #FFFFFF;
+  width: 3rem;
+  height: 3rem;
+  line-height: 1.5;
+  left: -1.6rem;
+  opacity: 1;
+  position: relative;
+}

package/src/css/themes/timeline/views/feed.variables

@@ -0,0 +1,36 @@
+/*******************************
+             Feed
+*******************************/
+
+/*-------------------
+      Elements
+--------------------*/
+
+@eventMargin: 0em;
+@eventDivider: none;
+@eventPadding: 0em;
+
+/* Event Label */
+@labelWidth: 3em;
+@labelHeight: auto;
+
+@labeledContentMargin: 0.75em 0em 2em 0.75em;
+
+/* Icon */
+@iconLabelBackground: @primaryColor;
+@iconLabelBorderRadius: @circularRadius;
+@iconLabelColor: @white;
+
+/* Metadata Group */
+@metadataDisplay: inline-block;
+@metadataMargin: 1em 0em 0em;
+@metadataBackground: @white @subtleGradient;
+@metadataBorder: 1px solid @solidBorderColor;
+@metadataBorderRadius: 0.25em;
+@metadataBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+@metadataPadding: 0.5em 1em;
+@metadataColor: rgba(0, 0, 0, 0.6);
+
+/*-------------------
+      Variations
+--------------------*/

package/src/css/themes/twitter/elements/button.overrides

@@ -0,0 +1,13 @@
+/*******************************
+           Overrides
+*******************************/
+
+.ui.primary.button {
+  box-shadow:
+    0px 0px 0px 1px #3B88C3 inset,
+    0 2px 0 rgba(255, 255, 255, 0.15) inset
+  ;
+}
+.ui.primary.button > .icon {
+  color: #FFFFFF;
+}

package/src/css/themes/twitter/elements/button.variables

@@ -0,0 +1,44 @@
+/*-------------------
+   Global Variables
+--------------------*/
+
+@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@textColor: #66757F;
+@blue: #55ACEE;
+
+/*-------------------
+   Button Variables
+--------------------*/
+
+@backgroundColor: #F5F8FA;
+@backgroundImage: linear-gradient(@white, @backgroundColor);
+@color: #66757F;
+@borderBoxShadowColor: #E1E8ED;
+
+@textTransform: none;
+@fontWeight: bold;
+@textColor: #333333;
+
+@horizontalPadding: 1.284em;
+@verticalPadding: 0.8571em;
+
+@activeBackgroundColor: rgba(0, 0, 0, 0.1);
+
+@primaryColor: @blue;
+@coloredBackgroundImage: @subtleGradient;
+
+
+/*-------------------
+        States
+--------------------*/
+
+@hoverBackgroundColor: #E1E8ED;
+@hoverBackgroundImage: linear-gradient(@white, @hoverBackgroundColor);
+@hoverColor: #292F33;
+
+@downBackgroundColor: #E1E8ED;
+@downColor: #292F33;
+@downPressedShadow: 0px 1px 4px rgba(0, 0, 0, 0.2) inset;
+
+@labeledIconBackgroundColor: rgba(85, 172, 238, 0.05);
+@labeledIconBorder: rgba(0, 0, 0, 0.1);

package/src/i18n/en.json

@@ -13,6 +13,7 @@
       "add": "Add",
       "cancel": "Cancel",
       "clear": "Clear",
+      "close": "Close",
       "edit": "Edit",
       "ok": "OK",
       "save": "Save"