Skip to content

Commit 248ed86

Browse files
arielgerarielger
committed
Add mixing folder to core, add variables import to react-components
1 parent fb4e5eb commit 248ed86

39 files changed

Lines changed: 998 additions & 45 deletions

‎packages/core/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Auth0 Styleguide Core

‎packages/core/mixins/index.styl‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
// Mixins
2+
// --------------------------------------------------
3+
vendors ?= official
4+
5+
percentage($n)
6+
if $n == 0
7+
0
8+
else
9+
unit($n * 100, "%")
10+
11+
// Utilities
12+
13+
@import "mixins/hide-text"
14+
@import "mixins/opacity"
15+
@import "mixins/image"
16+
@import "mixins/labels"
17+
@import "mixins/reset-filter"
18+
@import "mixins/resize"
19+
@import "mixins/responsive-visibility"
20+
@import "mixins/size"
21+
@import "mixins/tab-focus"
22+
@import "mixins/reset-text"
23+
@import "mixins/text-emphasis"
24+
@import "mixins/text-overflow"
25+
@import "mixins/vendor-prefixes"
26+
27+
// Components
28+
@import "mixins/alerts"
29+
@import "mixins/buttons"
30+
@import "mixins/panels"
31+
@import "mixins/pagination"
32+
@import "mixins/list-group"
33+
@import "mixins/nav-divider"
34+
@import "mixins/forms"
35+
@import "mixins/progress-bar"
36+
@import "mixins/table-row"
37+
38+
// Skins
39+
@import "mixins/background-variant"
40+
@import "mixins/border-radius"
41+
@import "mixins/gradients"
42+
43+
// Layout
44+
@import "mixins/clearfix"
45+
@import "mixins/center-block"
46+
@import "mixins/nav-vertical-align"
47+
@import "mixins/grid-framework"
48+
@import "mixins/grid"
49+
50+
51+
52+
@import '../vars/index.styl';
53+
54+
clearfix()
55+
&:after
56+
clear: both
57+
58+
&:after, &:before
59+
content: ""
60+
display: table
61+
62+
*zoom: 1
63+
64+
breakpoint(point, orientation = "min")
65+
if point == "mobile"
66+
if orientation == "max"
67+
@media ({orientation}-width: (breakpoint-mobile - 1) )
68+
{block}
69+
else
70+
@media ({orientation}-width: breakpoint-mobile)
71+
{block}
72+
73+
else if point == "mobile-landscape"
74+
if orientation == "max"
75+
@media ({orientation}-width: (breakpoint-mobile-landscape - 1) )
76+
{block}
77+
else
78+
@media ({orientation}-width: breakpoint-mobile-landscape)
79+
{block}
80+
81+
82+
else if point == "tablet"
83+
if orientation == "max"
84+
@media ({orientation}-width: (breakpoint-tablet - 1) )
85+
{block}
86+
else
87+
@media ({orientation}-width: breakpoint-tablet)
88+
{block}
89+
90+
else if point == "desktop"
91+
if orientation == "max"
92+
@media ({orientation}-width: (breakpoint-desktop - 1) )
93+
{block}
94+
else
95+
@media ({orientation}-width: breakpoint-desktop)
96+
{block}
97+
98+
else if point == "desktop-hd"
99+
if orientation == "max"
100+
@media ({orientation}-width: (breakpoint-desktop-hd - 1) )
101+
{block}
102+
else
103+
@media ({orientation}-width: breakpoint-desktop-hd)
104+
{block}
105+
106+
else if point == "retina-only"
107+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
108+
{block}
109+
110+
grid(cols = 1, gutter = 0, childs = ".item", orientation= "right")
111+
clearfix()
112+
width: auto
113+
margin-right: -(gutter)
114+
115+
{childs}
116+
float: left
117+
width: (100% / cols)
118+
padding-{orientation}: gutter
119+
background-clip: content-box

‎packages/core/mixins/mixins/alerts.styl‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Alerts
2+
alert-variant($background, $border, $text-color)
3+
background-color $background
4+
color $text-color
5+
6+
hr
7+
border-top-color darken($border, 5)
8+
9+
.alert-link
10+
color darken($text-color, 10)

‎packages/core/mixins/mixins/background-variant.styl‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Contextual backgrounds
2+
bg-variant($color)
3+
background-color $color
4+
5+
a&:hover,
6+
a&:focus
7+
background-color darken($color, 10)

‎packages/core/mixins/mixins/border-radius.styl‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Single side border-radius
2+
border-top-radius($radius)
3+
border-top-right-radius $radius
4+
border-top-left-radius $radius
5+
6+
border-right-radius($radius)
7+
border-bottom-right-radius $radius
8+
border-top-right-radius $radius
9+
10+
border-bottom-radius($radius)
11+
border-bottom-right-radius $radius
12+
border-bottom-left-radius $radius
13+
14+
border-left-radius($radius)
15+
border-bottom-left-radius $radius
16+
border-top-left-radius $radius

‎packages/core/mixins/mixins/buttons.styl‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Button variants
2+
//
3+
// Easily pump out default styles, as well as :hover, :focus, :active,
4+
// and disabled options for all buttons
5+
button-variant($color, $background, $border)
6+
color $color
7+
background-color $background
8+
border-color $border
9+
10+
&:focus,
11+
&.focus
12+
color $color
13+
background-color darken($background, 10)
14+
border-color darken($border, 25)
15+
16+
&:hover
17+
color $color
18+
background-color darken($background, 10)
19+
border-color darken($border, 12)
20+
21+
&:active,
22+
&.active,
23+
.open > .dropdown-toggle&
24+
color $color
25+
background-color darken($background, 10)
26+
border-color darken($border, 12)
27+
28+
&:hover,
29+
&:focus,
30+
&.focus
31+
color $color
32+
background-color darken($background, 17)
33+
border-color darken($border, 25)
34+
35+
&:active,
36+
&.active,
37+
.open > .dropdown-toggle&
38+
background-image none
39+
40+
&.disabled,
41+
&[disabled],
42+
fieldset[disabled] &
43+
&:hover,
44+
&:focus,
45+
&.focus
46+
background-color $background
47+
border-color $border
48+
49+
.badge
50+
color $background
51+
background-color $color
52+
53+
// Button sizes
54+
button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius)
55+
padding $padding-vertical $padding-horizontal
56+
font-size $font-size
57+
line-height $line-height
58+
border-radius $border-radius

‎packages/core/mixins/mixins/center-block.styl‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Center-align a block level element
2+
center-block()
3+
display block
4+
margin-left auto
5+
margin-right auto

‎packages/core/mixins/mixins/clearfix.styl‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Clearfix
2+
//
3+
// For modern browsers
4+
// 1. The space content is one way to avoid an Opera bug when the
5+
// contenteditable attribute is included anywhere else in the document.
6+
// Otherwise it causes space to appear at the top and bottom of elements
7+
// that are clearfixed.
8+
// 2. The use of `table` rather than `block` is only necessary if using
9+
// `:before` to contain the top-margins of child elements.
10+
//
11+
// Source http://nicolasgallagher.com/micro-clearfix-hack/
12+
clearfix()
13+
&:before,
14+
&:after
15+
content " " // 1
16+
display table // 2
17+
18+
&:after
19+
clear both

‎packages/core/mixins/mixins/forms.styl‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// Form validation states
2+
//
3+
// Used in forms to generate the form validation CSS for warnings, errors,
4+
// and successes.
5+
6+
form-control-validation($text-color = #555, $border-color = #ccc, $background-color = #f5f5f5)
7+
// Color the label and help text
8+
.help-block,
9+
.control-label,
10+
.radio,
11+
.checkbox,
12+
.radio-inline,
13+
.checkbox-inline,
14+
&.radio label,
15+
&.checkbox label,
16+
&.radio-inline label,
17+
&.checkbox-inline label
18+
color $text-color
19+
20+
// Set the border and box shadow on specific inputs to match
21+
&.form-control
22+
border-color $border-color
23+
box-shadow inset 0 1px 1px rgba(0, 0, 0, .075) // Redeclare so transitions work
24+
25+
&:focus
26+
border-color darken($border-color, 10)
27+
box-shadow inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($border-color, 20)
28+
29+
// Set validation states also for addons
30+
.input-group-addon
31+
color $text-color
32+
border-color $border-color
33+
background-color $background-color
34+
35+
// Optional feedback icon
36+
.form-control-feedback
37+
color $text-color
38+
39+
40+
// Form control focus state
41+
//
42+
// Generate a customized focus state and for any input with the specified color,
43+
// which defaults to the `$input-border-focus` variable.
44+
//
45+
// We highly encourage you to not customize the default value, but instead use
46+
// this to tweak colors on an as-needed basis. This aesthetic change is based on
47+
// WebKit's default styles, but applicable to a wider range of browsers. Its
48+
// usability and accessibility should be taken into account with any change.
49+
//
50+
// Example usage change the default blue border and shadow to white for better
51+
// contrast against a dark gray background.
52+
form-control-focus($color = $input-border-focus)
53+
$color-rgba = rgba(red($color), green($color), blue($color), .6)
54+
55+
&:focus
56+
border-color $color
57+
outline 0
58+
box-shadow inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba
59+
60+
// Form control sizing
61+
//
62+
// Relative text size, padding, and border-radii changes for form controls. For
63+
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
64+
// element gets special love because it's special, and that's a fact!
65+
input-size($input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius)
66+
height $input-height
67+
padding $padding-vertical $padding-horizontal
68+
font-size $font-size
69+
line-height $line-height
70+
border-radius $border-radius
71+
72+
select&
73+
height $input-height
74+
line-height $input-height
75+
76+
textarea&,
77+
select[multiple]&
78+
height auto

‎packages/core/mixins/mixins/gradients.styl‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Gradients
2+
hex(num)
3+
return base-convert(round(num), 16)
4+
5+
argb(color)
6+
return s('#%s%s%s%s',
7+
hex(alpha(color) * 255),
8+
hex(red(color)),
9+
hex(green(color)),
10+
hex(blue(color)))
11+
12+
// Horizontal gradient, from left to right
13+
//
14+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
15+
// Color stops are not available in IE9 and below.
16+
gradient-horizontal($start-color = #555, $end-color = #333, $start-percent = 0%, $end-percent = 100%)
17+
//background-image -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent) // Safari 5.1-6, Chrome 10+
18+
//background-image -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent) // Opera 12
19+
background-image linear-gradient(to right, $start-color $start-percent, $end-color $end-percent) // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
20+
background-repeat repeat-x
21+
filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=1)", argb($start-color), argb($end-color)) // IE9 and down
22+
23+
// Vertical gradient, from top to bottom
24+
//
25+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
26+
// Color stops are not available in IE9 and below.
27+
gradient-vertical($start-color = #555, $end-color = #333, $start-percent = 0%, $end-percent = 100%)
28+
//background-image -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent) // Safari 5.1-6, Chrome 10+
29+
//background-image -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent) // Opera 12
30+
background-image linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent) // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
31+
background-repeat repeat-x
32+
filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)", argb($start-color), argb($end-color)) // IE9 and down
33+
34+
gradient-directional($start-color = #555, $end-color = #333, $deg = 45deg)
35+
background-repeat repeat-x
36+
// background-image -webkit-linear-gradient($deg, $start-color, $end-color) // Safari 5.1-6, Chrome 10+
37+
// background-image -o-linear-gradient($deg, $start-color, $end-color) // Opera 12
38+
background-image linear-gradient($deg, $start-color, $end-color) // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
39+
40+
gradient-horizontal-three-colors($start-color = #00b3ee, $mid-color = #7a43b6, $color-stop = 50%, $end-color = #c3325f)
41+
// background-image -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color)
42+
// background-image -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color)
43+
background-image linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color)
44+
background-repeat no-repeat
45+
filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=1)", argb($start-color), argb($end-color)) // IE9 and down, gets no $color-stop at all for proper fallback
46+
47+
gradient-vertical-three-colors($start-color = #00b3ee, $mid-color = #7a43b6, $color-stop = 50% , $end-color = #c3325f)
48+
// background-image -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color)
49+
// background-image -o-linear-gradient($start-color, $mid-color $color-stop, $end-color)
50+
background-image linear-gradient($start-color, $mid-color $color-stop, $end-color)
51+
background-repeat no-repeat
52+
filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)", argb($start-color), argb($end-color)) // IE9 and down, gets no $color-stop at all for proper fallback
53+
54+
gradient-radial($inner-color = #555, $outer-color = #333)
55+
// background-image -webkit-radial-gradient(circle, $inner-color, $outer-color)
56+
background-image radial-gradient(circle, $inner-color, $outer-color)
57+
background-repeat no-repeat
58+
59+
gradient-striped($color = rgba(255, 255, 255, .15), $angle = 45deg)
60+
// background-image -webkit-linear-gradient($angle, color 25%, transparent 25%, transparent 50%, color 50%, color 75%, transparent 75%, transparent)
61+
// background-image -o-linear-gradient($angle, color 25%, transparent 25%, transparent 50%, color 50%, color 75%, transparent 75%, transparent)
62+
background-image linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent)

0 commit comments

Comments
 (0)