Feature: Widget design update (#426)

This commit is contained in:
Nithin David Thomas
2020-01-17 13:36:05 +05:30
committed by Pranav Raj S
parent cc180b77ce
commit f7f7a6b9c7
18 changed files with 186 additions and 66 deletions

View File

@@ -4,6 +4,11 @@ $shadow-color-2: rgba(0, 0, 0, 0.07);
$shadow-color-3: rgba(50, 50, 93, .08);
$shadow-color-4: rgba(0, 0, 0, .05);
$color-shadow-medium: rgba(0, 0, 0, 0.1);
$color-shadow-light: rgba(0, 0, 0, 0.06);
$color-shadow-large: rgba(0, 0, 0, 0.25);
$color-shadow-outline: rgba(66, 153, 225, 0.5);
@mixin normal-shadow {
box-shadow: 0 $space-small $space-normal $shadow-color-1, 0 $space-smaller $space-slab $shadow-color-2;
}
@@ -13,8 +18,59 @@ $shadow-color-4: rgba(0, 0, 0, .05);
}
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
&::-webkit-input-placeholder {
@content
}
&:-moz-placeholder {
@content
}
&::-moz-placeholder {
@content
}
&:-ms-input-placeholder {
@content
}
}
@mixin shadow {
box-shadow: 0 1px 10px -4 $color-shadow-medium,
0 1px 5px 2px $color-shadow-light;
}
@mixin shadow-medium {
box-shadow: 0 4px 6px -8px $color-shadow-medium,
0 2px 4px -4px $color-shadow-light;
}
@mixin shadow-large {
box-shadow: 0 10px 15px -16px $color-shadow-medium,
0 4px 6px -8px $color-shadow-light;
}
@mixin shadow-big {
box-shadow: 0 20px 25px -20px $color-shadow-medium,
0 10px 10px -10px $color-shadow-light;
}
@mixin shadow-mega {
box-shadow: 0 25px 50px -12px $color-shadow-big;
}
@mixin shadow-inner {
box-shadow: inset 0 2px 4px 0 $color-shadow-light;
}
@mixin shadow-outline {
box-shadow: 0 0 0 3px $color-shadow-outline;
}
@mixin shadow-none {
box-shadow: none;
}