add admin files
This commit is contained in:
Nabeel Shahzad
@@ -0,0 +1,70 @@
|
||||
// Mixin for generating new styles
|
||||
@mixin btn-styles($btn-color, $btn-states-color) {
|
||||
border-color: $btn-color;
|
||||
color: $btn-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
background-color: $transparent-bg;
|
||||
color: $btn-states-color;
|
||||
border-color: $btn-states-color;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $transparent-bg;
|
||||
border-color: $btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.btn-fill {
|
||||
color: $white-color;
|
||||
background-color: $btn-color;
|
||||
@include opacity(1);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle{
|
||||
background-color: $btn-states-color;
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
.caret{
|
||||
border-top-color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
.caret{
|
||||
border-top-color: $btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
|
||||
font-size: $font-size;
|
||||
border-radius: $border;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
&.btn-round{
|
||||
padding: $padding-vertical + 1 $padding-horizontal;
|
||||
}
|
||||
|
||||
&.btn-simple{
|
||||
padding: $padding-vertical + 2 $padding-horizontal;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@mixin filter($color){
|
||||
@if $color == #FFFFFF{
|
||||
background-color: rgba($color,.91);
|
||||
} @else {
|
||||
background-color: rgba($color,.69);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
// Scales for responsive SVG containers
|
||||
$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
|
||||
$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
|
||||
|
||||
// Class names to be used when generating CSS
|
||||
$ct-class-chart: ct-chart !default;
|
||||
$ct-class-chart-line: ct-chart-line !default;
|
||||
$ct-class-chart-bar: ct-chart-bar !default;
|
||||
$ct-class-horizontal-bars: ct-horizontal-bars !default;
|
||||
$ct-class-chart-pie: ct-chart-pie !default;
|
||||
$ct-class-chart-donut: ct-chart-donut !default;
|
||||
$ct-class-label: ct-label !default;
|
||||
$ct-class-series: ct-series !default;
|
||||
$ct-class-line: ct-line !default;
|
||||
$ct-class-point: ct-point !default;
|
||||
$ct-class-area: ct-area !default;
|
||||
$ct-class-bar: ct-bar !default;
|
||||
$ct-class-slice-pie: ct-slice-pie !default;
|
||||
$ct-class-slice-donut: ct-slice-donut !default;
|
||||
$ct-class-grid: ct-grid !default;
|
||||
$ct-class-vertical: ct-vertical !default;
|
||||
$ct-class-horizontal: ct-horizontal !default;
|
||||
$ct-class-start: ct-start !default;
|
||||
$ct-class-end: ct-end !default;
|
||||
|
||||
// Container ratio
|
||||
$ct-container-ratio: (1/1.618) !default;
|
||||
|
||||
// Text styles for labels
|
||||
$ct-text-color: rgba(0, 0, 0, 0.4) !default;
|
||||
$ct-text-size: 1.3rem !default;
|
||||
$ct-text-align: flex-start !default;
|
||||
$ct-text-justify: flex-start !default;
|
||||
$ct-text-line-height: 1;
|
||||
|
||||
// Grid styles
|
||||
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
|
||||
$ct-grid-dasharray: 2px !default;
|
||||
$ct-grid-width: 1px !default;
|
||||
|
||||
// Line chart properties
|
||||
$ct-line-width: 3px !default;
|
||||
$ct-line-dasharray: false !default;
|
||||
$ct-point-size: 8px !default;
|
||||
// Line chart point, can be either round or square
|
||||
$ct-point-shape: round !default;
|
||||
// Area fill transparency between 0 and 1
|
||||
$ct-area-opacity: 0.8 !default;
|
||||
|
||||
// Bar chart bar width
|
||||
$ct-bar-width: 10px !default;
|
||||
|
||||
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
|
||||
$ct-donut-width: 60px !default;
|
||||
|
||||
// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
|
||||
// should set this property to false
|
||||
$ct-include-classes: true !default;
|
||||
|
||||
// If this is set to true the CSS will contain colored series. You can extend or change the color with the
|
||||
// properties below
|
||||
$ct-include-colored-series: $ct-include-classes !default;
|
||||
|
||||
// If set to true this will include all responsive container variations using the scales defined at the top of the script
|
||||
$ct-include-alternative-responsive-containers: $ct-include-classes !default;
|
||||
|
||||
// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
|
||||
$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
|
||||
$ct-series-colors: (
|
||||
$new-blue,
|
||||
$new-red,
|
||||
$new-orange,
|
||||
$new-purple,
|
||||
$new-green,
|
||||
$new-dark-blue,
|
||||
$new-black,
|
||||
$social-google,
|
||||
$social-tumblr,
|
||||
$social-youtube,
|
||||
$social-twitter,
|
||||
$social-pinterest,
|
||||
$social-behance,
|
||||
#6188e2,
|
||||
#a748ca
|
||||
) !default;
|
||||
@@ -0,0 +1,13 @@
|
||||
@mixin icon-background ($icon-url){
|
||||
background-image : url($icon-url);
|
||||
|
||||
}
|
||||
|
||||
@mixin icon-shape ($size, $padding, $border-radius) {
|
||||
height: $size;
|
||||
width: $size;
|
||||
padding: $padding;
|
||||
border-radius: $border-radius;
|
||||
display: inline-table;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@mixin input-size($padding-vertical, $padding-horizontal, $height){
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin placeholder($color, $opacity){
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
@mixin light-form(){
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@mixin label-style(){
|
||||
padding: $padding-label-vertical $padding-label-horizontal;
|
||||
border: 1px solid $default-color;
|
||||
border-radius: $border-radius-small;
|
||||
color: $default-color;
|
||||
font-weight: $font-weight-semi;
|
||||
font-size: $font-size-small;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@mixin label-color($color){
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
@mixin label-color-fill($color){
|
||||
border-color: $color;
|
||||
color: $white-color;
|
||||
background-color: $color;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
$prefixes: ('', '-moz-', '-webkit-', '-ms-') !default;
|
||||
|
||||
@mixin circle-animation(){
|
||||
@for $i from 0 to length($prefixes) {
|
||||
@include circle-animation-details(nth($prefixes, $i + 1));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin circle-animation-details($name){
|
||||
#{$name}animation-name: spin;
|
||||
#{$name}animation-duration: 1250ms;
|
||||
#{$name}animation-iteration-count: infinite;
|
||||
#{$name}animation-timing-function: linear;
|
||||
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
from { -webkit-transform: rotate(0deg); }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
from { -moz-transform: rotate(0deg); }
|
||||
to { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes spin {
|
||||
from { -ms-transform: rotate(0deg); }
|
||||
to { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@mixin navbar-color($color){
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@mixin center-item(){
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@mixin social-buttons-color ($color){
|
||||
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
background-color: $transparent-bg;
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-color: $transparent-bg;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&.btn-fill {
|
||||
color: $white-color;
|
||||
background-color: $color;
|
||||
opacity: 0.9;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle{
|
||||
background-color: $color;
|
||||
color: $white-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
@mixin pill-style($color){
|
||||
border: 1px solid $color;
|
||||
color: $color;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// Opacity
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: #{alpha(opacity=$opacity-ie)};
|
||||
}
|
||||
|
||||
@mixin black-filter($opacity){
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: rgba(17,17,17,$opacity);
|
||||
display: block;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select; // IE10+
|
||||
user-select: $select;
|
||||
}
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
|
||||
@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 transform-scale($value){
|
||||
-webkit-transform: scale($value);
|
||||
-moz-transform: scale($value);
|
||||
-o-transform: scale($value);
|
||||
-ms-transform: scale($value);
|
||||
transform: scale($value);
|
||||
}
|
||||
|
||||
@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-origin($coordinates){
|
||||
-webkit-transform-origin: $coordinates;
|
||||
-moz-transform-origin: $coordinates;
|
||||
-o-transform-origin: $coordinates;
|
||||
-ms-transform-origin: $coordinates;
|
||||
transform-origin: $coordinates;
|
||||
}
|
||||
|
||||
@mixin icon-gradient ($top-color, $bottom-color){
|
||||
background: $top-color;
|
||||
background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color));
|
||||
background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%);
|
||||
background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%);
|
||||
background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%);
|
||||
background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%);
|
||||
background-size: 150% 150%;
|
||||
}
|
||||
|
||||
@mixin radial-gradient($extern-color, $center-color){
|
||||
background: $extern-color;
|
||||
background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
|
||||
background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
|
||||
background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
|
||||
background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
|
||||
background-size: 550% 450%;
|
||||
}
|
||||
|
||||
@mixin vertical-align {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin rotate-180(){
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@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);}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user