deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-28 03:22:47 +02:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into add-css-override

Browse source
This commit is contained in:
s-a-tanjim 2023-05-26 10:52:16 +06:00
parent 100420c06d 6a682d685e
commit 8426ecebf8
No known key found for this signature in database
GPG key ID: C1D8D1BDB922E639
12 changed files with 180 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

217
dist/paper.css vendored
View file

@ -6,14 +6,14 @@
@import url("https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC&display=swap");
html {
--primary: #41403e;
--secondary: #0071de;
--secondary: #0b74d5;
--success: #86a361;
--warning: #ddcd45;
--danger: #a7342d;
--muted: #868e96;
--primary-light: #c1c0bd;
--secondary-light: #deefff;
--success-light: #d0dbc2;
--primary-light: #cdcccb;
--secondary-light: #d8ebfd;
--success-light: #d5dfc8;
--warning-light: #f5f0c6;
--danger-light: #f0cbc9;
--muted-light: #e6e7e9;
@ -24,15 +24,15 @@ html {
--danger-dark: black;
--muted-dark: #313538;
--primary-light-10: #5b5a57;
--secondary-light-10: #128bff;
--secondary-light-10: #208ef3;
--success-light-10: #9fb681;
--warning-light-10: #e5d970;
--danger-light-10: #cb453c;
--muted-light-10: #a1a8ae;
--primary-dark-10: #272625;
--secondary-dark-10: #0057ab;
--success-dark-10: #6c844d;
--warning-dark-10: #cab925;
--secondary-dark-10: #085aa5;
--success-dark-10: #4a5a35;
--warning-dark-10: #746a15;
--danger-dark-10: #7f2722;
--muted-dark-10: #6c757d;
--primary-shaded-50: #c1c0bd;
@ -45,9 +45,9 @@ html {
--main-background-light: white;
--black: black;
--primary-text: #272625;
--secondary-text: #0057ab;
--success-text: #6c844d;
--warning-text: #cab925;
--secondary-text: #085aa5;
--success-text: #4a5a35;
--warning-text: #746a15;
--danger-text: #7f2722;
--muted-text: #6c757d;
--shadow-color-regular: rgba(0, 0, 0, 0.2);
@ -57,34 +57,34 @@ html {
html.dark {
--primary: #fff;
--secondary: #0071de;
--success: #189418;
--warning: #ddcd45;
--danger: #ff8c86;
--secondary: #5595ce;
--success: #70c272;
--warning: #d4c252;
--danger: #df4c57;
--muted: #868e96;
--primary-light: white;
--secondary-light: #007ef8;
--success-light: #1caa1c;
--warning-light: #e1d35b;
--danger-light: #ffa4a0;
--secondary-light: #69a1d4;
--success-light: #82ca84;
--warning-light: #d9c966;
--danger-light: #e3626b;
--muted-light: #949ba2;
--primary-dark: gray;
--secondary-dark: black;
--success-dark: #031003;
--warning-dark: #746a15;
--danger-dark: #a00800;
--secondary-dark: #1f476b;
--success-dark: #265927;
--warning-dark: #71651c;
--danger-dark: #7c161e;
--muted-dark: #313538;
--primary-light-10: white;
--secondary-light-10: #128bff;
--success-light-10: #1fc01f;
--warning-light-10: #e5d970;
--danger-light-10: #ffbcb9;
--secondary-light-10: #7daed9;
--success-light-10: #94d195;
--warning-light-10: #ded07b;
--danger-light-10: #e77780;
--muted-light-10: #a1a8ae;
--primary-dark-10: #e6e6e6;
--secondary-dark-10: #0057ab;
--success-dark-10: #116811;
--warning-dark-10: #cab925;
--danger-dark-10: #ff5c53;
--secondary-dark-10: #367cba;
--success-dark-10: #4cb34f;
--warning-dark-10: #c3ae30;
--danger-dark-10: #d22633;
--muted-dark-10: #6c757d;
--primary-shaded-50: #343332;
--primary-shaded-70: #2f2e2d;
@ -96,11 +96,11 @@ html.dark {
--main-background-light: #c1c0bd;
--black: black;
--primary-text: #41403e;
--secondary-text: #0057ab;
--success-text: #116811;
--warning-text: #cab925;
--danger-text: #ff5c53;
--muted-text: #6c757d;
--secondary-text: #1f476b;
--success-text: #265927;
--warning-text: #71651c;
--danger-text: #7c161e;
--muted-text: #949ba2;
--shadow-color-regular: rgba(0, 0, 0, 0.2);
--shadow-color-hover: rgba(0, 0, 0, 0.3);
--primary-inverse: #41403e;
@ -517,7 +517,7 @@ hr::after {
.paper {
background-color: #41403e;
background-color: var(--main-background);
border: 1px solid #c1c0bd;
border: 1px solid #cdcccb;
box-shadow: -1px 5px 35px -9px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
margin-top: 1rem;
@ -1320,20 +1320,20 @@ table.table-alternating tbody tr:nth-of-type(even) {
overflow: hidden;
padding: 0 0.75rem;
}
.collapsible input {
.collapsible > input {
display: none;
}
.collapsible input:checked + label {
.collapsible > input:checked + label {
color: #41403e;
color: var(--primary);
}
.collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
.collapsible > input[id^=collapsible]:checked ~ div.collapsible-body {
margin: 0;
max-height: 960px;
opacity: 1;
padding: 0.75rem;
}
.collapsible label {
.collapsible > label {
color: #41403e;
color: var(--primary);
border-bottom-color: #41403e;
@ -1346,7 +1346,7 @@ table.table-alternating tbody tr:nth-of-type(even) {
padding: 0.75rem;
text-align: center;
}
.collapsible label:hover {
.collapsible > label:hover {
color: #41403e;
color: var(--muted);
cursor: pointer;
@ -1375,13 +1375,13 @@ table.table-alternating tbody tr:nth-of-type(even) {
.alert .btn-close {
transition: all 235ms ease-in-out 0s;
color: #41403e;
color: var(--primary-light-10);
color: var(--primary-text);
cursor: pointer;
margin-left: 0.75rem;
}
.alert .btn-close:hover, .alert .btn-close:active, .alert .btn-close:focus {
color: #41403e;
color: var(--primary-dark-10);
color: var(--primary-dark);
}
.alert-primary {
@ -1394,11 +1394,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
}
.alert-primary .btn-close {
color: #41403e;
color: var(--primary-light-10);
color: var(--primary-text);
}
.alert-primary .btn-close:hover, .alert-primary .btn-close:active, .alert-primary .btn-close:focus {
color: #41403e;
color: var(--primary-dark-10);
color: var(--primary-dark);
}
.alert-secondary {
@ -1411,11 +1411,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
}
.alert-secondary .btn-close {
color: #41403e;
color: var(--secondary-light-10);
color: var(--secondary-text);
}
.alert-secondary .btn-close:hover, .alert-secondary .btn-close:active, .alert-secondary .btn-close:focus {
color: #41403e;
color: var(--secondary-dark-10);
color: var(--secondary-dark);
}
.alert-success {
@ -1428,11 +1428,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
}
.alert-success .btn-close {
color: #41403e;
color: var(--success-light-10);
color: var(--success-text);
}
.alert-success .btn-close:hover, .alert-success .btn-close:active, .alert-success .btn-close:focus {
color: #41403e;
color: var(--success-dark-10);
color: var(--success-dark);
}
.alert-warning {
@ -1445,11 +1445,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
}
.alert-warning .btn-close {
color: #41403e;
color: var(--warning-light-10);
color: var(--warning-text);
}
.alert-warning .btn-close:hover, .alert-warning .btn-close:active, .alert-warning .btn-close:focus {
color: #41403e;
color: var(--warning-dark-10);
color: var(--warning-dark);
}
.alert-danger {
@ -1462,11 +1462,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
}
.alert-danger .btn-close {
color: #41403e;
color: var(--danger-light-10);
color: var(--danger-text);
}
.alert-danger .btn-close:hover, .alert-danger .btn-close:active, .alert-danger .btn-close:focus {
color: #41403e;
color: var(--danger-dark-10);
color: var(--danger-dark);
}
.alert-muted {
@ -1479,11 +1479,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
}
.alert-muted .btn-close {
color: #41403e;
color: var(--muted-light-10);
color: var(--muted-text);
}
.alert-muted .btn-close:hover, .alert-muted .btn-close:active, .alert-muted .btn-close:focus {
color: #41403e;
color: var(--muted-dark-10);
color: var(--muted-dark);
}
.alert-state {
@ -1701,7 +1701,7 @@ button.disabled, button[disabled],
a {
color: #41403e;
color: var(--secondary);
background-image: linear-gradient(5deg, transparent 65%, #0071de 80%, transparent 90%), linear-gradient(165deg, transparent 5%, #0071de 15%, transparent 25%), linear-gradient(165deg, transparent 45%, #0071de 55%, transparent 65%), linear-gradient(15deg, transparent 25%, #0071de 35%, transparent 50%);
background-image: linear-gradient(5deg, transparent 65%, #0b74d5 80%, transparent 90%), linear-gradient(165deg, transparent 5%, #0b74d5 15%, transparent 25%), linear-gradient(165deg, transparent 45%, #0b74d5 55%, transparent 65%), linear-gradient(15deg, transparent 25%, #0b74d5 35%, transparent 50%);
background-position: 0 90%;
background-repeat: repeat-x;
background-size: 4px 3px;
@ -1726,7 +1726,7 @@ button.btn-primary,
button.btn-primary:hover:active,
.paper-btn.btn-primary:hover:active,
[type=button].btn-primary:hover:active {
background-color: #a8a6a3;
background-color: #b4b3b0;
}
button.btn-secondary,
@ -1742,7 +1742,7 @@ button.btn-secondary,
button.btn-secondary:hover:active,
.paper-btn.btn-secondary:hover:active,
[type=button].btn-secondary:hover:active {
background-color: #abd6ff;
background-color: #a7d3fa;
}
button.btn-success,
@ -1758,7 +1758,7 @@ button.btn-success,
button.btn-success:hover:active,
.paper-btn.btn-success:hover:active,
[type=button].btn-success:hover:active {
background-color: #b7c9a1;
background-color: #bccca8;
}
button.btn-warning,
@ -1812,72 +1812,80 @@ button.btn-muted:hover:active,
button.btn-primary-outline,
.paper-btn.btn-primary-outline,
[type=button].btn-primary-outline {
background-color: white;
border-color: #a8a6a3;
background-color: #41403e;
background-color: var(--main-background);
color: #41403e;
color: var(--primary);
border-color: #41403e;
border-color: var(--primary);
}
button.btn-primary-outline:hover,
.paper-btn.btn-primary-outline:hover,
[type=button].btn-primary-outline:hover {
background-color: #c1c0bd;
border-color: #41403e;
background-color: #cdcccb;
}
button.btn-primary-outline:hover:active,
.paper-btn.btn-primary-outline:hover:active,
[type=button].btn-primary-outline:hover:active {
background-color: #a8a6a3;
background-color: #b4b3b0;
}
button.btn-secondary-outline,
.paper-btn.btn-secondary-outline,
[type=button].btn-secondary-outline {
background-color: white;
border-color: #abd6ff;
color: #0057ab;
background-color: #41403e;
background-color: var(--main-background);
color: #41403e;
color: var(--secondary);
border-color: #41403e;
border-color: var(--secondary);
}
button.btn-secondary-outline:hover,
.paper-btn.btn-secondary-outline:hover,
[type=button].btn-secondary-outline:hover {
background-color: #deefff;
border-color: #0071de;
background-color: #d8ebfd;
}
button.btn-secondary-outline:hover:active,
.paper-btn.btn-secondary-outline:hover:active,
[type=button].btn-secondary-outline:hover:active {
background-color: #abd6ff;
background-color: #a7d3fa;
}
button.btn-success-outline,
.paper-btn.btn-success-outline,
[type=button].btn-success-outline {
background-color: white;
border-color: #b7c9a1;
color: #6c844d;
background-color: #41403e;
background-color: var(--main-background);
color: #41403e;
color: var(--success);
border-color: #41403e;
border-color: var(--success);
}
button.btn-success-outline:hover,
.paper-btn.btn-success-outline:hover,
[type=button].btn-success-outline:hover {
background-color: #d0dbc2;
border-color: #86a361;
background-color: #d5dfc8;
}
button.btn-success-outline:hover:active,
.paper-btn.btn-success-outline:hover:active,
[type=button].btn-success-outline:hover:active {
background-color: #b7c9a1;
background-color: #bccca8;
}
button.btn-warning-outline,
.paper-btn.btn-warning-outline,
[type=button].btn-warning-outline {
background-color: white;
border-color: #ede49b;
color: #cab925;
background-color: #41403e;
background-color: var(--main-background);
color: #41403e;
color: var(--warning);
border-color: #41403e;
border-color: var(--warning);
}
button.btn-warning-outline:hover,
.paper-btn.btn-warning-outline:hover,
[type=button].btn-warning-outline:hover {
background-color: #f5f0c6;
border-color: #ddcd45;
}
button.btn-warning-outline:hover:active,
.paper-btn.btn-warning-outline:hover:active,
@ -1888,15 +1896,17 @@ button.btn-warning-outline:hover:active,
button.btn-danger-outline,
.paper-btn.btn-danger-outline,
[type=button].btn-danger-outline {
background-color: white;
border-color: #e6a5a1;
color: #7f2722;
background-color: #41403e;
background-color: var(--main-background);
color: #41403e;
color: var(--danger);
border-color: #41403e;
border-color: var(--danger);
}
button.btn-danger-outline:hover,
.paper-btn.btn-danger-outline:hover,
[type=button].btn-danger-outline:hover {
background-color: #f0cbc9;
border-color: #a7342d;
}
button.btn-danger-outline:hover:active,
.paper-btn.btn-danger-outline:hover:active,
@ -1907,15 +1917,17 @@ button.btn-danger-outline:hover:active,
button.btn-muted-outline,
.paper-btn.btn-muted-outline,
[type=button].btn-muted-outline {
background-color: white;
border-color: #caced1;
color: #6c757d;
background-color: #41403e;
background-color: var(--main-background);
color: #41403e;
color: var(--muted);
border-color: #41403e;
border-color: var(--muted);
}
button.btn-muted-outline:hover,
.paper-btn.btn-muted-outline:hover,
[type=button].btn-muted-outline:hover {
background-color: #e6e7e9;
border-color: #868e96;
}
button.btn-muted-outline:hover:active,
.paper-btn.btn-muted-outline:hover:active,
@ -1969,7 +1981,7 @@ button.btn-muted-outline:hover:active,
}
.card .card-body .card-subtitle,
.card .card-body h5 {
color: #0071de;
color: #0b74d5;
margin-bottom: 0.5rem;
margin-top: 0;
}
@ -2094,7 +2106,7 @@ textarea[disabled] {
}
.form-group .paper-radio input[type=radio]:checked + span::before,
.form-group .paper-check input[type=radio]:checked + span::before {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230b74d5'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
}
.form-group .paper-radio input[type=checkbox],
.form-group .paper-check input[type=checkbox] {
@ -2109,7 +2121,7 @@ textarea[disabled] {
}
.form-group .paper-radio input[type=checkbox]:checked + span::before,
.form-group .paper-check input[type=checkbox]:checked + span::before {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20stroke%3D'%230071de'%20fill-opacity%3D'0'%20stroke-width%3D'16'%20d%3D'm13,62c0.61067,1.6%201.3045,2.3045%201.75717,2.75716c0.72683,0.72684%201.24283,1.24284%202.07617,2.07617c0.54133,0.54133%201.04116,1.06035%201.82833,1.82383c0.5781,0.5607%201.00502,0.96983%202.02633,1.74417c0.55877,0.42365%201.191,0.84034%201.884,1.284c1.16491,0.74577%201.59777,1.00147%202.5,1.55067c0.4692,0.28561%201.43689,0.86868%201.93067,1.16534c0.99711,0.59904%201.99667,1.19755%202.49283,1.49866c0.98501,0.59779%201.47073,0.89648%201.94733,1.2c1.3971,0.88972%201.83738,1.19736%202.7,1.7955c0.42201,0.29262%201.24022,0.87785%202.05583,1.41917c0.79531,0.52785%201.59376,1.0075%202.38,1.43867c0.74477,0.40842%201.45167,0.75802%202.37817,1.22517c0.76133,0.38387%201.54947,0.82848%202.40717,1.41084c0.7312,0.49647%201.49563,1.08231%202.27884,1.258c0.35564,0.07978%200.14721,-0.95518%200.35733,-1.86867c0.18092,-0.78651%200.98183,-1.2141%200.99983,-2.07867c0.02073,-0.99529%200.07916,-1.79945%200.42533,-2.56133c0.43607,-0.95973%200.53956,-1.66774%200.79617,-2.68183c0.18888,-0.74645%200.39764,-1.31168%200.7785,-2.6235c0.20865,-0.71867%200.41483,-1.48614%200.708,-2.28c0.15452,-0.41843%200.77356,-1.73138%201.348,-2.64133c0.30581,-0.48443%200.65045,-0.97043%201.0065,-1.4745c0.74776,-1.05863%201.1531,-1.60163%201.9375,-2.77084c0.40621,-0.60548%200.80272,-1.23513%201.2045,-1.8765c0.40757,-0.65062%200.81464,-1.31206%201.2315,-1.9755c0.41946,-0.66757%200.83374,-1.34258%201.73067,-2.648c0.44696,-0.65053%200.91436,-1.28356%201.386,-1.9095c0.46972,-0.6234%200.94725,-1.2364%201.422,-1.8465c0.94116,-1.20947%201.86168,-2.40844%202.30367,-3.0105c0.438,-0.59664%200.86246,-1.19396%201.27501,-1.7895c0.40743,-0.58816%200.80352,-1.17234%201.185,-1.7535c1.10526,-1.68381%201.44079,-2.23511%201.77633,-2.7705c0.32878,-0.52461%200.96306,-1.5459%201.27467,-2.04c0.60654,-0.96177%201.20782,-1.88193%201.51051,-2.325c0.59013,-0.86381%201.17888,-1.68032%201.46416,-2.075c0.5498,-0.76063%201.31747,-1.8231%201.77883,-2.4895c0.43918,-0.63437%200.85266,-1.25267%201.45717,-2.15717c0.59549,-0.891%200.96531,-1.46814%201.51466,-2.22933c0.58413,-0.80936%201.12566,-1.40253%201.83801,-2.12333c0.61304,-0.62031%200.45171,-1.48306%200.7045,-2.34733c0.25668,-0.87762%200.75447,-1.62502%201,-2.40983c0.25128,-0.8032%200.7633,-1.39453%201.33217,-2.25417c0.54528,-0.82398%200.73415,-1.6714%201.31516,-2.336c0.55639,-0.63644%201.38658,-1.22588%201.8595,-1.9c0.5082,-0.72441%200.78867,-1.4%201.60266,-1.56667l0.71184,-0.4905'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20stroke%3D'%230b74d5'%20fill-opacity%3D'0'%20stroke-width%3D'16'%20d%3D'm13,62c0.61067,1.6%201.3045,2.3045%201.75717,2.75716c0.72683,0.72684%201.24283,1.24284%202.07617,2.07617c0.54133,0.54133%201.04116,1.06035%201.82833,1.82383c0.5781,0.5607%201.00502,0.96983%202.02633,1.74417c0.55877,0.42365%201.191,0.84034%201.884,1.284c1.16491,0.74577%201.59777,1.00147%202.5,1.55067c0.4692,0.28561%201.43689,0.86868%201.93067,1.16534c0.99711,0.59904%201.99667,1.19755%202.49283,1.49866c0.98501,0.59779%201.47073,0.89648%201.94733,1.2c1.3971,0.88972%201.83738,1.19736%202.7,1.7955c0.42201,0.29262%201.24022,0.87785%202.05583,1.41917c0.79531,0.52785%201.59376,1.0075%202.38,1.43867c0.74477,0.40842%201.45167,0.75802%202.37817,1.22517c0.76133,0.38387%201.54947,0.82848%202.40717,1.41084c0.7312,0.49647%201.49563,1.08231%202.27884,1.258c0.35564,0.07978%200.14721,-0.95518%200.35733,-1.86867c0.18092,-0.78651%200.98183,-1.2141%200.99983,-2.07867c0.02073,-0.99529%200.07916,-1.79945%200.42533,-2.56133c0.43607,-0.95973%200.53956,-1.66774%200.79617,-2.68183c0.18888,-0.74645%200.39764,-1.31168%200.7785,-2.6235c0.20865,-0.71867%200.41483,-1.48614%200.708,-2.28c0.15452,-0.41843%200.77356,-1.73138%201.348,-2.64133c0.30581,-0.48443%200.65045,-0.97043%201.0065,-1.4745c0.74776,-1.05863%201.1531,-1.60163%201.9375,-2.77084c0.40621,-0.60548%200.80272,-1.23513%201.2045,-1.8765c0.40757,-0.65062%200.81464,-1.31206%201.2315,-1.9755c0.41946,-0.66757%200.83374,-1.34258%201.73067,-2.648c0.44696,-0.65053%200.91436,-1.28356%201.386,-1.9095c0.46972,-0.6234%200.94725,-1.2364%201.422,-1.8465c0.94116,-1.20947%201.86168,-2.40844%202.30367,-3.0105c0.438,-0.59664%200.86246,-1.19396%201.27501,-1.7895c0.40743,-0.58816%200.80352,-1.17234%201.185,-1.7535c1.10526,-1.68381%201.44079,-2.23511%201.77633,-2.7705c0.32878,-0.52461%200.96306,-1.5459%201.27467,-2.04c0.60654,-0.96177%201.20782,-1.88193%201.51051,-2.325c0.59013,-0.86381%201.17888,-1.68032%201.46416,-2.075c0.5498,-0.76063%201.31747,-1.8231%201.77883,-2.4895c0.43918,-0.63437%200.85266,-1.25267%201.45717,-2.15717c0.59549,-0.891%200.96531,-1.46814%201.51466,-2.22933c0.58413,-0.80936%201.12566,-1.40253%201.83801,-2.12333c0.61304,-0.62031%200.45171,-1.48306%200.7045,-2.34733c0.25668,-0.87762%200.75447,-1.62502%201,-2.40983c0.25128,-0.8032%200.7633,-1.39453%201.33217,-2.25417c0.54528,-0.82398%200.73415,-1.6714%201.31516,-2.336c0.55639,-0.63644%201.38658,-1.22588%201.8595,-1.9c0.5082,-0.72441%200.78867,-1.4%201.60266,-1.56667l0.71184,-0.4905'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
}
.form-group .paper-switch-label,
.form-group .paper-switch-2-label {
@ -2146,7 +2158,7 @@ textarea[disabled] {
}
.form-group .paper-switch input:focus + .paper-switch-slider,
.form-group .paper-switch-2 input:focus + .paper-switch-slider {
box-shadow: 0 0 3px #0071de;
box-shadow: 0 0 3px #0b74d5;
}
.form-group .paper-switch .paper-switch-slider,
.form-group .paper-switch-2 .paper-switch-slider {
@ -2401,7 +2413,7 @@ fieldset.form-group {
top: 0;
visibility: hidden;
word-wrap: break-word;
z-index: 12;
z-index: 200;
}
.modal-bg {
bottom: 0;
@ -2480,7 +2492,7 @@ fieldset.form-group {
}
.modal .modal-link,
.modal a {
background-image: linear-gradient(5deg, transparent 65%, #0071de 80%, transparent 90%), linear-gradient(165deg, transparent 5%, #0071de 15%, transparent 25%), linear-gradient(165deg, transparent 45%, #0071de 55%, transparent 65%), linear-gradient(15deg, transparent 25%, #0071de 35%, transparent 50%);
background-image: linear-gradient(5deg, transparent 65%, #0b74d5 80%, transparent 90%), linear-gradient(165deg, transparent 5%, #0b74d5 15%, transparent 25%), linear-gradient(165deg, transparent 45%, #0b74d5 55%, transparent 65%), linear-gradient(15deg, transparent 25%, #0b74d5 35%, transparent 50%);
background-position: 0 90%;
background-repeat: repeat-x;
background-size: 4px 3px;
@ -2533,10 +2545,11 @@ fieldset.form-group {
background-color: #41403e;
background-color: var(--light-dark);
border-color: #41403e;
border-color: var(--primary);
border-color: var(--light-dark);
color: #41403e;
color: var(--primary-inverse);
border-style: solid;
border-width: 2px;
color: white;
font-size: 0.7em;
left: 50%;
min-width: 80px;
@ -2629,28 +2642,28 @@ fieldset.form-group {
width: 0%;
}
.progress .bar.striped {
background: repeating-linear-gradient(45deg, #c1c0bd, #c1c0bd 0.25rem, #a8a6a3 0.25rem, #a8a6a3 0.5rem);
background: repeating-linear-gradient(45deg, #cdcccb, #cdcccb 0.25rem, #b4b3b0 0.25rem, #b4b3b0 0.5rem);
}
.progress .bar.primary {
background-color: #41403e;
background-color: var(--primary-light);
}
.progress .bar.primary.striped {
background: repeating-linear-gradient(45deg, #c1c0bd, #c1c0bd 0.25rem, #a8a6a3 0.25rem, #a8a6a3 0.5rem);
background: repeating-linear-gradient(45deg, #cdcccb, #cdcccb 0.25rem, #b4b3b0 0.25rem, #b4b3b0 0.5rem);
}
.progress .bar.secondary {
background-color: #41403e;
background-color: var(--secondary-light);
}
.progress .bar.secondary.striped {
background: repeating-linear-gradient(45deg, #deefff, #deefff 0.25rem, #abd6ff 0.25rem, #abd6ff 0.5rem);
background: repeating-linear-gradient(45deg, #d8ebfd, #d8ebfd 0.25rem, #a7d3fa 0.25rem, #a7d3fa 0.5rem);
}
.progress .bar.success {
background-color: #41403e;
background-color: var(--success-light);
}
.progress .bar.success.striped {
background: repeating-linear-gradient(45deg, #d0dbc2, #d0dbc2 0.25rem, #b7c9a1 0.25rem, #b7c9a1 0.5rem);
background: repeating-linear-gradient(45deg, #d5dfc8, #d5dfc8 0.25rem, #bccca8 0.25rem, #bccca8 0.5rem);
}
.progress .bar.warning {
background-color: #41403e;
@ -3173,6 +3186,8 @@ nav .bar3 {
color: var(--primary);
border-bottom-left-radius: 15px 5px;
border-bottom-right-radius: 15px 3px;
border-bottom-style: solid;
border-bottom-width: 5px;
margin: 6px 0;
transition: 0.4s;
width: 2rem;

4
dist/paper.min.css vendored
View file

File diff suppressed because one or more lines are too long

47
docs/content/_index.md
View file

@ -6,48 +6,51 @@ weight: -270
#### Download
Download the latest version (1.8.3) using either of the links below. Or
Download the latest version (1.9.1) using either of the links below. Or
download an older release via GitHub.
<div class="row flex-spaces text-center">
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.8.3/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.8.3/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.1/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.1/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">GitHub Releases</a>
</div>
#### NPM
PaperCSS is available on NPM, current version 1.8.3. Install with <code>npm install papercss --save</code> and find the CSS in:
PaperCSS is available on NPM, current version 1.9.1. Install with <code>npm install papercss --save</code> and find the CSS in:
* node_modules/papercss/dist/paper.css
* node_modules/papercss/dist/paper.min.css
- node_modules/papercss/dist/paper.css
- node_modules/papercss/dist/paper.min.css
#### CDN
Don't want to download it? That's cool. You can just link to PaperCSS via
[unpkg's CDN](https://unpkg.com/#/). You can use either:
* [https://unpkg.com/papercss@1.8.3/dist/paper.css](https://unpkg.com/papercss@1.8.3/dist/paper.css)
* [https://unpkg.com/papercss@1.8.3/dist/paper.min.css](https://unpkg.com/papercss@1.8.3/dist/paper.min.css)
- [https://unpkg.com/papercss@1.9.1/dist/paper.css](https://unpkg.com/papercss@1.9.1/dist/paper.css)
- [https://unpkg.com/papercss@1.9.1/dist/paper.min.css](https://unpkg.com/papercss@1.9.1/dist/paper.min.css)
Here's a quick snippet to get started with PaperCSS:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.3/dist/paper.min.css">
<title>Document</title>
</head>
<body>
<div class="paper container">
<h1>Some Fresh Title</h1>
<p>This is where some content would go.</p>
</div>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://unpkg.com/papercss@1.9.1/dist/paper.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="paper container">
<h1>Some Fresh Title</h1>
<p>This is where some content would go.</p>
</div>
</body>
</html>
```
@ -64,4 +67,4 @@ npm run build
Grab the CSS out of the /dist folder created
You can also go into src/core/_config.scss before building to change around the global styles of your new CSS.
You can also go into src/core/\_config.scss before building to change around the global styles of your new CSS.

4
package-lock.json generated
View file

@ -1,7 +1,7 @@
{
"name": "papercss",
"version": "1.8.3",
"lockfileVersion": 2,
"version": "1.9.1",
"lockfileVersion": 1,
"requires": true,
"packages": {
"": {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "papercss",
"version": "1.8.3",
"version": "1.9.1",
"description": "The less formal CSS framework.",
"main": "dist/paper.css",
"scripts": {

4
src/components/_accordion.scss
View file

@ -21,7 +21,7 @@
padding: 0 0.75rem;
}
input {
> input {
display: none;
&:checked + label {
@ -36,7 +36,7 @@
}
}
label {
> label {
@include color('color', 'primary');
@include color('border-bottom-color', 'muted-light');
border-bottom-style: solid;

4
src/components/_alerts.scss
View file

@ -1,10 +1,10 @@
@mixin btn-close-color($base-color-name) {
@include color('color', #{$base-color-name}-light-10);
@include color('color', #{$base-color-name}-text);
&:hover,
&:active,
&:focus {
@include color('color', #{$base-color-name}-dark-10);
@include color('color', #{$base-color-name}-dark);
}
}

11
src/components/_buttons.scss
View file

@ -98,17 +98,12 @@ a {
button.btn-#{$colorName}-outline,
.paper-btn.btn-#{$colorName}-outline,
[type='button'].btn-#{$colorName}-outline {
background-color: $white;
border-color: darken($color-light, 10%);
@if $colorName == primary {
color: $color;
} @else {
color: $color-text;
}
@include color('background-color', main-background);
@include color('color', #{$colorName});
@include color('border-color', #{$colorName});
&:hover {
background-color: $color-light;
border-color: $color;
}
&:hover {

2
src/components/_modals.scss
View file

@ -11,7 +11,7 @@
top: 0;
visibility: hidden;
word-wrap: break-word;
z-index: 12;
z-index: 200;
// modal background
&-bg {

2
src/components/_navbar.scss
View file

@ -18,6 +18,8 @@ nav {
@include color('color', 'primary');
border-bottom-left-radius: 15px 5px;
border-bottom-right-radius: 15px 3px;
border-bottom-style: solid;
border-bottom-width: 5px;
margin: 6px 0;
transition: 0.4s;
width: 2rem;

4
src/components/_popovers.scss
View file

@ -19,10 +19,10 @@
@include border-style();
@include transition(opacity);
@include color('background-color', 'light-dark');
@include color('border-color', 'primary');
@include color('border-color', 'light-dark');
@include color('color', 'primary-inverse');
border-style: solid;
border-width: 2px;
color: $white;
font-size: 0.7em;
left: 50%;
min-width: 80px;

44
src/core/_config.scss
View file

@ -12,16 +12,16 @@ $font-src: 'https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC&displ
// Set theme colors
$primary: #41403e !default;
$secondary: #0071de !default;
$secondary: #0b74d5 !default;
$success: #86a361 !default;
$warning: #ddcd45 !default;
$danger: #a7342d !default;
$muted: #868e96 !default;
$primary-light: lighten($primary, 50%) !default;
$secondary-light: lighten($secondary, 50%) !default;
$success-light: lighten($success, 30%) !default;
$primary-light: lighten($primary, 55%) !default;
$secondary-light: lighten($secondary, 48%) !default;
$success-light: lighten($success, 32%) !default;
$warning-light: lighten($warning, 30%) !default;
$danger-light: lighten($danger, 45%) !default;
$muted-light: lighten($muted, 35%) !default;
@ -42,8 +42,8 @@ $muted-light-10: lighten($muted, 10%) !default;
$primary-dark-10: darken($primary, 10%) !default;
$secondary-dark-10: darken($secondary, 10%) !default;
$success-dark-10: darken($success, 10%) !default;
$warning-dark-10: darken($warning, 10%) !default;
$success-dark-10: darken($success, 23%) !default;
$warning-dark-10: darken($warning, 30%) !default;
$danger-dark-10: darken($danger, 10%) !default;
$muted-dark-10: darken($muted, 10%) !default;
@ -65,8 +65,8 @@ $warning-text: $warning-dark-10 !default;
$danger-text: $danger-dark-10 !default;
$muted-text: $muted-dark-10 !default;
$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
$shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
$shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;
$primary-inverse: #fff !default;
@ -74,11 +74,11 @@ $primary-inverse: #fff !default;
// Set dark theme colors
$dark-primary: #fff !default;
$dark-secondary: #0071de !default;
$dark-secondary: #5595ce !default;
$dark-success: #189418 !default;
$dark-warning: #ddcd45 !default;
$dark-danger: #ff8c86 !default;
$dark-success: #70c272 !default;
$dark-warning: #d4c252 !default;
$dark-danger: #df4c57 !default;
$dark-muted: #868e96 !default;
$dark-primary-light: lighten($dark-primary, 5%) !default;
@ -89,10 +89,10 @@ $dark-danger-light: lighten($dark-danger, 5%) !default;
$dark-muted-light: lighten($dark-muted, 5%) !default;
$dark-primary-dark: darken($dark-primary, 50%) !default;
$dark-secondary-dark: darken($dark-secondary, 50%) !default;
$dark-success-dark: darken($dark-success, 30%) !default;
$dark-secondary-dark: darken($dark-secondary, 30%) !default;
$dark-success-dark: darken($dark-success, 35%) !default;
$dark-warning-dark: darken($dark-warning, 30%) !default;
$dark-danger-dark: darken($dark-danger, 45%) !default;
$dark-danger-dark: darken($dark-danger, 30%) !default;
$dark-muted-dark: darken($dark-muted, 35%) !default;
$dark-primary-light-10: lighten($dark-primary, 10%) !default;
@ -121,14 +121,14 @@ $dark-main-background-light: lighten($dark-main-background, 50%) !default;
$dark-black: rgba(#000, 1) !default;
$dark-primary-text: $primary !default;
$dark-secondary-text: $dark-secondary-dark-10 !default;
$dark-success-text: $dark-success-dark-10 !default;
$dark-warning-text: $dark-warning-dark-10 !default;
$dark-danger-text: $dark-danger-dark-10 !default;
$dark-muted-text: $dark-muted-dark-10 !default;
$dark-secondary-text: $dark-secondary-dark !default;
$dark-success-text: $dark-success-dark !default;
$dark-warning-text: $dark-warning-dark !default;
$dark-danger-text: $dark-danger-dark !default;
$dark-muted-text: $dark-muted-light !default;
$dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
$dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
$dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
$dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;
$dark-primary-inverse: $primary !default;