mirror of
https://github.com/wekan/wekan.git
synced 2026-01-15 22:15:28 +01:00
Converted Stylus to CSS. Removed Stylus. This change removed many error messages.
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu
parent
01a1a2cdce
commit
072778b9aa
104 changed files with 9370 additions and 7642 deletions
22
client/components/forms/datepicker.css
Normal file
22
client/components/forms/datepicker.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.datepicker-container .fields .left {
|
||||
width: 56%;
|
||||
}
|
||||
.datepicker-container .fields .right {
|
||||
width: 38%;
|
||||
}
|
||||
.datepicker-container .datepicker {
|
||||
width: 100%;
|
||||
}
|
||||
.datepicker-container .datepicker table {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.datepicker-container .datepicker table thead {
|
||||
background: none;
|
||||
}
|
||||
.datepicker-container .datepicker table td,
|
||||
.datepicker-container .datepicker table th {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.datepicker-container
|
||||
.fields
|
||||
.left
|
||||
width: 56%
|
||||
.right
|
||||
width: 38%
|
||||
.datepicker
|
||||
width: 100%
|
||||
table
|
||||
width: 100%
|
||||
border: none
|
||||
border-spacing: 0
|
||||
border-collapse: collapse
|
||||
thead
|
||||
background: none
|
||||
td, th
|
||||
box-sizing: border-box
|
||||
736
client/components/forms/forms.css
Normal file
736
client/components/forms/forms.css
Normal file
|
|
@ -0,0 +1,736 @@
|
|||
select,
|
||||
textarea,
|
||||
input:not([type=file]),
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
background-color: #ebebeb;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
min-height: 34px;
|
||||
padding: 7px;
|
||||
}
|
||||
select.full,
|
||||
textarea.full,
|
||||
input:not([type=file]).full,
|
||||
button.full {
|
||||
width: 100%;
|
||||
}
|
||||
select.input-error,
|
||||
textarea.input-error,
|
||||
input:not([type=file]).input-error,
|
||||
button.input-error {
|
||||
background-color: #ece9e9;
|
||||
border-color: #ba1212;
|
||||
}
|
||||
select:focus,
|
||||
textarea:focus,
|
||||
input:not([type=file]):focus,
|
||||
button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
input[type="file"] {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
input[type="radio"] {
|
||||
-webkit-appearance: radio;
|
||||
min-height: inherit;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"] {
|
||||
transition: background 85ms ease-in, border-color 85ms ease-in;
|
||||
width: 250px;
|
||||
}
|
||||
input[type="text"].inline-input,
|
||||
input[type="password"].inline-input,
|
||||
input[type="email"].inline-input {
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
min-height: 0;
|
||||
height: 18px;
|
||||
width: 200px;
|
||||
}
|
||||
input[type="text"].full-line,
|
||||
input[type="password"].full-line,
|
||||
input[type="email"].full-line {
|
||||
width: 100%;
|
||||
}
|
||||
input[type="email"]:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
input[type="text"]:hover,
|
||||
input[type="password"]:hover,
|
||||
input[type="email"]:hover,
|
||||
textarea:hover {
|
||||
border-color: #999;
|
||||
}
|
||||
input[type="text"]:hover.input-error,
|
||||
input[type="password"]:hover.input-error,
|
||||
input[type="email"]:hover.input-error,
|
||||
textarea:hover.input-error {
|
||||
border-color: #ba1212;
|
||||
}
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
textarea:focus {
|
||||
background: #fff;
|
||||
border-color: #318ec4;
|
||||
box-shadow: 0 0 2px #318ec4;
|
||||
}
|
||||
input[type="text"]:focus.input-error,
|
||||
input[type="password"]:focus.input-error,
|
||||
input[type="email"]:focus.input-error,
|
||||
textarea:focus.input-error {
|
||||
background-color: #f8f7f7;
|
||||
border-color: #ba1212;
|
||||
box-shadow: 0 0 2px #d11515;
|
||||
}
|
||||
input[type="text"]:disabled,
|
||||
input[type="password"]:disabled,
|
||||
input[type="email"]:disabled,
|
||||
textarea:disabled {
|
||||
background-color: #dcdcdc;
|
||||
border-color: #bfbfbf;
|
||||
color: #8c8c8c;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
select {
|
||||
max-height: 300px;
|
||||
width: 256px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
select.inline {
|
||||
width: 100%;
|
||||
}
|
||||
option[disabled] {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
textarea {
|
||||
height: 150px;
|
||||
transition: background 85ms ease-in, border-color 85ms ease-in;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
textarea.editor {
|
||||
resize: none;
|
||||
padding-bottom: 22px;
|
||||
}
|
||||
.button {
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
input[type="submit"],
|
||||
button {
|
||||
background: #cfcfcf;
|
||||
background: linear-gradient(#cfcfcf, #c2c2c2);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
padding: 7px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
input[type="submit"] .wide,
|
||||
button .wide {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
input[type="submit"]:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:focus,
|
||||
button:focus {
|
||||
background: #c2c2c2;
|
||||
background: linear-gradient(#c2c2c2, #b5b5b5);
|
||||
}
|
||||
input[type="submit"]:active,
|
||||
button:active {
|
||||
background: #b5b5b5;
|
||||
background: linear-gradient(#b5b5b5, #a8a8a8);
|
||||
box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
input[type="submit"]:active:hover,
|
||||
button:active:hover,
|
||||
input[type="submit"]:active:focus,
|
||||
button:active:focus,
|
||||
input[type="submit"]:active:active,
|
||||
button:active:active {
|
||||
background: #e6e6e6;
|
||||
background: linear-gradient(#e6e6e6, #e6e6e6);
|
||||
}
|
||||
input[type="submit"].primary,
|
||||
button.primary {
|
||||
background: #005377;
|
||||
box-shadow: 0 1px 0 #4d4d4d;
|
||||
color: #fff;
|
||||
}
|
||||
input[type="submit"].primary:hover,
|
||||
button.primary:hover,
|
||||
input[type="submit"].primary:focus,
|
||||
button.primary:focus {
|
||||
background: #004766;
|
||||
}
|
||||
input[type="submit"].primary:active,
|
||||
button.primary:active {
|
||||
background: #01628c;
|
||||
}
|
||||
input[type="submit"].negate:hover,
|
||||
button.negate:hover,
|
||||
input[type="submit"].negate:focus,
|
||||
button.negate:focus {
|
||||
background: #990f0f;
|
||||
background: linear-gradient(#990f0f, #7d0c0c);
|
||||
box-shadow: 0 1px 0 #4d4d4d;
|
||||
color: #fff;
|
||||
}
|
||||
input[type="submit"].negate:active,
|
||||
button.negate:active {
|
||||
background: #7d0c0c;
|
||||
box-shadow: 0 1px 0 #4d4d4d;
|
||||
color: #fff;
|
||||
}
|
||||
input[type="submit"] i.fa,
|
||||
button i.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
input[type="submit"].disabled,
|
||||
input[type="submit"]:disabled,
|
||||
input[type="button"].disabled,
|
||||
button.disabled,
|
||||
.button.disabled,
|
||||
input[type="submit"].disabled:hover,
|
||||
input[type="submit"]:disabled:hover,
|
||||
input[type="button"].disabled:hover,
|
||||
button.disabled:hover,
|
||||
.button.disabled:hover,
|
||||
input[type="submit"].disabled:active,
|
||||
input[type="submit"]:disabled:active,
|
||||
input[type="button"].disabled:active,
|
||||
button.disabled:active,
|
||||
.button.disabled:active {
|
||||
background: #cfcfcf;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid #bfbfbf;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
.radio-div,
|
||||
.check-div {
|
||||
display: block;
|
||||
margin: 0 0 4px 20px;
|
||||
min-height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.radio-div input,
|
||||
.check-div input {
|
||||
left: -18px;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.radio-div label,
|
||||
.check-div label {
|
||||
font-weight: 400;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
label.form-error {
|
||||
color: #ba1212;
|
||||
}
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
input::-moz-placeholder,
|
||||
textarea::-moz-placeholder {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.edit-controls,
|
||||
.add-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.edit-controls button[type=submit],
|
||||
.add-controls button[type=submit],
|
||||
.edit-controls input[type=button],
|
||||
.add-controls input[type=button] {
|
||||
float: left;
|
||||
height: 32px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.edit-controls .fa-times-thin,
|
||||
.add-controls .fa-times-thin {
|
||||
font-size: 26px;
|
||||
margin: 3px 10px;
|
||||
}
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
.materialCheckBox {
|
||||
position: relative;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
z-index: 0;
|
||||
border: 2px solid #5a5a5a;
|
||||
border-radius: 1px;
|
||||
transition: 0.2s;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.materialCheckBox.is-checked {
|
||||
top: -4px;
|
||||
left: -3px;
|
||||
width: 7px;
|
||||
height: 15px;
|
||||
margin-right: 6px;
|
||||
border-top: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
transform: rotate(40deg);
|
||||
-webkit-backface-visibility: hidden;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
.button-link {
|
||||
background: #fff;
|
||||
background: linear-gradient(#fff, #f5f5f5);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-bottom-color: #c2c2c2;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
height: 34px;
|
||||
margin-top: 6px;
|
||||
max-width: 300px;
|
||||
padding: 7px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
overflow: ellipsis;
|
||||
}
|
||||
.button-link .on {
|
||||
background: #48b512;
|
||||
background: linear-gradient(#48b512, #3d990f);
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
margin: 0;
|
||||
padding: 2px 4px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.button-link.is-on {
|
||||
padding-right: 30px;
|
||||
max-width: 196px;
|
||||
}
|
||||
.button-link.is-on .on {
|
||||
display: block;
|
||||
}
|
||||
.button-link.inline {
|
||||
color: #666;
|
||||
padding: 2px 14px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.button-link.setting {
|
||||
height: 52px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
.button-link.setting.disabled {
|
||||
background: #fff;
|
||||
border-color: #e9e9e9;
|
||||
color: #8c8c8c;
|
||||
cursor: default;
|
||||
}
|
||||
.button-link.setting.disabled select {
|
||||
display: none;
|
||||
}
|
||||
.button-link.setting.disabled:hover .label {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.button-link.setting.disabled,
|
||||
.button-link.setting.disabled:hover,
|
||||
.button-link.setting.disabled:active,
|
||||
.button-link.setting.disabled.primary,
|
||||
.button-link.setting.disabled.primary:hover,
|
||||
.button-link.setting.disabled.primary:active {
|
||||
background: #cfcfcf;
|
||||
border-color: #c2c2c2;
|
||||
border-bottom-color: #b5b5b5;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
.button-link.setting .label {
|
||||
color: #8c8c8c;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.button-link.setting:hover .label {
|
||||
color: #eee;
|
||||
}
|
||||
.button-link.setting .value {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.button-link.setting label {
|
||||
display: none;
|
||||
}
|
||||
.button-link.setting select {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
.button-link:hover {
|
||||
background: #318ec4;
|
||||
background: linear-gradient(#318ec4, #2b7cab);
|
||||
border-color: #2e85b8;
|
||||
color: #fff;
|
||||
}
|
||||
.button-link:hover .on {
|
||||
background-image: none;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
border-color: transparent;
|
||||
}
|
||||
.button-link:active {
|
||||
background: #2e85b8;
|
||||
background: linear-gradient(#2e85b8, #28739f);
|
||||
border-color: #2b7cab;
|
||||
color: #fff;
|
||||
}
|
||||
.button-link .button-link.negate:hover {
|
||||
background: #990f0f;
|
||||
background: linear-gradient(#990f0f, #7d0c0c);
|
||||
border-color: linear-gradient(#990f0f, #7d0c0c);
|
||||
}
|
||||
.button-link .button-link.negate:active {
|
||||
background: #7d0c0c;
|
||||
border-color: #990f0f;
|
||||
}
|
||||
.button-link.primary {
|
||||
background: #48b512;
|
||||
background: linear-gradient(#48b512, #3d990f);
|
||||
border: 1px solid;
|
||||
border-color: #3d990f;
|
||||
color: #fff;
|
||||
}
|
||||
.button-link.primary:hover {
|
||||
background: #3d990f;
|
||||
background: linear-gradient(#3d990f, #327d0c);
|
||||
border-color: #3d990f;
|
||||
}
|
||||
.button-link.danger {
|
||||
background: #ba1212;
|
||||
background: linear-gradient(#ba1212, #8b0e0e);
|
||||
border: 1px solid;
|
||||
border-color: #a21010;
|
||||
color: #fff;
|
||||
}
|
||||
.button-link.danger:hover {
|
||||
background: #a21010;
|
||||
background: linear-gradient(#a21010, #740b0b);
|
||||
border-color: #8b0e0e;
|
||||
}
|
||||
button.quiet-button,
|
||||
button.loud-text-button {
|
||||
background: none;
|
||||
text-align: left;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
button.quiet-button:active,
|
||||
button.loud-text-button:active {
|
||||
color: #4d4d4d;
|
||||
background: #d3d3d3;
|
||||
box-shadow: none;
|
||||
}
|
||||
button.quiet-button {
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
}
|
||||
button.loud-text-button {
|
||||
width: 100%;
|
||||
}
|
||||
button.loud-text-button:hover {
|
||||
color: #111;
|
||||
}
|
||||
.emphasis-button,
|
||||
.quiet-button {
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
color: #8c8c8c;
|
||||
display: block;
|
||||
margin: 2px 0;
|
||||
padding: 6px 8px;
|
||||
position: relative;
|
||||
}
|
||||
.emphasis-button.w-img,
|
||||
.quiet-button.w-img {
|
||||
padding-left: 28px;
|
||||
}
|
||||
.emphasis-button:hover,
|
||||
.quiet-button:hover {
|
||||
color: #4d4d4d;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
.emphasis-button:active,
|
||||
.quiet-button:active {
|
||||
color: #4d4d4d;
|
||||
background: #d3d3d3;
|
||||
}
|
||||
.quiet-button-large {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.emphasis-button {
|
||||
color: #74663e;
|
||||
background: #ecdfbb;
|
||||
}
|
||||
.emphasis-button:hover {
|
||||
color: #53492d;
|
||||
background: #e7d6a7;
|
||||
}
|
||||
.emphasis-button:active {
|
||||
color: #53492d;
|
||||
background: #e1cc93;
|
||||
}
|
||||
.is-editable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.big-link {
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
margin: 6px 0 6px 40px;
|
||||
padding: 11px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.big-link .text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.big-link:hover {
|
||||
background: #dcdcdc;
|
||||
}
|
||||
.big-link.options {
|
||||
padding-right: 41px;
|
||||
}
|
||||
.big-link .option {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
.big-link.none {
|
||||
color: #8c8c8c;
|
||||
text-decoration: none;
|
||||
}
|
||||
.big-link.none:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.big-link.avatar-changer {
|
||||
padding-right: 51px;
|
||||
}
|
||||
.big-link.avatar-changer .member {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.big-link.avatar-changer .member .member-avatar {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.big-link.avatar-changer .member .member-initials {
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
max-height: 40px;
|
||||
}
|
||||
.show-more {
|
||||
border-radius: 3px;
|
||||
color: #8c8c8c;
|
||||
display: block;
|
||||
padding: 16px 8px 16px 40px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.show-more:hover {
|
||||
background: #dcdcdc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.show-more.compact {
|
||||
padding: 12px 8px;
|
||||
margin: 8px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
.board-widget .show-more {
|
||||
padding: 12px 8px 12px 40px;
|
||||
}
|
||||
.uploader {
|
||||
clear: both;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
}
|
||||
.uploader .realfile {
|
||||
cursor: pointer;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
font-size: 23px;
|
||||
}
|
||||
.uploader .realfile input[type="file"] {
|
||||
cursor: pointer;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
font-size: 23px;
|
||||
}
|
||||
.uploader:hover .fakefile {
|
||||
background: #318ec4;
|
||||
background: linear-gradient(#318ec4, #2b7cab);
|
||||
border-color: #2e85b8;
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-menu {
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dropdown-menu li {
|
||||
border-top: none;
|
||||
}
|
||||
.dropdown-menu li a {
|
||||
padding: 4px 12px 4px 8px;
|
||||
}
|
||||
.dropdown-menu li a img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dropdown-menu li a .minicard-label {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 2px;
|
||||
margin: 2px 7px -2px -2px;
|
||||
display: inline-block;
|
||||
}
|
||||
.dropdown-menu li.active {
|
||||
background: #005377;
|
||||
}
|
||||
.dropdown-menu li.active a,
|
||||
.dropdown-menu li.active .quiet {
|
||||
color: #fff;
|
||||
}
|
||||
.material-toggle-switch {
|
||||
display: flex;
|
||||
}
|
||||
.toggle-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 44px;
|
||||
background-color: #a6a6a6;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.toggle-label:after {
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -3px;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 100px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
|
||||
content: '';
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.toggle-label:active:after {
|
||||
transform: scale(1.15, 0.85);
|
||||
}
|
||||
.toggle-switch:checked ~ .toggle-label {
|
||||
background-color: #6fbeb5;
|
||||
}
|
||||
.toggle-switch:checked ~ .toggle-label:after {
|
||||
left: 20px;
|
||||
background-color: #179588;
|
||||
}
|
||||
.toggle-switch:checked:disabled ~ .toggle-label {
|
||||
background-color: #d5d5d5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toggle-switch:checked:disabled ~ .toggle-label:after {
|
||||
background-color: #bcbdbc;
|
||||
}
|
||||
.toggle-switch {
|
||||
display: none;
|
||||
}
|
||||
.toggle-switch-title {
|
||||
margin: 0 0.5em;
|
||||
display: flex;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.edit-controls .fa-times-thin,
|
||||
.add-controls .fa-times-thin {
|
||||
margin: 3px 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,695 +0,0 @@
|
|||
@import 'nib'
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input:not([type=file]),
|
||||
button
|
||||
box-sizing: border-box
|
||||
background-color: #ebebeb
|
||||
border: 1px solid #ccc
|
||||
border-radius: 3px
|
||||
display: block
|
||||
margin-bottom: 12px
|
||||
min-height: 34px
|
||||
padding: 7px
|
||||
|
||||
&.full
|
||||
width: 100%
|
||||
|
||||
&.input-error
|
||||
background-color: #ece9e9
|
||||
border-color: #ba1212
|
||||
|
||||
&:focus
|
||||
outline: 0
|
||||
|
||||
input[type="file"]
|
||||
margin-bottom: 16px
|
||||
|
||||
input[type="radio"]
|
||||
-webkit-appearance: radio
|
||||
min-height: inherit
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"]
|
||||
transition: background 85ms ease-in,
|
||||
border-color 85ms ease-in
|
||||
width: 250px
|
||||
|
||||
&.inline-input
|
||||
background: none
|
||||
border: 0
|
||||
margin: 0
|
||||
padding: 2px
|
||||
min-height: 0
|
||||
height: 18px
|
||||
width: 200px
|
||||
|
||||
&.full-line
|
||||
width: 100%
|
||||
|
||||
input[type="email"]:invalid
|
||||
box-shadow: none
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
textarea
|
||||
|
||||
&:hover
|
||||
border-color: #999
|
||||
|
||||
&.input-error
|
||||
border-color: #ba1212
|
||||
|
||||
&:focus
|
||||
background: #fff
|
||||
border-color: #318ec4
|
||||
box-shadow: 0 0 2px #318ec4
|
||||
|
||||
&.input-error
|
||||
background-color: #f8f7f7
|
||||
border-color: #ba1212
|
||||
box-shadow: 0 0 2px #d11515
|
||||
|
||||
&:disabled
|
||||
background-color: #dcdcdc
|
||||
border-color: #bfbfbf
|
||||
color: #8c8c8c
|
||||
-webkit-touch-callout: none
|
||||
user-select: none
|
||||
|
||||
select
|
||||
max-height: 300px
|
||||
width: 256px
|
||||
margin-bottom: 8px
|
||||
|
||||
&.inline
|
||||
width: 100%
|
||||
|
||||
option[disabled]
|
||||
color: #8c8c8c
|
||||
|
||||
textarea
|
||||
height: 150px
|
||||
transition: background 85ms ease-in,
|
||||
border-color 85ms ease-in
|
||||
resize: vertical
|
||||
width: 100%
|
||||
|
||||
&.editor
|
||||
resize: none
|
||||
padding-bottom: 22px
|
||||
|
||||
|
||||
.button
|
||||
border-radius: 3px
|
||||
text-decoration: none
|
||||
position: relative
|
||||
|
||||
input[type="submit"],
|
||||
button
|
||||
background: #cfcfcf
|
||||
background: linear-gradient(#cfcfcf, #c2c2c2)
|
||||
border: none
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-weight: 700
|
||||
line-height: 22px
|
||||
padding: 7px 20px
|
||||
text-align: center
|
||||
|
||||
.wide
|
||||
padding-left: 30px
|
||||
padding-right: 30px
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
background: #c2c2c2
|
||||
background: linear-gradient(#c2c2c2, #b5b5b5)
|
||||
|
||||
&:active
|
||||
background: #b5b5b5
|
||||
background: linear-gradient(#b5b5b5, #a8a8a8)
|
||||
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active
|
||||
background: #e6e6e6
|
||||
background: linear-gradient(#e6e6e6, #e6e6e6)
|
||||
|
||||
&.primary
|
||||
background: #005377
|
||||
box-shadow: 0 1px 0 #4d4d4d
|
||||
color: white
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
background: #004766
|
||||
|
||||
&:active
|
||||
background: #01628C
|
||||
|
||||
&.negate
|
||||
&:hover,
|
||||
&:focus
|
||||
background: #990f0f
|
||||
background: linear-gradient(#990f0f, #7d0c0c)
|
||||
box-shadow: 0 1px 0 #4d4d4d
|
||||
color: #fff
|
||||
|
||||
&:active
|
||||
background: #7d0c0c
|
||||
box-shadow: 0 1px 0 #4d4d4d
|
||||
color: #fff
|
||||
|
||||
i.fa
|
||||
margin-right: 10px
|
||||
|
||||
input[type="submit"].disabled,
|
||||
input[type="submit"]:disabled,
|
||||
input[type="button"].disabled,
|
||||
button.disabled,
|
||||
.button.disabled
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:active
|
||||
background: #cfcfcf
|
||||
cursor: default
|
||||
box-shadow: none
|
||||
color: #a8a8a8
|
||||
|
||||
fieldset
|
||||
border: 1px solid #bfbfbf
|
||||
padding: 15px
|
||||
margin-bottom: 15px
|
||||
|
||||
input[type="hidden"]
|
||||
display: none
|
||||
|
||||
.radio-div,
|
||||
.check-div
|
||||
display: block
|
||||
margin: 0 0 4px 20px
|
||||
min-height: 20px
|
||||
position: relative
|
||||
|
||||
input
|
||||
left: -18px
|
||||
min-height: 0
|
||||
margin: 0
|
||||
padding: 0
|
||||
position: absolute
|
||||
top: 2px
|
||||
|
||||
label
|
||||
font-weight: 400
|
||||
|
||||
label
|
||||
display: block
|
||||
font-weight: 700
|
||||
margin-bottom: 4px
|
||||
|
||||
&.form-error
|
||||
color: #ba1212
|
||||
|
||||
input,
|
||||
textarea
|
||||
&::-webkit-input-placeholder,
|
||||
&::-moz-placeholder
|
||||
color: #8c8c8c
|
||||
|
||||
.edit-controls,
|
||||
.add-controls
|
||||
display: flex
|
||||
align-items: center
|
||||
margin-top: 0px
|
||||
margin-bottom: 12px
|
||||
|
||||
button[type=submit]
|
||||
input[type=button]
|
||||
float: left
|
||||
height: 32px
|
||||
margin-bottom: 0px
|
||||
|
||||
.fa-times-thin
|
||||
font-size: 26px
|
||||
margin: 3px 10px
|
||||
|
||||
// Material Design checkboxes
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked
|
||||
position: absolute
|
||||
left: -9999px
|
||||
visibility: hidden
|
||||
display: none
|
||||
|
||||
.materialCheckBox
|
||||
position: relative
|
||||
width: 13px
|
||||
height: @width
|
||||
z-index: 0
|
||||
border: 2px solid #5a5a5a
|
||||
border-radius: 1px
|
||||
transition: .2s
|
||||
margin: 0
|
||||
cursor: pointer
|
||||
|
||||
&.is-checked
|
||||
top: -4px
|
||||
left: -3px
|
||||
width: 7px
|
||||
height: 15px
|
||||
margin-right: 6px
|
||||
border-top: 2px solid transparent
|
||||
border-left: 2px solid transparent
|
||||
transform: rotate(40deg)
|
||||
-webkit-backface-visibility: hidden
|
||||
transform-origin: 100% 100%
|
||||
|
||||
.button-link
|
||||
background: #fff
|
||||
background: linear-gradient(#fff, #f5f5f5)
|
||||
border-radius: 3px
|
||||
box-sizing: border-box
|
||||
user-select: none
|
||||
border: 1px solid #e3e3e3
|
||||
border-bottom-color: #c2c2c2
|
||||
cursor: pointer
|
||||
display: block
|
||||
font-weight: 700
|
||||
height: 34px
|
||||
margin-top: 6px
|
||||
max-width: 300px
|
||||
padding: 7px
|
||||
position: relative
|
||||
text-decoration: none
|
||||
overflow: ellipsis
|
||||
|
||||
.on
|
||||
background: #48b512
|
||||
background: linear-gradient(#48b512, #3d990f)
|
||||
border-radius: 3px
|
||||
color: #fff
|
||||
display: none
|
||||
font-size: 12px
|
||||
font-weight: 700
|
||||
height: 17px
|
||||
line-height: @height
|
||||
margin: 0
|
||||
padding: 2px 4px
|
||||
position: absolute
|
||||
right: 5px
|
||||
top: 5px
|
||||
text-align: center
|
||||
|
||||
&.is-on
|
||||
padding-right: 30px
|
||||
max-width: 196px
|
||||
|
||||
.on
|
||||
display: block
|
||||
|
||||
&.inline
|
||||
color: #666
|
||||
padding: 2px 14px
|
||||
margin-left: 4px
|
||||
|
||||
&.setting
|
||||
height: 52px
|
||||
float: left
|
||||
position: relative
|
||||
margin-top: 0
|
||||
|
||||
&.disabled
|
||||
background: #fff
|
||||
border-color: #e9e9e9
|
||||
color: #8c8c8c
|
||||
cursor: default
|
||||
|
||||
select
|
||||
display: none
|
||||
|
||||
&:hover .label
|
||||
color: #8c8c8c
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.primary,
|
||||
&.primary:hover,
|
||||
&.primary:active
|
||||
background: #cfcfcf
|
||||
border-color: #c2c2c2
|
||||
border-bottom-color: #b5b5b5
|
||||
cursor: default
|
||||
box-shadow: none
|
||||
color: #a8a8a8
|
||||
|
||||
.label
|
||||
color: #8c8c8c
|
||||
display: block
|
||||
font-size: 12px
|
||||
line-height: 14px
|
||||
margin-bottom: 0
|
||||
|
||||
&:hover .label
|
||||
color: #eee
|
||||
|
||||
.value
|
||||
display: block
|
||||
font-size: 18px
|
||||
line-height: 24px
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
label
|
||||
display: none
|
||||
|
||||
select
|
||||
border: none
|
||||
cursor: pointer
|
||||
height: 50px
|
||||
left: 0
|
||||
margin: 0
|
||||
opacity: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
z-index: 2
|
||||
width: 100%
|
||||
|
||||
&:hover
|
||||
background: #318ec4
|
||||
background: linear-gradient(#318ec4, #2b7cab)
|
||||
border-color: #2e85b8
|
||||
color: #fff
|
||||
|
||||
.on
|
||||
background-image: none
|
||||
background-color: rgba(255, 255, 255, .3)
|
||||
border-color: transparent
|
||||
|
||||
&:active
|
||||
background: #2e85b8
|
||||
background: linear-gradient(#2e85b8, #28739f)
|
||||
border-color: #2b7cab
|
||||
color: #fff
|
||||
|
||||
.button-link.negate
|
||||
|
||||
&:hover
|
||||
background: #990f0f
|
||||
background: linear-gradient(#990f0f, #7d0c0c)
|
||||
border-color: @background
|
||||
|
||||
&:active
|
||||
background: #7d0c0c
|
||||
border-color: #990f0f
|
||||
|
||||
|
||||
&.primary
|
||||
background: #48b512
|
||||
background: linear-gradient(#48b512, #3d990f)
|
||||
border: 1px solid
|
||||
border-color: #3d990f
|
||||
color: #fff
|
||||
|
||||
&:hover
|
||||
background: #3d990f
|
||||
background: linear-gradient(#3d990f, #327d0c)
|
||||
border-color: #3d990f
|
||||
|
||||
&.danger
|
||||
background: #ba1212
|
||||
background: linear-gradient(#ba1212, #8b0e0e)
|
||||
border: 1px solid
|
||||
border-color: #a21010
|
||||
color: #fff
|
||||
|
||||
&:hover
|
||||
background: #a21010
|
||||
background: linear-gradient(#a21010, #740b0b)
|
||||
border-color: #8b0e0e
|
||||
|
||||
button
|
||||
&.quiet-button,
|
||||
&.loud-text-button
|
||||
background: none
|
||||
text-align: left
|
||||
line-height: normal
|
||||
border: none
|
||||
box-shadow: none
|
||||
|
||||
&:active
|
||||
color: #4d4d4d
|
||||
background: #d3d3d3
|
||||
box-shadow: none
|
||||
|
||||
&.quiet-button
|
||||
font-weight: 400
|
||||
text-decoration: underline
|
||||
|
||||
&.loud-text-button
|
||||
width: 100%
|
||||
|
||||
&:hover
|
||||
color: #111
|
||||
|
||||
.emphasis-button,
|
||||
.quiet-button
|
||||
border-radius: 3px
|
||||
user-select: none
|
||||
color: #8c8c8c
|
||||
display: block
|
||||
margin: 2px 0
|
||||
padding: 6px 8px
|
||||
position: relative
|
||||
|
||||
&.w-img
|
||||
padding-left: 28px
|
||||
|
||||
&:hover
|
||||
color: #4d4d4d
|
||||
background: #dcdcdc
|
||||
|
||||
&:active
|
||||
color: #4d4d4d
|
||||
background: #d3d3d3
|
||||
|
||||
.quiet-button-large
|
||||
padding: 16px 24px
|
||||
|
||||
.emphasis-button
|
||||
color: #74663e
|
||||
background: #ecdfbb
|
||||
|
||||
&:hover
|
||||
color: #53492d
|
||||
background: #e7d6a7
|
||||
|
||||
&:active
|
||||
color: #53492d
|
||||
background: #e1cc93
|
||||
|
||||
.is-editable
|
||||
cursor: pointer
|
||||
|
||||
.big-link
|
||||
border-radius: 3px
|
||||
display: block
|
||||
margin: 6px 0 6px 40px
|
||||
padding: 11px
|
||||
position: relative
|
||||
text-decoration: none
|
||||
font-size: 16px
|
||||
line-height: 20px
|
||||
|
||||
.text
|
||||
text-decoration: underline
|
||||
|
||||
&:hover
|
||||
background: #dcdcdc
|
||||
|
||||
&.options
|
||||
padding-right: 41px
|
||||
|
||||
.option
|
||||
height: 30px
|
||||
width: @height
|
||||
position: absolute
|
||||
right: 6px
|
||||
top: 6px
|
||||
|
||||
&.none
|
||||
color: #8c8c8c
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
background: transparent
|
||||
|
||||
&.avatar-changer
|
||||
padding-right: 51px
|
||||
|
||||
.member
|
||||
border: 1px solid #ccc
|
||||
border-radius: 3px
|
||||
height: 40px
|
||||
width: @height
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
|
||||
.member-avatar
|
||||
height: 40px
|
||||
width: @height
|
||||
|
||||
.member-initials
|
||||
font-size: 16px
|
||||
height: 40px
|
||||
line-height: @height
|
||||
max-height: @height
|
||||
|
||||
.show-more
|
||||
border-radius: 3px
|
||||
color: #8c8c8c
|
||||
display: block
|
||||
padding: 16px 8px 16px 40px
|
||||
margin: 8px 0
|
||||
|
||||
&:hover
|
||||
background: #dcdcdc
|
||||
text-decoration: underline
|
||||
|
||||
&.compact
|
||||
padding: 12px 8px
|
||||
margin: 8px 0 0
|
||||
text-align: center
|
||||
|
||||
.board-widget .show-more
|
||||
padding: 12px 8px 12px 40px
|
||||
|
||||
.uploader
|
||||
clear: both
|
||||
cursor: pointer
|
||||
position: relative
|
||||
height: 34px
|
||||
width: 100%
|
||||
|
||||
.realfile
|
||||
cursor: pointer
|
||||
height: 34px
|
||||
line-height: @height
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
z-index: 2
|
||||
font-size: 23px
|
||||
|
||||
input[type="file"]
|
||||
cursor: pointer
|
||||
height: 34px
|
||||
line-height: @height
|
||||
margin: 0
|
||||
opacity: 0
|
||||
padding: 0
|
||||
width: 100%
|
||||
z-index: 2
|
||||
font-size: 23px
|
||||
|
||||
&:hover .fakefile
|
||||
background: #318ec4
|
||||
background: linear-gradient(#318ec4, #2b7cab)
|
||||
border-color: #2e85b8
|
||||
color: #fff
|
||||
|
||||
.dropdown-menu
|
||||
border-radius: 2px
|
||||
overflow: hidden
|
||||
|
||||
li
|
||||
border-top: none
|
||||
|
||||
a
|
||||
padding: 4px 12px 4px 8px
|
||||
|
||||
img
|
||||
width: 18px
|
||||
height: @width
|
||||
margin-right: 5px
|
||||
vertical-align: middle
|
||||
|
||||
.minicard-label
|
||||
width: 11px
|
||||
height: @width
|
||||
border-radius: 2px
|
||||
margin: 2px 7px -2px -2px
|
||||
display: inline-block
|
||||
|
||||
&.active
|
||||
background: #005377
|
||||
|
||||
a, .quiet
|
||||
color: white
|
||||
|
||||
// Material Design Toggle Switch
|
||||
.material-toggle-switch
|
||||
display: flex
|
||||
|
||||
.toggle-label
|
||||
position: relative
|
||||
display: block
|
||||
height: 20px
|
||||
width: 44px
|
||||
background-color: #a6a6a6
|
||||
border-radius: 100px
|
||||
cursor: pointer
|
||||
transition: all 0.3s ease
|
||||
|
||||
&:after
|
||||
position: absolute
|
||||
left: -2px
|
||||
top: -3px
|
||||
display: block
|
||||
width: 26px
|
||||
height: 26px
|
||||
border-radius: 100px
|
||||
background-color: #fff
|
||||
box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
|
||||
content: ''
|
||||
transition: all 0.3s ease
|
||||
|
||||
&:active
|
||||
&:after
|
||||
transform: scale(1.15, 0.85)
|
||||
|
||||
.toggle-switch:checked ~ .toggle-label
|
||||
background-color: #6fbeb5
|
||||
|
||||
&:after
|
||||
left: 20px
|
||||
background-color: #179588
|
||||
|
||||
.toggle-switch:checked:disabled ~ .toggle-label
|
||||
background-color: #d5d5d5
|
||||
pointer-events: none
|
||||
|
||||
&:after
|
||||
background-color: #bcbdbc
|
||||
|
||||
.toggle-switch
|
||||
display: none
|
||||
|
||||
.toggle-switch-title
|
||||
margin: 0 0.5em
|
||||
display: flex
|
||||
|
||||
|
||||
@media screen and (max-width: 800px)
|
||||
.edit-controls,
|
||||
.add-controls
|
||||
.fa-times-thin
|
||||
margin: 3px 20px
|
||||
Loading…
Add table
Add a link
Reference in a new issue