From 43618c2f9dd3cf295456969f85241feaf0323d3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isabella=20Sko=C5=99epov=C3=A1?= <isabella@skorepova.info>
Date: Fri, 31 Jan 2020 23:29:53 +0100
Subject: [PATCH] Format css
---
theme-source/sass/components/_global.scss | 253 ++++++++++++----------
1 file changed, 133 insertions(+), 120 deletions(-)
diff --git a/theme-source/sass/components/_global.scss b/theme-source/sass/components/_global.scss
index f1c2a4be..05e9c5e3 100644
--- a/theme-source/sass/components/_global.scss
+++ b/theme-source/sass/components/_global.scss
@@ -1,10 +1,12 @@
//Default styles
html {
- box-sizing: border-box;
+ box-sizing: border-box;
}
-*, *:before, *:after {
- box-sizing: inherit;
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
}
body {
@@ -18,18 +20,17 @@ main {
}
ul {
- list-style-type: none;
+ list-style-type: none;
}
a {
- color: $link-color;
- text-decoration: none;
+ color: $link-color;
+ text-decoration: none;
// Gets rid of tap active state
-webkit-tap-highlight-color: transparent;
}
-
// Positioning
.valign-wrapper {
display: flex;
@@ -40,7 +41,6 @@ a {
}
}
-
ul {
padding: 0;
li {
@@ -53,37 +53,39 @@ ul {
clear: both;
}
-
// Z-levels
.z-depth-0 {
box-shadow: none !important;
}
-.z-depth-1{
+.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
-.z-depth-1-half{
+.z-depth-1-half {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
-.z-depth-2{
+.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
-.z-depth-3{
- box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+.z-depth-3 {
+ box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
+ 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
-.z-depth-4{
- box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+.z-depth-4 {
+ box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22),
+ 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
-.z-depth-5{
- box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
+.z-depth-5 {
+ box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2),
+ 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
.hoverable {
- transition: box-shadow .25s;
+ transition: box-shadow 0.25s;
box-shadow: 0;
}
.hoverable:hover {
- transition: box-shadow .25s;
+ transition: box-shadow 0.25s;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@@ -92,10 +94,9 @@ ul {
.divider {
height: 1px;
overflow: hidden;
- background-color: color("grey", "lighten-2");
+ background-color: color('grey', 'lighten-2');
}
-
// Blockquote
blockquote {
@@ -138,11 +139,9 @@ video.responsive-video {
height: auto;
}
-
// Pagination
.pagination {
-
li {
display: inline-block;
font-size: 1.2rem;
@@ -151,11 +150,17 @@ video.responsive-video {
border-radius: 2px;
text-align: center;
- a { color: #444; }
+ a {
+ color: #444;
+ }
- &.active a { color: #fff; }
+ &.active a {
+ color: #fff;
+ }
- &.active { background-color: $primary-color; }
+ &.active {
+ background-color: $primary-color;
+ }
&.disabled a {
cursor: default;
@@ -168,7 +173,6 @@ video.responsive-video {
}
}
-
li.pages ul li {
display: inline-block;
float: none;
@@ -194,10 +198,11 @@ video.responsive-video {
// Breadcrumbs
.breadcrumb {
font-size: 18px;
- color: rgba(255,255,255, .7);
+ color: rgba(255, 255, 255, 0.7);
i,
- [class^="mdi-"], [class*="mdi-"],
+ [class^='mdi-'],
+ [class*='mdi-'],
i.material-icons {
display: inline-block;
float: left;
@@ -206,7 +211,7 @@ video.responsive-video {
&:before {
content: '\E5CC';
- color: rgba(255,255,255, .7);
+ color: rgba(255, 255, 255, 0.7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
@@ -226,7 +231,6 @@ video.responsive-video {
}
}
-
// Parallax
.parallax-container {
position: relative;
@@ -249,14 +253,15 @@ video.responsive-video {
bottom: 0;
min-width: 100%;
min-height: 100%;
- -webkit-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
transform: translateX(-50%);
}
}
// Pushpin
-.pin-top, .pin-bottom {
+.pin-top,
+.pin-bottom {
position: relative;
}
.pinned {
@@ -276,7 +281,6 @@ ul.staggered-list li {
transform-origin: 0 50%;
}
-
/*********************
Media Query Classes
**********************/
@@ -326,7 +330,6 @@ ul.staggered-list li {
}
}
-
// Center text on mobile
.center-on-small-only {
@media #{$small-and-down} {
@@ -344,19 +347,21 @@ footer.page-footer {
overflow: hidden;
height: 50px;
line-height: 50px;
- color: rgba(255,255,255,.8);
- background-color: rgba(51,51,51,.08);
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(51, 51, 51, 0.08);
@extend .light;
}
}
// Tables
-table, th, td {
- border: none;
+table,
+th,
+td {
+ border: none;
}
table {
- width:100%;
+ width: 100%;
display: table;
&.bordered > thead > tr,
@@ -375,26 +380,26 @@ table {
}
&.highlight > tbody > tr {
- transition: background-color .25s ease;
+ transition: background-color 0.25s ease;
&:hover {
background-color: $table-striped-color;
}
}
&.centered {
- thead tr th, tbody tr td {
+ thead tr th,
+ tbody tr td {
text-align: center;
-
}
}
-
}
thead {
border-bottom: 1px solid $table-border-color;
}
-td, th{
+td,
+th {
padding: 15px 5px;
display: table-cell;
text-align: left;
@@ -404,7 +409,6 @@ td, th{
// Responsive Table
@media #{$medium-and-down} {
-
table.responsive-table {
width: 100%;
border-collapse: collapse;
@@ -418,7 +422,9 @@ td, th{
vertical-align: top;
}
- th { text-align: left; }
+ th {
+ text-align: left;
+ }
thead {
display: block;
float: left;
@@ -428,7 +434,7 @@ td, th{
padding: 0 10px 0 0;
th::before {
- content: "\00a0";
+ content: '\00a0';
}
}
}
@@ -453,7 +459,9 @@ td, th{
min-height: 1.25em;
text-align: left;
}
- tr { padding: 0 10px; }
+ tr {
+ padding: 0 10px;
+ }
/* sort out borders */
thead {
@@ -462,17 +470,25 @@ td, th{
}
&.bordered {
- th { border-bottom: 0; border-left: 0; }
- td { border-left: 0; border-right: 0; border-bottom: 0; }
- tr { border: 0; }
- tbody tr { border-right: 1px solid $table-border-color; }
+ th {
+ border-bottom: 0;
+ border-left: 0;
+ }
+ td {
+ border-left: 0;
+ border-right: 0;
+ border-bottom: 0;
+ }
+ tr {
+ border: 0;
+ }
+ tbody tr {
+ border-right: 1px solid $table-border-color;
+ }
}
-
}
-
}
-
// Collections
.collection {
margin: $element-top-margin 0 $element-bottom-margin 0;
@@ -511,7 +527,6 @@ td, th{
text-align: center;
}
-
.title {
font-size: 16px;
}
@@ -525,10 +540,8 @@ td, th{
top: 16px;
right: 16px;
}
-
}
-
&:last-child {
border-bottom: none;
}
@@ -542,9 +555,9 @@ td, th{
}
}
}
- a.collection-item{
+ a.collection-item {
display: block;
- transition: .25s;
+ transition: 0.25s;
color: $collection-link-color;
&:not(.active) {
&:hover {
@@ -566,7 +579,6 @@ td, th{
padding-left: 72px;
}
}
-
}
// Made less specific to allow easier overriding
.secondary-content {
@@ -578,8 +590,6 @@ td, th{
border: none;
}
-
-
// Badges
span.badge {
min-width: 3rem;
@@ -600,7 +610,7 @@ span.badge {
border-radius: 2px;
}
&.new:after {
- content: " new";
+ content: ' new';
}
}
nav ul a span.badge {
@@ -611,30 +621,32 @@ nav ul a span.badge {
// Responsive Videos
.video-container {
- // position: relative;
- // padding-bottom: 56.25%;
- // height: 0;
- // overflow: hidden;
-
- iframe, object, embed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
+ // position: relative;
+ // padding-bottom: 56.25%;
+ // height: 0;
+ // overflow: hidden;
+
+ iframe,
+ object,
+ embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
}
// Progress Bar
.progress {
- position: relative;
- height: 4px;
- display: block;
- width: 100%;
- background-color: lighten($progress-bar-color, 40%);
- border-radius: 2px;
- margin: $element-top-margin 0 $element-bottom-margin 0;
- overflow: hidden;
+ position: relative;
+ height: 4px;
+ display: block;
+ width: 100%;
+ background-color: lighten($progress-bar-color, 40%);
+ border-radius: 2px;
+ margin: $element-top-margin 0 $element-bottom-margin 0;
+ overflow: hidden;
.determinate {
position: absolute;
background-color: inherit;
@@ -642,7 +654,7 @@ nav ul a span.badge {
left: 0;
bottom: 0;
background-color: $progress-bar-color;
- transition: width .3s linear;
+ transition: width 0.3s linear;
}
.indeterminate {
background-color: $progress-bar-color;
@@ -651,58 +663,58 @@ nav ul a span.badge {
position: absolute;
background-color: inherit;
top: 0;
- left:0;
+ left: 0;
bottom: 0;
will-change: left, right;
// Custom bezier
- animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
-
+ animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+ infinite;
}
&:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
- left:0;
+ left: 0;
bottom: 0;
will-change: left, right;
// Custom bezier
- animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
+ animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+ infinite;
animation-delay: 1.15s;
}
}
}
@keyframes indeterminate {
- 0% {
- left: -35%;
- right:100%;
- }
- 60% {
- left: 100%;
- right: -90%;
- }
- 100% {
- left: 100%;
- right: -90%;
- }
+ 0% {
+ left: -35%;
+ right: 100%;
+ }
+ 60% {
+ left: 100%;
+ right: -90%;
+ }
+ 100% {
+ left: 100%;
+ right: -90%;
+ }
}
@keyframes indeterminate-short {
- 0% {
- left: -200%;
- right: 100%;
- }
- 60% {
- left: 107%;
- right: -8%;
- }
- 100% {
- left: 107%;
- right: -8%;
- }
+ 0% {
+ left: -200%;
+ right: 100%;
+ }
+ 60% {
+ left: 107%;
+ right: -8%;
+ }
+ 100% {
+ left: 107%;
+ right: -8%;
+ }
}
-
/*******************
Utility Classes
*******************/
@@ -716,9 +728,10 @@ nav ul a span.badge {
text-align: left;
}
.right-align {
- text-align: right
+ text-align: right;
}
-.center, .center-align {
+.center,
+.center-align {
text-align: center;
}
--
GitLab