Adds updated amazon and github theme

fomantic · Aug 18, 2015 · 61af1f3 · 61af1f3
1 parent ceb489e
commit 61af1f3
Show file tree

Hide file tree

Showing 15 changed files with 164 additions and 58 deletions.
diff --git a/src/themes/amazon/elements/button.overrides b/src/themes/amazon/elements/button.overrides
@@ -1,37 +1,33 @@
 .ui.button {
-  background-image: linear-gradient(center top , #F7F8FA, #E7E9EC) repeat scroll 0 0 rgba(0, 0, 0, 0);
+  border: 1px solid;
+  border-color: #ADB1B8 #A2A6AC #8D9096;
 }
 
 .ui.primary.button {
-  color: #111111;
-  border: 1px solid;
-  border-color: #C59F43 #AA8326 #957321;
+  border-color: #A88734 #9C7E31 #846A29;
 }
 .ui.primary.button:hover {
-  border-color: #C59F43 #AA8326 #957321;
-  color: #111111;
+  border-color: #9C7E31 #90742D #786025;
 }
 
 .ui.secondary.button {
-  border: 1px solid;
   border-color: #3D444C #2F353B #2C3137;
 }
 .ui.secondary.button:hover {
   border-color: #32373E #24282D #212429;
 }
 
+.ui.positive.button {
+  border-color: #3E8E22;
+}
 
+/* Special Icons for Amazon */
 .ui.labeled.icon.buttons .button > .icon,
 .ui.labeled.icon.button > .icon {
-  padding-bottom: 0.48em;
-  padding-top: 0.48em;
-  position: absolute;
-  text-align: center;
-  width: 2em;
-  height: 2em;
-  top: 0.35em;
-  left: 0.4em;
-  border-radius: 3px;
+  margin: @relative2px;
+  height: ~"calc(100% - "@relative4px~")";
+  width: @relativeHuge;
+  border-radius: @borderRadius;
 }
 .ui.right.labeled.icon.buttons .button > .icon,
 .ui.right.labeled.icon.button > .icon {

diff --git a/src/themes/amazon/elements/button.variables b/src/themes/amazon/elements/button.variables
@@ -2,8 +2,13 @@
    Button Variables
 --------------------*/
 
+/* Globals */
+@pageFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+@black: #444C55;
+@orange: #FDE07B;
+@borderRadius: 3px;
+
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
 @textTransform: none;
 @textColor: #111111;
 @fontWeight: normal;
@@ -16,15 +21,13 @@
 
 @hoverBackgroundColor: #E0E0E0;
 
-@borderRadius: 3px;
-@verticalPadding: 0.8em;
-@horizontalPadding: 1.75em;
+@verticalPadding: @relative7px;
+@horizontalPadding: @relativeMedium;
 
 @backgroundColor: #F7F8FA;
 @backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
 @boxShadow:
-  0 1px 0 1px rgba(255, 255, 255, 0.3) inset,
-  0 0 0 1px #ADB2BB inset
+  0 1px 0 1px rgba(255, 255, 255, 0.3) inset
 ;
 
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
@@ -33,19 +36,20 @@
 ;
 
 @downBoxShadow:
-  0 0 0 1px #ADB2BB inset,
   0 1px 3px rgba(0, 0, 0, 0.2) inset
 ;
 
 @labeledIconBackgroundColor: #313A43;
 @labeledIconColor: #FFFFFF;
 @labeledIconBorder: transparent;
 
-@black: #444C55;
-@orange: #F4CC67;
+
+/* Labeled */
+@labeledLabelBorderColor: #ADB1B8;
 
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
 @primaryColor: @orange;
+@primaryTextColor: @textColor;
 @secondaryColor: @black;
 
 @mini: 10px;

diff --git a/src/themes/amazon/globals/site.variables b/src/themes/amazon/globals/site.variables
@@ -0,0 +1,43 @@
+/*******************************
+     User Global Variables
+*******************************/
+
+@pageMinWidth  : 1049px;
+@pageOverflowX : visible;
+
+@emSize: 13px;
+@fontSize : 13px;
+@fontName : 'Arial';
+@importGoogleFonts : false;
+
+@h1: 2.25em;
+
+@defaultBorderRadius: 0.30769em; /* 4px @ 13em */
+
+@disabledOpacity: 0.3;
+
+@black: #444C55;
+@orange: #FDE07B;
+
+@linkColor: #0066C0;
+@linkHoverColor: #C45500;
+@linkHoverUnderline: underline;
+
+@borderColor: rgba(0, 0, 0, 0.13);
+@solidBorderColor: #DDDDDD;
+@internalBorderColor: rgba(0, 0, 0, 0.06);
+@selectedBorderColor: #51A7E8;
+
+/* Breakpoints */
+@largeMonitorBreakpoint: 1049px;
+@computerBreakpoint: @largeMonitorBreakpoint;
+@tabletBreakpoint: @largeMonitorBreakpoint;
+
+/* Colors */
+@blue: #80A6CD;
+@green: #60B044;
+@orange: #D26911;
+
+
+@infoBackgroundColor: #E6F1F6;
+@infoTextColor: #4E575B;
diff --git a/src/themes/github/collections/breadcrumb.variables b/src/themes/github/collections/breadcrumb.variables
@@ -2,4 +2,10 @@
          Site Overrides
 *******************************/
 
-@huge: 1.5384em;
+@dividerOpacity: 1;
+@dividerSpacing: 0;
+@dividerSize: @big;
+@dividerColor: inherit;
+
+@huge: 1.5384em;
+
diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables
@@ -5,7 +5,7 @@
 /* Menu */
 @boxShadow: none;
 @dropdownIconDistance: @relative12px;
-@inputVerticalPadding: @relative2px;
+@inputVerticalPadding: @relative6px;
 
 @itemTextColor: #767676;
 @iconOpacity: 0.5;
@@ -28,16 +28,17 @@
 /* Tabular */
 @tabularBorderColor: #EEEEEE;
 @tabularVerticalBackground: linear-gradient(to left, #f6f6f6 0%, #fff 8px) transparent;
-@tabularVerticalPadding: @relative8px;
+@tabularVerticalPadding: @relative9px;
 @tabularHorizontalPadding: @relative10px;
 @tabularTextColor: @linkColor;
 
 @tabularHoveredTextColor: @linkHoverColor;
 @tabularActiveBoxShadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
 
 /* Text Menu */
+@textMenuItemSpacing: @relative8px;
 @textMenuItemColor: #333333;
-@textMenuItemFontWeight: bold;
+@textMenuItemFontWeight: normal;
 
 /* Pagination */
 @paginationMinWidth: 3.5em;

diff --git a/src/themes/github/collections/message.overrides b/src/themes/github/collections/message.overrides
@@ -1,11 +0,0 @@
-.ui.info.message {
-  background: linear-gradient(#D8EBF8, #D0E3EF);
-}
-.ui.error.message {
-  background: linear-gradient(#F8D8D8, #EFD0D0);
-}
-.ui.warning.message {
-  background: linear-gradient(#FFE3C8, #F5DAC0);
-}
-.ui.success.message {
-}

diff --git a/src/themes/github/collections/message.variables b/src/themes/github/collections/message.variables
@@ -1,4 +1,4 @@
-@background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)) #FEFEFE;
+@background: #FEFEFE;
 @boxShadow:
   0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset,
   0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset
@@ -8,17 +8,19 @@
 
 @headerFontSize: 1.15em;
 
-@infoTextColor: #264C72;
-@warningTextColor: #613A00;
-@errorTextColor: #991111;
-
 @floatingBoxShadow:
   0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
   0px 2px 3px 0px rgba(0, 0, 0, 0.1),
   0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset
 ;
 
-@infoBorderColor: #97C1DA;
+@infoBackgroundColor: #E6F1F6;
+
+@infoTextColor: #4E575B;
+@warningTextColor: #613A00;
+@errorTextColor: #991111;
+
+@infoBorderColor: #B7C7CF;
 @errorBorderColor: #DA9797;
 @warningBorderColor: #DCA874;
 

diff --git a/src/themes/github/collections/table.variables b/src/themes/github/collections/table.variables
@@ -2,5 +2,7 @@
     User Variable Overrides
 *******************************/
 
+@background: #F8F8F8;
+
 @cellVerticalPadding: @relative6px;
 @cellHorizontalPadding: @relative8px;
diff --git a/src/themes/github/elements/button.variables b/src/themes/github/elements/button.variables
@@ -11,13 +11,22 @@
 @fontWeight: bold;
 @textColor: #333333;
 
+@transition:
+  opacity @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing
+;
+
+@iconOpacity: 1;
 @iconHeight: 13px;
 @iconDistance: @relative4px;
 
 @verticalPadding: @relative6px;
 @horizontalPadding: @relative10px;
 
-@backgroundImage: linear-gradient(#FCFCFC, #EEEEEE);
+@backgroundColor: #FBFBFB;
+@backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05));
 @borderBoxShadowColor: rgba(0, 0, 0, 0.13);
 
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
@@ -51,6 +60,9 @@
 @labeledIconBorder: transparent;
 @labeledIconPadding: (@horizontalPadding + 2.25em);
 
+@labeledLabelFontSize: @relative11px;
+@labeledLabelAlign: flex-end;
+
 @basicFontWeight: bold;
 @basicTextColor: @linkColor;
 @basicHoverTextColor: @linkHoverColor;

diff --git a/src/themes/github/elements/header.variables b/src/themes/github/elements/header.variables
@@ -0,0 +1,9 @@
+/*******************************
+            Header
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@iconMargin: @4px;
diff --git a/src/themes/github/elements/icon.overrides b/src/themes/github/elements/icon.overrides
@@ -101,8 +101,8 @@
 .icon.keyboard:before { content: '\f00d'} /*  */
 .icon.law:before { content: '\f0d8'} /*  */
 .icon.light.bulb:before { content: '\f000'} /*  */
-.icon.link:before { content: '\f05c'} /*  */
-.icon.link.external:before { content: '\f07f'} /*  */
+.icon.linkify:before { content: '\f05c'} /*  */
+.icon.linkify.external:before { content: '\f07f'} /*  */
 .icon.list.ordered:before { content: '\f062'} /*  */
 .icon.list.unordered:before { content: '\f061'} /*  */
 .icon.location:before { content: '\f060'} /*  */

diff --git a/src/themes/github/elements/input.overrides b/src/themes/github/elements/input.overrides
@@ -0,0 +1,32 @@
+/*******************************
+            Input
+*******************************/
+
+/* Labeled Input has padding */
+.ui.labeled.input {
+  background-color: @white;
+  border: @borderWidth solid @borderColor;
+  border-radius: @borderRadius !important;
+}
+.ui.labeled.input input {
+  box-shadow: none !important;
+  border: none !important;
+}
+.ui.labeled.input .label {
+  font-weight: normal;
+  align-self: center;
+  font-size: 12px;
+  margin: @2px;
+  border-radius: @borderRadius !important;
+  padding: @relative5px @relative8px !important;
+}
+
+/* GitHub Uses Focus Group with class name added */
+.ui.labeled.input.focused {
+  border-color: @focusBorderColor;
+  box-shadow: @focusBoxShadow;
+}
+.ui.labeled.input.focused .label {
+  background-color: #E1EAF5;
+  color: #4078C0;
+}
diff --git a/src/themes/github/elements/input.variables b/src/themes/github/elements/input.variables
@@ -7,6 +7,9 @@
 @verticalPadding: @relative7px;
 @horizontalPadding: @relative8px;
 
+@borderColor: #CCCCCC;
+
+@focusBorderColor: #51A7E8;
 @focusBoxShadow:
   0 1px 2px rgba(0, 0, 0, 0.075) inset,
   0 0 5px rgba(81, 167, 232, 0.5)

diff --git a/src/themes/github/globals/site.variables b/src/themes/github/globals/site.variables
@@ -2,7 +2,7 @@
      User Global Variables
 *******************************/
 
-@pageMinWidth  : 980px;
+@pageMinWidth  : 1049px;
 @pageOverflowX : visible;
 
 @emSize: 13px;
@@ -16,6 +16,10 @@
 
 @disabledOpacity: 0.3;
 
+/* Colors */
+@blue: #80A6CD;
+@green: #60B044;
+@orange: #D26911;
 @black: #333333;
 
 @linkColor: #4078C0;
@@ -32,11 +36,8 @@
 @computerBreakpoint: @largeMonitorBreakpoint;
 @tabletBreakpoint: @largeMonitorBreakpoint;
 
-/* Colors */
-@blue: #80A6CD;
-@green: #60B044;
-@orange: #D26911;
-
-
 @infoBackgroundColor: #E6F1F6;
-@infoTextColor: #4E575B;
+
+@infoTextColor: #4E575B;
+@warningTextColor: #613A00;
+@errorTextColor: #991111;