10 changed files with 174 additions and 5 deletions
Split View
Diff Options
-
0build/less/themes/packages/amazon/elements/button.overrides
-
71build/less/themes/packages/amazon/elements/button.variables
-
2build/less/themes/packages/chubby/elements/button.variables
-
2server/documents/elements/button.html.eco
-
5server/files/stylesheets/semantic.css
-
5src/definitions/elements/button.less
-
38src/themes/packages/amazon/elements/button.overrides
-
52src/themes/packages/amazon/elements/button.variables
-
2src/themes/packages/chubby/elements/button.variables
-
2src/themes/packages/default/elements/button.variables
@ -0,0 +1,71 @@ |
|||
/*------------------- |
|||
Button Variables |
|||
--------------------*/ |
|||
|
|||
/* Button Variables */ |
|||
@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; |
|||
@textTransform: none; |
|||
@fontWeight: bold; |
|||
@textColor: #333333; |
|||
|
|||
@textShadow: 0px 1px 0px rgba(255, 255, 255, 0.9); |
|||
@invertedTextShadow: 0px -1px 0px rgba(0, 0, 0, 0.25); |
|||
|
|||
@borderRadius: 0.25em; |
|||
|
|||
@verticalPadding: 0.75em; |
|||
@horizontalPadding: 1.15em; |
|||
|
|||
@backgroundColor: #FAFAFA; |
|||
@backgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); |
|||
@boxShadow: |
|||
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, |
|||
0 0 0 1px rgba(0, 0, 0, 0.13) inset, |
|||
0 1px 3px rgba(0, 0, 0, 0.05) |
|||
; |
|||
|
|||
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); |
|||
@coloredBoxShadow: |
|||
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, |
|||
0 0 0 1px rgba(0, 0, 0, 0.1) inset, |
|||
0 1px 3px rgba(0, 0, 0, 0.05) |
|||
; |
|||
|
|||
@hoverBackgroundColor: ''; |
|||
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); |
|||
@hoverBoxShadow: ''; |
|||
|
|||
@downBackgroundColor: ''; |
|||
@downBackgroundImage: ''; |
|||
@downBoxShadow: |
|||
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, |
|||
0 0 0 1px rgba(0, 0, 0, 0.13) inset, |
|||
0 3px 5px rgba(0, 0, 0, 0.15) inset !important |
|||
; |
|||
@activeBackgroundColor: #DFDFDF; |
|||
@activeBackgroundImage: none; |
|||
@activeBoxShadow: |
|||
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, |
|||
0 0 0 1px rgba(0, 0, 0, 0.13) inset, |
|||
0 3px 5px rgba(0, 0, 0, 0.1) inset !important |
|||
; |
|||
|
|||
@labeledIconBackgroundColor: transparent; |
|||
@labeledIconBorder: transparent; |
|||
@labeledIconPadding: (@horizontalPadding + 2.25em); |
|||
|
|||
@black: #3072B3; |
|||
@orange: #F4CC67; |
|||
|
|||
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); |
|||
@primaryColor: @orange; |
|||
@secondaryColor: @black; |
|||
|
|||
@mini: 10px; |
|||
@tiny: 11px; |
|||
@small: 12px; |
|||
@medium: 13px; |
|||
@large: 14px; |
|||
@big: 16px; |
|||
@huge: 18px; |
|||
@massive: 22px; |
@ -0,0 +1,38 @@ |
|||
.ui.button { |
|||
background-image: linear-gradient(center top , #F7F8FA, #E7E9EC) repeat scroll 0 0 rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.ui.primary.button { |
|||
color: #111111; |
|||
border: 1px solid; |
|||
border-color: #C59F43 #AA8326 #957321; |
|||
} |
|||
.ui.primary.button:hover { |
|||
border-color: #C59F43 #AA8326 #957321; |
|||
color: #111111; |
|||
} |
|||
.ui.secondary.button { |
|||
border: 1px solid; |
|||
border-color: #3D444C #2F353B #2C3137; |
|||
} |
|||
.ui.secondary.button:hover { |
|||
border-color: #32373E #24282D #212429; |
|||
} |
|||
.ui.labeled.icon.buttons .button .icon, |
|||
.ui.labeled.icon.button .icon { |
|||
padding-bottom: 0.4em; |
|||
padding-top: 0.4em; |
|||
position: absolute; |
|||
text-align: center; |
|||
width: 2em; |
|||
top: 0.3em; |
|||
height: auto; |
|||
left: 0.4em; |
|||
border-radius: 3px; |
|||
} |
|||
.ui.right.labeled.icon.buttons .button .icon, |
|||
.ui.right.labeled.icon.button .icon { |
|||
left: auto; |
|||
right: 0.4em; |
|||
border-radius: 3px; |
|||
} |
@ -0,0 +1,52 @@ |
|||
/*------------------- |
|||
Button Variables |
|||
--------------------*/ |
|||
|
|||
/* Button Variables */ |
|||
@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; |
|||
@textTransform: none; |
|||
@textColor: #111111; |
|||
@fontWeight: normal; |
|||
|
|||
@borderRadius: 3px; |
|||
|
|||
@verticalPadding: 0.75em; |
|||
@horizontalPadding: 1.75em; |
|||
|
|||
@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 |
|||
; |
|||
|
|||
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); |
|||
@coloredBoxShadow: |
|||
0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset |
|||
; |
|||
|
|||
@downBoxShadow: |
|||
0 0 0 1px #ADB2BB inset, |
|||
0 1px 3px rgba(0, 0, 0, 0.2) inset |
|||
; |
|||
|
|||
@labeledIconBackgroundColor: #313A43; |
|||
@labeledIconColor: #FFFFFF; |
|||
@labeledIconBorder: transparent; |
|||
@labeledIconPadding: (@horizontalPadding + 2.25em); |
|||
|
|||
@black: #444C55; |
|||
@orange: #F4CC67; |
|||
|
|||
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); |
|||
@primaryColor: @orange; |
|||
@secondaryColor: @black; |
|||
|
|||
@mini: 10px; |
|||
@tiny: 11px; |
|||
@small: 12px; |
|||
@medium: 13px; |
|||
@large: 14px; |
|||
@big: 16px; |
|||
@huge: 18px; |
|||
@massive: 22px; |
Write
Preview
Loading…
Cancel
Save