Lewis/Personal_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Changing UX for simpler design

Browse Source
This commit is contained in:
Lewis
2025-04-05 16:37:53 +01:00
parent 5b9119a528
commit be5c9dc3be
358 changed files with 30915 additions and 88568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
assets/sass/paper-kit/mixins/_buttons.scss Normal file
View File

@@ -0,0 +1,90 @@
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
background-color: $btn-color;
border-color: $btn-color;
color: $white-color;
@include opacity(1);
&:hover,
&:focus,
&:active,
&.active,
.show > &.dropdown-toggle{
background-color: $btn-states-color;
color: $white-color;
border-color: $btn-states-color;
}
.caret{
border-top-color: $white-color;
}
&.btn-link {
color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
.open > &.dropdown-toggle{
background-color: $transparent-bg;
color: $btn-states-color;
}
.caret{
border-top-color: $btn-color;
}
}
.caret{
border-top-color: $white-color;
}
}
@mixin btn-outline-styles($btn-color, $btn-states-color){
border-color: $btn-color;
color: $btn-color;
@include opacity(1);
&:hover,
&:focus,
&:active,
&.active,
.open > &.dropdown-toggle {
background-color: $btn-color;
color: $fill-font-color;
border-color: $btn-color;
.caret{
border-top-color: $fill-font-color;
}
}
.caret{
border-top-color: $white-color;
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $transparent-bg;
border-color: $btn-color;
}
}
}
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $line-height){
font-size: $font-size;
padding: $padding-vertical $padding-horizontal;
&.btn-simple{
padding: $padding-vertical + 2 $padding-horizontal;
}
}

17
assets/sass/paper-kit/mixins/_inputs.scss Normal file
View File

@@ -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;
}

21
assets/sass/paper-kit/mixins/_labels.scss Normal file
View File

@@ -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;
}

11
assets/sass/paper-kit/mixins/_navbars.scss Normal file
View File

@@ -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;
}

21
assets/sass/paper-kit/mixins/_popovers.scss Normal file
View File

@@ -0,0 +1,21 @@
@mixin popover-style($background-color){
background-color: $background-color;
color: $white-color;
.popover-title{
background-color: $background-color;
color: rgba(0, 0, 0, 0.56);
}
&.bottom .arrow:after{
border-bottom-color: $background-color;
}
&.left > .arrow::after{
border-left-color: $background-color;
}
&.top > .arrow::after{
border-top-color: $background-color;
}
&.right > .arrow::after{
border-right-color: $background-color;
}
}

4
assets/sass/paper-kit/mixins/_tabs.scss Normal file
View File

@@ -0,0 +1,4 @@
@mixin pill-style($color){
border: 1px solid $color;
color: $color;
}

20
assets/sass/paper-kit/mixins/_transparency.scss Normal file
View File

@@ -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;
}

185
assets/sass/paper-kit/mixins/_vendor-prefixes.scss Normal file
View File

@@ -0,0 +1,185 @@
// 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 transition-none(){
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
@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%);
}
@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);}
}
}