kicap/barcode_barang_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project done before

Browse Source
This commit is contained in:
kicap1992
2021-06-23 17:54:22 +08:00
commit ad3474d27d
509 changed files with 252588 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
assets/scss/paper-dashboard/mixins/_buttons.scss Normal file
View File

@ -0,0 +1,212 @@
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
background-color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $btn-states-color !important;
color: $white-color !important;
box-shadow: none !important;
}
&:not([data-action]):hover{
box-shadow: none;
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $btn-color;
border-color: $btn-color;
}
}
// btn-neutral style
@if $btn-color == $white-color{
color: $primary-color;
&.btn-danger{
color: $danger-color;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $danger-states-color !important;
}
}
&.btn-info{
color: $info-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $info-states-color !important;
}
}
&.btn-warning{
color: $warning-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $warning-states-color !important;
}
}
&.btn-success{
color: $success-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $success-states-color !important;
}
}
&.btn-default{
color: $default-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $default-states-color !important;
}
}
&.active,
&:active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $white-color !important;
color: $primary-states-color !important;
box-shadow: none !important;
}
&:hover,
&:focus{
color: $primary-states-color !important;
&:not(.nav-link){
box-shadow: none;
}
}
} @else {
color: $white-color;
}
&.btn-simple{
color: $btn-color;
border-color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
border-color: $btn-states-color;
box-shadow: none;
}
}
&.btn-link{
color: $btn-color;
&:hover,
&:focus,
&:active,
&:active:focus {
background-color: $transparent-bg;
color: $btn-states-color;
text-decoration: none;
box-shadow: none;
}
}
}
@mixin btn-outline-styles($btn-color, $btn-states-color){
background: $transparent-bg;
border: 2px solid $btn-color !important;
color: $btn-color;
@include opacity(1);
&:hover,
&:focus,
&:active,
&:focus:active,
&.active,
.open > &.dropdown-toggle {
background-color: $btn-color !important;
color: $fill-font-color !important;
border-color: $btn-color !important;
.caret{
border-top-color: $fill-font-color !important;
}
}
.caret{
border-top-color: $white-color !important;
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $transparent-bg !important;
border-color: $btn-color !important;
}
}
}
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
font-size: $font-size;
border-radius: $border;
padding: $padding-vertical $padding-horizontal;
&.btn-simple{
padding: $padding-vertical - 1 $padding-horizontal - 1;
}
}
@mixin rotate-180(){
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

4
assets/scss/paper-dashboard/mixins/_cards.scss Normal file
View File

@ -0,0 +1,4 @@
@mixin icon-color($color) {
box-shadow: 0px 9px 30px -6px $color;
color: $color;
}

24
assets/scss/paper-dashboard/mixins/_dropdown.scss Normal file
View File

@ -0,0 +1,24 @@
@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
background-color: $brand-color;
&:before{
color: $brand-color;
}
.dropdown-header:not([href]):not([tabindex]){
color: $dropdown-header-color;
}
.dropdown-item{
color: $dropdown-color;
&:hover,
&:focus{
background-color: $background-color;
}
}
.dropdown-divider{
background-color: $background-color;
}
}

232
assets/scss/paper-dashboard/mixins/_inputs.scss Normal file
View File

@ -0,0 +1,232 @@
@mixin input-size($padding-vertical, $padding-horizontal){
padding: $padding-vertical $padding-horizontal;
}
@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 placeholder() {
&::-moz-placeholder {@content; } // Firefox
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
&::-webkit-input-placeholder {@content; } // Safari and Chrome
}
@mixin light-form(){
border-radius: 0;
border:0;
padding: 0;
background-color: transparent;
}
@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {
.form-group.no-border.form-control-lg,
.input-group.no-border.form-control-lg{
.input-group-append .input-group-text{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-prepend .input-group-text,
& + .input-group-append .input-group-text{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
}
.form-group.form-control-lg,
.input-group.form-control-lg{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-prepend .input-group-text,
& + .input-group-append .input-group-text{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
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.no-border,
.input-group.no-border{
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-prepend .input-group-text,
& + .input-group-append .input-group-text{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
}
.form-group,
.input-group{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-prepend .input-group-text,
& + .input-group-append .input-group-text{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
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-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $color4;
border-color: $color1;
color: $color2;
}
.input-group-focus{
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $color4;
border-color: $color3;
color: $color3;
}
}
.form-group.no-border,
.input-group.no-border{
.form-control{
background-color: $color5;
color: $color2;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control + .input-group-prepend .input-group-text,
.form-control + .input-group-append .input-group-text{
background-color: $color5;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control{
&:focus{
& + .input-group-prepend .input-group-text,
& + .input-group-append .input-group-text{
background-color: $color6;
color: $color3;
}
}
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $color5;
border: none;
color: $color2;
}
&.input-group-focus{
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $color6;
color: $color3;
}
}
}
}
@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;
}

7
assets/scss/paper-dashboard/mixins/_page-header.scss Normal file
View File

@ -0,0 +1,7 @@
@mixin linear-gradient($color1, $color2){
background: $color1; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
}

8
assets/scss/paper-dashboard/mixins/_transparency.scss Normal file
View File

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

228
assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss Normal file
View File

@ -0,0 +1,228 @@
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
@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 sidebar-color($color){
&:after{
background: $color;
}
}
@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 sidebar-active-color($font-color){
.nav {
li {
&.active > a,
&.active > a i,
&.active > a[data-toggle="collapse"],
&.active > a[data-toggle="collapse"] i,
&.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon,
&.active > a[data-toggle="collapse"] ~ div > ul > li.active > a {
color: $font-color;
opacity: 1;
}
}
}
}
@mixin transition-opacity($time, $type){
-webkit-transition: opacity $time $type;
-moz-transition: opacity $time $type;
-o-transition: opacity $time $type;
-ms-transition: opacity $time $type;
transition: opacity $time $type;
}
@mixin transform-translate-y-dropdown($value) {
-webkit-transform: translate3d(-20px,$value,0) !important;
-moz-transform: translate3d(-20px,$value,0) !important;
-o-transform: translate3d(-20px,$value,0) !important;
-ms-transform: translate3d(-20px,$value,0) !important;
transform: translate3d(-20px,$value,0) !important;
}
@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) !important;
-moz-transform: translate3d(0,$value,0) !important;
-o-transform: translate3d(0,$value,0) !important;
-ms-transform: translate3d(0,$value,0) !important;
transform: translate3d(0,$value,0) !important;
}
@mixin transform-translate-y-fixed-plugin($value){
-webkit-transform: translate3d(0,$value,0) !important;
-moz-transform: translate3d(0,$value,0) !important;
-o-transform: translate3d(0,$value,0) !important;
-ms-transform: translate3d(0,$value,0) !important;
transform: translate3d(0,$value,0) !important;
}
@mixin icon-gradient($color, $bottomColor: #000){
background: $color;
background: -webkit-linear-gradient($color 0%, $bottomColor 80%);
background: -o-linear-gradient($color 0%, $bottomColor 80%);
background: -moz-linear-gradient($color 0%, $bottomColor 80%);
background: linear-gradient($color 0%, $bottomColor 80%);
}
@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 sidebar-text-color($text-color){
.nav {
li {
a,
a i,
a[data-toggle="collapse"],
a[data-toggle="collapse"] i,
a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon,
a[data-toggle="collapse"] ~ div > ul > li > a {
color: $text-color;
opacity: .7;
}
&:hover:not(.active) > a,
&:focus:not(.active) > a {
opacity: 1;
}
}
}
.logo {
.simple-text {
color: $text-color;
}
&:after {
background-color: $text-color;
opacity: .4;
}
}
.user {
.info a span,
.nav .sidebar-mini-icon,
.nav .sidebar-normal {
color: $text-color !important;
}
&:after {
background-color: $text-color;
opacity: .4;
}
}
}
@mixin badge-color($color) {
border-color: $color;
background-color: $color;
}