forked from mozbrick/brick
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_component-ui-defaults.scss
51 lines (46 loc) · 2.64 KB
/
_component-ui-defaults.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@import "_custommixins";
$_bgBaseColor: #858585;
$_bgSelectBaseColor: #E1E1E1;
$_bgHighlightColor: #A0A0A0;
$COMPONENT_CUSTOM_FONT_NAME: "_OpenSansBrick";
$COMPONENT_UI_FONT_FAMILY: $COMPONENT_CUSTOM_FONT_NAME, "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$COMPONENT_UI_LINE_HEIGHT: 19px;
$COMPONENT_UI_FONT_SIZE: 14px;
$COMPONENT_UI_HEADER_FONT_SIZE: 20px;
$COMPONENT_UI_LINE_PADDING: ($COMPONENT_UI_LINE_HEIGHT - $COMPONENT_UI_FONT_SIZE) / 2; // for when you don't want to specify line-height
$COMPONENT_UI_TEXT_COLOR: #D4D4D4;
$COMPONENT_UI_TEXT_COLOR_SELECTED: #F2F2F2;
$COMPONENT_UI_TEXT_COLOR_HOVER: mix($COMPONENT_UI_TEXT_COLOR, $COMPONENT_UI_TEXT_COLOR_SELECTED, 25%);
// Backgrounds
@mixin component-ui-background{
background-color: $_bgHighlightColor;
background-repeat: no-repeat;
background-position: 0 0;
background-image: -o-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: -moz-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: -webkit-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: -ms-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: linear-gradient(-180deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
}
@mixin component-ui-background-hover{
background-color: $_bgHighlightColor;
background-repeat: no-repeat;
background-position: 0 1em;
background-image: -o-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: -moz-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: -webkit-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: -ms-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
background-image: linear-gradient(-180deg, $_bgHighlightColor 14%, $_bgBaseColor 100%);
}
// Selected Item Background
@mixin component-ui-background-selected{
background-color: $_bgHighlightColor;
background-repeat: no-repeat;
background-position: 0 0;
background-position: 0 1em;
background-image: -o-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgSelectBaseColor 100%);
background-image: -moz-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgSelectBaseColor 100%);
background-image: -webkit-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgSelectBaseColor 100%);
background-image: -ms-linear-gradient(-90deg, $_bgHighlightColor 14%, $_bgSelectBaseColor 100%);
background-image: linear-gradient(-180deg, $_bgHighlightColor 14%, $_bgSelectBaseColor 100%);
}