admin styling
This commit is contained in:
Nabeel Shahzad
@@ -1,17 +1,237 @@
|
||||
@mixin input-size($padding-vertical, $padding-horizontal, $height){
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
height: $height;
|
||||
@mixin input-size($padding-vertical, $padding-horizontal) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
@mixin placeholder($color, $opacity){
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
@mixin form-control-placeholder($color, $opacity) {
|
||||
.form-control::-moz-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-moz-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-ms-input-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin light-form(){
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
@mixin light-form() {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
@mixin input-sm-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.form-group-no-border.input-sm,
|
||||
.input-group.form-group-no-border.input-sm {
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.input-sm,
|
||||
.input-group.input-sm {
|
||||
.form-control {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
|
||||
|
||||
& + .form-control {
|
||||
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-lg-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.form-group-no-border.input-lg,
|
||||
.input-group.form-group-no-border.input-lg {
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.input-lg,
|
||||
.input-group.input-lg {
|
||||
.form-control {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
|
||||
|
||||
& + .form-control {
|
||||
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border {
|
||||
.form-control {
|
||||
/*margin-top: 2px;*/
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group,
|
||||
.input-group {
|
||||
.form-control {
|
||||
margin-top: 2px;
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .form-control,
|
||||
& ~ .form-control {
|
||||
padding: $padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//color1 = $opacity-5
|
||||
//color2 = $opacity-8
|
||||
//color3 = $white-color
|
||||
//color4 = $transparent-bg
|
||||
//color5 = $opacity-1
|
||||
//color6 = $opacity-2
|
||||
|
||||
@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
|
||||
@include form-control-placeholder(darken($color2, 8%), 1);
|
||||
|
||||
.form-control {
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
|
||||
&:focus {
|
||||
border-color: $color3;
|
||||
background-color: $color4;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger {
|
||||
&:after {
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
.form-control {
|
||||
background-color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: $color4;
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
.input-group-focus {
|
||||
.input-group-addon {
|
||||
background-color: $color4;
|
||||
border-color: $color3;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border {
|
||||
.form-control {
|
||||
background-color: $color5;
|
||||
color: $color2;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control + .input-group-addon {
|
||||
background-color: $color5;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
& + .input-group-addon {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: $color5;
|
||||
border: none;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
&.input-group-focus {
|
||||
.input-group-addon {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,285 @@
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@mixin transition-input-focus-color() {
|
||||
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@mixin transition($time, $type) {
|
||||
-webkit-transition: all $time $type;
|
||||
-moz-transition: all $time $type;
|
||||
-o-transition: all $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin rotate-180() {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@mixin transform-translate-x($value) {
|
||||
-webkit-transform: translate3d($value, 0, 0);
|
||||
-moz-transform: translate3d($value, 0, 0);
|
||||
-o-transform: translate3d($value, 0, 0);
|
||||
-ms-transform: translate3d($value, 0, 0);
|
||||
transform: translate3d($value, 0, 0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value) {
|
||||
-webkit-transform: translate3d(0, $value, 0);
|
||||
-moz-transform: translate3d(0, $value, 0);
|
||||
-o-transform: translate3d(0, $value, 0);
|
||||
-ms-transform: translate3d(0, $value, 0);
|
||||
transform: translate3d(0, $value, 0);
|
||||
}
|
||||
|
||||
@mixin bar-animation($type) {
|
||||
-webkit-animation: $type 500ms linear 0s;
|
||||
-moz-animation: $type 500ms linear 0s;
|
||||
animation: $type 500ms 0s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@mixin topbar-x-rotation() {
|
||||
@keyframes topbar-x {
|
||||
0% {
|
||||
top: 0px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
top: 6px;
|
||||
transform: rotate(145deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes topbar-x {
|
||||
0% {
|
||||
top: 0px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(145deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(130deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes topbar-x {
|
||||
0% {
|
||||
top: 0px;
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
top: 6px;
|
||||
-moz-transform: rotate(145deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(130deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin topbar-back-rotation() {
|
||||
@keyframes topbar-back {
|
||||
0% {
|
||||
top: 6px;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes topbar-back {
|
||||
0% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
-webkit-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes topbar-back {
|
||||
0% {
|
||||
top: 6px;
|
||||
-moz-transform: rotate(135deg);
|
||||
}
|
||||
45% {
|
||||
-moz-transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
-moz-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-x-rotation() {
|
||||
@keyframes bottombar-x {
|
||||
0% {
|
||||
bottom: 0px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
bottom: 6px;
|
||||
transform: rotate(-145deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bottombar-x {
|
||||
0% {
|
||||
bottom: 0px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(-145deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-130deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bottombar-x {
|
||||
0% {
|
||||
bottom: 0px;
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
bottom: 6px;
|
||||
-moz-transform: rotate(-145deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(-130deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-back-rotation {
|
||||
@keyframes bottombar-back {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
bottom: 0px;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bottombar-back {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(-135deg);
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: rotate(10deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
bottom: 0px;
|
||||
-webkit-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bottombar-back {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-moz-transform: rotate(-135deg);
|
||||
}
|
||||
45% {
|
||||
-moz-transform: rotate(10deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
bottom: 0px;
|
||||
-moz-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin nc-rotate($degrees, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: rotate($degrees);
|
||||
-moz-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees);
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
|
||||
@mixin nc-flip($horiz, $vert, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: scale($horiz, $vert);
|
||||
-moz-transform: scale($horiz, $vert);
|
||||
-ms-transform: scale($horiz, $vert);
|
||||
-o-transform: scale($horiz, $vert);
|
||||
transform: scale($horiz, $vert);
|
||||
}
|
||||
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
@@ -135,14 +414,14 @@
|
||||
75% { transform: rotate(5deg); }
|
||||
100% { top: 0px; transform: rotate(0); }
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes topbar-back {
|
||||
0% { top: 6px; -webkit-transform: rotate(135deg); }
|
||||
45% { -webkit-transform: rotate(-10deg); }
|
||||
75% { -webkit-transform: rotate(5deg); }
|
||||
100% { top: 0px; -webkit-transform: rotate(0); }
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes topbar-back {
|
||||
0% { top: 6px; -moz-transform: rotate(135deg); }
|
||||
45% { -moz-transform: rotate(-10deg); }
|
||||
|
||||
Reference in New Issue
Block a user