peterkrzyzek
/
ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Refactor base styles

This commit is contained in:
John O'Nolan 2019-11-05 15:31:56 +07:00
parent 4a6047adbb
commit 0aa3d40604
9 changed files with 158 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

47
assets/css/components/buttons.css
View File

@ -1,10 +1,6 @@
/* Buttons
/* ---------------------------------------------------------- */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
display: inline-block;
height: var(--height);
@ -23,18 +19,10 @@ button,
transition: 0.4s ease;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
height: calc(var(--height) * 0.9);
line-height: calc(var(--height) * 0.9);
@ -42,10 +30,6 @@ button.small,
font-size: 1.2rem;
}
input[type="submit"].large,
input[type="reset"].large,
input[type="button"].large,
button.large,
.button.large {
height: calc(var(--height) * 1.14);
line-height: calc(var(--height) * 1.14);
@ -53,37 +37,18 @@ button.large,
font-size: 1.6rem;
}
input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
pointer-events: none;
opacity: 0.4;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
color: var(--color-primary) !important;
background-color: transparent;
box-shadow: inset 0 0 0 2px var(--color-primary);
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
text-decoration: none;
color: color(var(--color-primary) l(-15%)) !important;
@ -91,20 +56,12 @@ button:hover,
transition: 0.2s ease;
}
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
color: #fff !important;
background-color: var(--color-primary);
box-shadow: none;
}
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
background-color: color(var(--color-primary) l(-10%));
}
background-color: color(var(--color-primary) l(-10%));
}

143
assets/css/components/ghost.css → assets/css/components/content.css
View File

@ -1,4 +1,58 @@
/* Styling for Ghost-specific elements
/* Tables
/* ---------------------------------------------------------- */
table {
border-collapse: separate;
margin: 0 0 var(--margin) 0;
width: 100%;
font-size: 0.8em;
}
th {
color: var(--color-base);
font-size: 0.9em;
font-weight: var(--font-bold);
padding: 0 0.7em 0.4em 0.7em;
text-align: left;
}
td {
padding: 0.4em 0.7em;
border-left-width: 0;
border-top-width: 0;
}
td:first-child {
border-left-width: 1px;
}
tbody tr {
border: solid 1px var(--color-border);
border-left: 0;
border-right: 0;
}
tbody tr:first-child td {
border-top-width: 1px;
}
tbody tr:nth-child(2n + 1) {
background-color: var(--color-bg);
}
tbody td {
border: solid 1px var(--color-border);
border-left-width: 0;
border-top-width: 0;
}
tfoot {
border-width: 0;
}
/* Cards
/* ---------------------------------------------------------- */
.kg-card {
@ -220,90 +274,3 @@
white-space: nowrap;
overflow: hidden;
}
/* Members Forms
/* ---------------------------------------------------------- */
form[data-members-form] .button-loader,
form[data-members-form] .message-success,
form[data-members-form] .message-error {
display: none;
}
.message-success svg,
.message-error svg {
position: relative;
top: -1px;
margin-right: 5px;
height: 15px;
width: 15px;
}
.message-success svg {
fill: #fff;
}
.message-error svg {
fill: var(--color-primary);
}
form[data-members-form].success .message-success,
form[data-members-form].error .message-error {
position: fixed;
top: 20px;
left: 6vw;
right: 6vw;
z-index: 9999;
max-width: calc(1400px - 12vw);
margin: 0 auto;
padding: 10px 0;
color: #fff;
font-size: 1.4rem;
line-height: 1.5em;
font-weight: 500;
text-align: center;
background: var(--color-base);
border-radius: var(--radius);
}
form[data-members-form].success .message-success {
background: var(--color-success);
}
form[data-members-form].error .message-error {
color: var(--color-primary);
background: #fff;
box-shadow: var(--color-primary) 0 0 0 1px;
}
form[data-members-form] .button {
position: relative;
}
/*-- Loading --*/
/* Hide button text */
form[data-members-form].loading .button-content {
visibility: hidden;
}
/* Show loading spinner */
form[data-members-form].loading .button-loader {
display: inline-block;
position: absolute;
left: 50%;
margin-left: -19px;
transform: scale(0.7);
}
.button-loader svg path,
.button-loader svg rect{
fill: #fff;
}
/*-- Show success message on success --*/
form[data-members-form].success .message-success {
display: block;
}
/*-- Show error message on error --*/
form[data-members-form].error .message-error {
display: block;
}

12
assets/css/components/global.css
View File

@ -174,10 +174,10 @@ h6 {
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

51
assets/css/components/lists.css
View File

@ -1,51 +0,0 @@
/* Lists
/* ---------------------------------------------------------- */
ul,
ol,
dl {
margin: 0 0 var(--margin) 0;
}
ol,
ul {
padding-left: 1.3em;
padding-right: 1.5em;
}
ol ol,
ul ul,
ul ol,
ol ul {
margin: 0.5em 0 1em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
ul,
ol {
max-width: 100%;
}
li {
margin: 0.5em 0;
padding-left: 0.3em;
line-height: 1.6em;
}
dt {
display: block;
font-weight: var(--font-bold);
margin: 0 0 calc(var(--margin) * 0.5) 0;
}
dd {
margin-left: var(--margin);
}

85
assets/css/components/members.css Normal file
View File

@ -0,0 +1,85 @@
/* Members Forms
/* ---------------------------------------------------------- */
form[data-members-form] .button-loader,
form[data-members-form] .message-success,
form[data-members-form] .message-error {
display: none;
}
.message-success svg,
.message-error svg {
position: relative;
top: -1px;
margin-right: 5px;
height: 15px;
width: 15px;
}
.message-success svg {
fill: #fff;
}
.message-error svg {
fill: var(--color-primary);
}
form[data-members-form].success .message-success,
form[data-members-form].error .message-error {
position: fixed;
top: 20px;
left: 6vw;
right: 6vw;
z-index: 9999;
max-width: calc(1400px - 12vw);
margin: 0 auto;
padding: 10px 0;
color: #fff;
font-size: 1.4rem;
line-height: 1.5em;
font-weight: 500;
text-align: center;
background: var(--color-base);
border-radius: var(--radius);
}
form[data-members-form].success .message-success {
background: var(--color-success);
}
form[data-members-form].error .message-error {
color: var(--color-primary);
background: #fff;
box-shadow: var(--color-primary) 0 0 0 1px;
}
form[data-members-form] .button {
position: relative;
}
/*-- Loading --*/
/* Hide button text */
form[data-members-form].loading .button-content {
visibility: hidden;
}
/* Show loading spinner */
form[data-members-form].loading .button-loader {
display: inline-block;
position: absolute;
left: 50%;
margin-left: -19px;
transform: scale(0.7);
}
.button-loader svg path,
.button-loader svg rect{
fill: #fff;
}
/*-- Show success message on success --*/
form[data-members-form].success .message-success {
display: block;
}
/*-- Show error message on error --*/
form[data-members-form].error .message-error {
display: block;
}

51
assets/css/components/tables.css
View File

@ -1,51 +0,0 @@
/* Tables
/* ---------------------------------------------------------- */
table {
border-collapse: separate;
margin: 0 0 var(--margin) 0;
width: 100%;
font-size: 0.8em;
}
th {
color: var(--color-base);
font-size: 0.9em;
font-weight: var(--font-bold);
padding: 0 0.7em 0.4em 0.7em;
text-align: left;
}
td {
padding: 0.4em 0.7em;
border-left-width: 0;
border-top-width: 0;
}
td:first-child {
border-left-width: 1px;
}
tbody tr {
border: solid 1px var(--color-border);
border-left: 0;
border-right: 0;
}
tbody tr:first-child td {
border-top-width: 1px;
}
tbody tr:nth-child(2n + 1) {
background-color: var(--color-bg);
}
tbody td {
border: solid 1px var(--color-border);
border-left-width: 0;
border-top-width: 0;
}
tfoot {
border-width: 0;
}

12
assets/css/screen.css
View File

@ -8,12 +8,16 @@ production stylesheet in assets/built/screen.css using: gulp dev
/* Lib - Local component imports
/* ---------------------------------------------------------- */
/* Base */
@import "vars.css";
@import "components/global.css";
@import "components/ghost.css";
@import "components/lists.css";
@import "components/grid.css";
@import "components/tables.css";
/* Ghost components */
@import "components/content.css";
@import "components/members.css";
/* Global components */
@import "components/forms.css";
@import "components/buttons.css";