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 ;
}
@ media print {
. add-controls {
display : none ;
}
}
. 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 ;
}
}