css linting

This commit is contained in:
Kendall Werts 2020-02-20 14:39:54 -06:00
parent 951b048153
commit 393d6228e0
4 changed files with 135 additions and 92 deletions

View file

@ -10,6 +10,11 @@
"rules": {
"declaration-block-no-duplicate-properties": true,
"order/declaration-block-properties-alphabetical-order": true,
"property-no-unknown": [
true, {
ignoreProperties:
["inset-block-end", "inset-block-start"]
}],
"property-blacklist": [
"/(min[-]|max[-])height/",
"/width/",

View file

@ -91,7 +91,6 @@ table {
}
.scrollable {
/* border-block-start: 1px solid #f1f1f1;*/
inline-size: 100%;
max-block-size: 400px;
overflow: auto;
@ -107,10 +106,10 @@ table {
/* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
.truncate-text {
inline-size: 100%;
mask-image: linear-gradient(to left, transparent, black 1em);
overflow: hidden;
white-space: nowrap;
width: 100%;
}
/* Color and icon helpers */
@ -274,7 +273,7 @@ table {
.panel-content {
flex: 1;
padding: 16px;
padding-block-start: 16px;
}
/* Column panels for edit screens */
@ -445,7 +444,7 @@ manage things like container crud */
block-size: 48px;
display: flex;
justify-content: space-between;
padding: 16px;
padding-block-start: 16px;
}
.panel-header .usercontext-icon {
@ -804,10 +803,6 @@ span ~ .panel-header-text {
overflow: hidden; /* Bugfix: issue 948 */
}
/*#edit-sites-assigned {
flex: 1000; /* Bugfix: issue 948
}*/
#edit-sites-assigned h3 {
font-size: 14px;
font-weight: normal;
@ -919,7 +914,7 @@ span ~ .panel-header-text {
}
.edit-container-panel legend,
.options-header{
.options-header {
flex: 1 0;
font-size: 14px !important;
margin-block-end: 4px;
@ -927,8 +922,8 @@ span ~ .panel-header-text {
}
.options-header {
margin-block-start: 6px;
margin-block-end: 8px;
margin-block-start: 6px;
}
/* Achievement panel elements */
@ -982,45 +977,45 @@ span ~ .panel-header-text {
}
body {
color: #000;
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #000000;
font-size: 13px;
inline-size: 320px;
letter-spacing: -0.1px;
width: 320px;
}
h3.title {
width: 100%;
color: #000000;
block-size: 40px;
color: #000;
font-size: 13px;
letter-spacing: -0.1px;
font-weight: bold;
inline-size: 100%;
letter-spacing: -0.1px;
line-height: 40px;
text-align: center;
height: 40px;
}
.menu {
width: 100%;
border-style: none;
inline-size: 100%;
}
.menu-item {
height: 24px;
line-height: 24px;
width: 100%;
cursor: pointer;
height: 24px;
inline-size: 100%;
line-height: 24px;
}
.disabled-menu-item {
font-style: italic;
color: grey;
cursor: default;
font-style: italic;
}
.hover-highlight:hover {
background: #1296F8;
color: #FFFFFF;
background: #1296f8;
color: #fff;
}
.menu-text {
@ -1028,98 +1023,131 @@ h3.title {
}
.menu-icon {
float: left;
text-align: center;
width: 16px;
display: block;
float: left;
height: 16px;
margin: 4px 8px 4px 16px;
inline-size: 16px;
margin-block-end: 4px;
margin-block-start: 4px;
margin-inline-end: 8px;
margin-inline-start: 16px;
text-align: center;
}
.menu-right-float {
float: right;
text-align: right;
width: 60px;
display: inline-block;
float: right;
height: 24px;
inline-size: 60px;
text-align: right;
}
.container-count {
opacity: 0.6;
padding: 0 6px 0 0;
padding-block-end: 0;
padding-block-start: 0;
padding-inline-end: 6px;
padding-inline-start: 0;
text-align: right;
}
.menu-arrow {
float: right;
text-align: center;
width: 18px;
display: inline-block;
float: right;
height: 24px;
padding: 6px 12px 6px 0;
inline-size: 18px;
padding-block-end: 6px;
padding-block-start: 6px;
padding-inline-end: 12px;
padding-inline-start: 0;
text-align: center;
}
.menu-arrow img {
padding: 2 2 2 2;
height: 12px;
width: 12px;
inline-size: 12px;
padding-block-end: 2px;
padding-block-start: 2px;
padding-inline-end: 2px;
padding-inline-start: 2px;
}
hr {
display: block;
border: 0;
border-top: 1px solid #e3e3e3;
padding: 0 0 6px 0;
margin: 6px 0 0 0;
border-block-start: 1px solid #e3e3e3;
display: block;
margin-block-end: 0;
margin-block-start: 6px;
margin-inline-end: 0;
margin-inline-start: 0;
padding-block-end: 6px;
padding-block-start: 0;
padding-inline-end: 0;
padding-inline-start: 0;
}
.sub-header {
height: 24px;
color: #737373;
height: 24px;
line-height: 24px;
padding: 0 16px 0 16px;
padding-block-end: 0;
padding-block-start: 0;
padding-inline-end: 16px;
padding-inline-start: 16px;
}
.edit-form {
color: #737373;
padding: 0 16px 0 16px;
padding-block-end: 0;
padding-block-start: 0;
padding-inline-end: 16px;
padding-inline-start: 16px;
}
.identities-list {
margin: 0 0 41px 0;
margin-block-end: 41px;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
}
.bottom-btn {
height: 41px;
line-height: 41px;
background-color: #e3e3e3;
padding: 0 16px 0 16px;
border: solid 1px #d9d9d9;
cursor: pointer;
height: 41px;
inline-size: 100%;
inset-block-end: 0;
line-height: 41px;
padding-block-end: 0;
padding-block-start: 0;
padding-inline-end: 16px;
padding-inline-start: 16px;
position: fixed;
bottom: 0px;
width: 100%;
}
.delete-container {
background-color: #FFFFFF;
border-top: solid 1px #e3e3e3;
background-color: #fff;
border-block-start: solid 1px #e3e3e3;
cursor: default;
height: 65px;
padding: 9px 18px 27px 17px;
inline-size: 100%;
inset-block-end: 0;
padding-block-end: 27px;
padding-block-start: 9px;
padding-inline-end: 18px;
padding-inline-start: 17px;
position: fixed;
bottom: 0px;
width: 100%;
}
.delete-btn {
height: 30px;
line-height: 30px;
cursor: pointer;
width: 100%;
border: 0px;
background-color: rgba(12, 12, 13, 0.1);
border: 0;
border-radius: 2px;
background-color: rgba(12,12,13,0.1);
cursor: pointer;
height: 30px;
inline-size: 100%;
line-height: 30px;
text-align: center;
}
@ -1128,26 +1156,29 @@ hr {
}
.btn-return.arrow-left {
position: absolute;
border: 0;
left: 15px;
top: 15px;
width: 1.2rem;
height: 1.2rem;
background-color: rgba(255, 255, 255, 1);
background-image: url("/img/arrow-icon-left.svg");
border: 0;
cursor: pointer;
height: 1.2rem;
inline-size: 1.2rem;
inset-block-start: 15px;
left: 15px;
position: absolute;
}
input {
border: solid 1px #BEBEBE;
border: solid 1px #bebebe;
border-radius: 2px;
}
.form-header {
height: 23px;
line-height: 23px;
padding: 0 0 0 0;
padding-block-end: 0;
padding-block-start: 0;
padding-inline-end: 0;
padding-inline-start: 0;
}
#edit-container-panel-name-input {
@ -1159,46 +1190,52 @@ input {
}
#site-isolation {
inset-block-end: auto;
position: fixed;
bottom: auto;
}
.options-label {
padding-inline-start: 25px;
cursor: pointer;
padding-inline-start: 25px;
}
#manage-assigned-sites-list {
color: #5A9DE6;
color: #5a9de6;
}
#info-icon {
position: absolute;
right: 13px;
top: 13px;
font-size: 10px;
height: 14px;
width: 14px;
border: solid 1px #000;
border-radius: 7px;
cursor: pointer;
text-align: center;
color: #000;
text-decoration: none;
cursor: pointer;
font-size: 10px;
font-weight: bold;
height: 14px;
inline-size: 14px;
inset-block-start: 13px;
position: absolute;
right: 13px;
text-align: center;
text-decoration: none;
}
.delete-warning {
padding: 8px 0 8px 0;
padding-block-end: 8px;
padding-block-start: 8px;
padding-inline-end: 0;
padding-inline-start: 0;
}
.trash-button {
float: right;
text-align: center;
width: 16px;
display: inline-block;
float: right;
height: 16px;
margin: 4px 10px 4px 0;
inline-size: 16px;
margin-block-end: 4px;
margin-block-start: 4px;
margin-inline-end: 10px;
margin-inline-start: 0;
text-align: center;
}
tr > td > .trash-button {

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
<polygon fill="#000000" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
<polygon fill="#FFFFFF" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
</svg>

Before

Width:  |  Height:  |  Size: 183 B

After

Width:  |  Height:  |  Size: 183 B

View file

@ -715,10 +715,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
window.close();
});
const manageContainer = document.querySelector("#manage-container-link");
Utils.addEnterHandler(manageContainer, async () => {
Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity());
});
},
// This method is called when the panel is shown.
@ -752,6 +749,10 @@ Logic.registerPanel(P_CONTAINER_INFO, {
windowId: browser.windows.WINDOW_ID_CURRENT,
cookieStoreId: Logic.currentIdentity().cookieStoreId
});
const manageContainer = document.querySelector("#manage-container-link");
Utils.addEnterHandler(manageContainer, async () => {
Logic.showPanel(P_CONTAINER_EDIT, identity);
});
return this.buildOpenTabTable(tabs);
},