updated hints and added some wrapping for longer blocks

This commit is contained in:
Andy Miller
2015-08-11 09:53:51 -06:00
parent 4de32052c2
commit 85b9644e1f
5 changed files with 45 additions and 47 deletions

View File

@@ -445,7 +445,7 @@ hr {
*/ */
.switch-grav { .switch-grav {
background-color: #fff; background-color: #fff;
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
border-radius: 4px; border-radius: 4px;
/* Selected ON switch-light /* Selected ON switch-light
*/ } */ }
@@ -574,7 +574,7 @@ form .selectize-control.multi .selectize-input {
border-radius: 2px; border-radius: 2px;
line-height: 1.5; } line-height: 1.5; }
form .selectize-control.multi .selectize-input > div.active { form .selectize-control.multi .selectize-input > div.active {
background: #d4d4d4; } background: #d5d5d5; }
form .selectize-control.single .selectize-input:after { form .selectize-control.single .selectize-input:after {
right: 27px; } right: 27px; }
form .selectize-control.single .selectize-input.dropdown-active:after { form .selectize-control.single .selectize-input.dropdown-active:after {
@@ -584,7 +584,7 @@ form .x-small {
form .small { form .small {
max-width: 10rem !important; } max-width: 10rem !important; }
form .medium { form .medium {
max-width: 20rem !important; } max-width: 20rem; }
form .medium textarea { form .medium textarea {
height: 7rem; } height: 7rem; }
form .large { form .large {
@@ -593,7 +593,7 @@ form .large {
height: 10rem; } height: 10rem; }
form select { form select {
width: 100%; width: 100%;
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
background: #fff; background: #fff;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@@ -603,21 +603,18 @@ form select {
margin: 0; } margin: 0; }
form input[type=text], form input[type=password], form input[type=email] { form input[type=text], form input[type=password], form input[type=email] {
width: 100%; width: 100%;
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
background: #fff; } background: #fff; }
form input[readonly=readonly] { form input[readonly=readonly] {
background: #f2f2f2; background: #f2f2f2;
font-weight: bold; } font-weight: bold; }
form textarea { form textarea {
width: 100%; width: 100%;
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
background: #fff; } background: #fff; }
form .form-frontmatter-wrapper { form .form-frontmatter-wrapper {
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
border-radius: 4px; } border-radius: 4px; }
form .switch-toggle.medium {
width: 100%;
width: 20rem; }
form .switch-toggle label { form .switch-toggle label {
cursor: pointer; } cursor: pointer; }
form .switch-toggle a, form .switch-toggle label { form .switch-toggle a, form .switch-toggle label {
@@ -662,7 +659,7 @@ form .checkboxes {
margin-right: 10px; margin-right: 10px;
position: absolute; position: absolute;
background: #fff; background: #fff;
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
border-radius: 4px; } border-radius: 4px; }
form .checkboxes input[type=checkbox] { form .checkboxes input[type=checkbox] {
display: none; } display: none; }
@@ -679,7 +676,7 @@ form .checkboxes {
margin-bottom: 3rem; } margin-bottom: 3rem; }
.form-frontmatter-wrapper .dragbar { .form-frontmatter-wrapper .dragbar {
height: 4px; height: 4px;
background: #d4d4d4; background: #d5d5d5;
cursor: row-resize; } cursor: row-resize; }
#frontmatter + .CodeMirror { #frontmatter + .CodeMirror {
@@ -694,7 +691,7 @@ form .checkboxes {
.form-order-wrapper ul#ordering li { .form-order-wrapper ul#ordering li {
padding: 0.2rem 1rem; padding: 0.2rem 1rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
background: #f8f8f8; background: #f8f8f8;
color: #8d959a; color: #8d959a;
margin: 3px 0; margin: 3px 0;
@@ -718,7 +715,7 @@ form .checkboxes {
cursor: move; cursor: move;
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
background: #f8f8f8; background: #f8f8f8;
color: #8d959a; color: #8d959a;
margin: 3px 0; margin: 3px 0;
@@ -817,16 +814,16 @@ tr {
background: #54c5b0; background: #54c5b0;
color: #fff; } color: #fff; }
.button.dropdown-toggle { .button.dropdown-toggle {
border-left: 1px solid #3aab97; } border-left: 1px solid #3bab97; }
.button.secondary { .button.secondary {
background: #29796b; background: #2a7a6b;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
border-radius: 4px; } border-radius: 4px; }
.button.secondary:hover { .button.secondary:hover {
background: #2f8c7c; background: #318d7c;
color: #fff; } color: #fff; }
.button.secondary.dropdown-toggle { .button.secondary.dropdown-toggle {
border-left: 1px solid #2f8c7c; } border-left: 1px solid #318d7c; }
.button-group { .button-group {
position: relative; position: relative;
@@ -868,7 +865,7 @@ tr {
background-color: #41bea8; background-color: #41bea8;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #3aab97; border: 1px solid #3bab97;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -926,7 +923,7 @@ tr {
#admin-login .form-data { #admin-login .form-data {
padding-right: 0; } padding-right: 0; }
#admin-login h1 { #admin-login h1 {
background: #20333e url(../images/logo.png) 50% 50% no-repeat; background: #21333e url(../images/logo.png) 50% 50% no-repeat;
font-size: 0; font-size: 0;
color: transparent; color: transparent;
height: 216px; height: 216px;
@@ -942,15 +939,15 @@ tr {
text-align: center; text-align: center;
font-weight: 300; font-weight: 300;
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
border: 1px solid #1d2e38; } border: 1px solid #1e2e39; }
#admin-login form input::-webkit-input-placeholder { #admin-login form input::-webkit-input-placeholder {
color: #83949c; } color: #83949d; }
#admin-login form input::-moz-placeholder { #admin-login form input::-moz-placeholder {
color: #83949c; } color: #83949d; }
#admin-login form input:-moz-placeholder { #admin-login form input:-moz-placeholder {
color: #83949c; } color: #83949d; }
#admin-login form input:-ms-input-placeholder { #admin-login form input:-ms-input-placeholder {
color: #83949c; } color: #83949d; }
#admin-login form .form-actions { #admin-login form .form-actions {
text-align: center; text-align: center;
margin: 0 -3rem -3rem -3rem; margin: 0 -3rem -3rem -3rem;
@@ -974,7 +971,7 @@ tr {
color: #fff; } color: #fff; }
#admin-logo { #admin-logo {
background: #20333e; background: #21333e;
height: 4.2rem; } height: 4.2rem; }
#admin-logo h3 { #admin-logo h3 {
text-transform: uppercase; text-transform: uppercase;
@@ -988,7 +985,7 @@ tr {
#admin-user-details { #admin-user-details {
padding: 2rem; padding: 2rem;
border-bottom: 1px solid #20333e; border-bottom: 1px solid #21333e;
overflow: hidden; } overflow: hidden; }
#admin-user-details img { #admin-user-details img {
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
@@ -1023,7 +1020,7 @@ tr {
#admin-menu li .badges .badge { #admin-menu li .badges .badge {
display: inline-block; display: inline-block;
margin-right: -5px; margin-right: -5px;
color: #e5e5e5; } color: #e6e6e6; }
#admin-menu li .badges .count { #admin-menu li .badges .count {
background-color: #365569; } background-color: #365569; }
#admin-menu li .badges .updates { #admin-menu li .badges .updates {
@@ -1052,7 +1049,7 @@ tr {
color: #afc7d5; color: #afc7d5;
margin-right: 8px; } margin-right: 8px; }
#admin-menu li a:hover { #admin-menu li a:hover {
background: #20333e; background: #21333e;
color: #fff; } color: #fff; }
#admin-menu li a:hover i { #admin-menu li a:hover i {
font-size: 1.2rem; } font-size: 1.2rem; }
@@ -1067,7 +1064,10 @@ tr {
#admin-main { #admin-main {
margin-left: 20%; } margin-left: 20%; }
#admin-main .hint:after, #admin-main [data-hint]:after { #admin-main .hint:after, #admin-main [data-hint]:after {
font-size: 1rem; } font-size: 0.9rem;
width: 400px;
line-height: inherit;
white-space: normal; }
#admin-main h1 { #admin-main h1 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
@@ -1720,7 +1720,7 @@ body.remodal_active .remodal {
border-radius: 0; } border-radius: 0; }
.grav-mdeditor-navbar { .grav-mdeditor-navbar {
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
background: #fbfbfb; } background: #fbfbfb; }
@@ -1739,8 +1739,8 @@ body.remodal_active .remodal {
.grav-mdeditor-navbar ul .mdeditor-active a { .grav-mdeditor-navbar ul .mdeditor-active a {
background: white; background: white;
cursor: auto; cursor: auto;
border-left: 1px solid #d4d4d4; border-left: 1px solid #d5d5d5;
border-right: 1px solid #d4d4d4; } border-right: 1px solid #d5d5d5; }
.grav-mdeditor-navbar ul .mdeditor-active a:hover { .grav-mdeditor-navbar ul .mdeditor-active a:hover {
background: #fff; } background: #fff; }
.grav-mdeditor-navbar ul a { .grav-mdeditor-navbar ul a {
@@ -1763,7 +1763,7 @@ body.remodal_active .remodal {
border-top-right-radius: 4px; } border-top-right-radius: 4px; }
.grav-mdeditor-content { .grav-mdeditor-content {
border: 1px solid #d4d4d4; border: 1px solid #d5d5d5;
border-top: 0; border-top: 0;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; } border-bottom-left-radius: 4px; }
@@ -1807,7 +1807,7 @@ body.remodal_active .remodal {
[data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview { [data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview {
display: none; } display: none; }
[data-mode=split] .grav-mdeditor-code { [data-mode=split] .grav-mdeditor-code {
border-right: 1px solid #d4d4d4; } border-right: 1px solid #d5d5d5; }
[data-mode=split] .grav-mdeditor-code, [data-mode=split] .grav-mdeditor-code .grav-mdeditor-preview { [data-mode=split] .grav-mdeditor-code, [data-mode=split] .grav-mdeditor-code .grav-mdeditor-preview {
float: left; float: left;
width: 50%; } width: 50%; }
@@ -1903,7 +1903,7 @@ body.remodal_active .remodal {
.dropzone { .dropzone {
position: relative; position: relative;
border: 1px #d4d4d4 solid; border: 1px #d5d5d5 solid;
border-radius: 4px; border-radius: 4px;
min-height: 4rem; min-height: 4rem;
background: #fff; } background: #fff; }

File diff suppressed because one or more lines are too long

View File

@@ -1,5 +1,5 @@
/*! Hint.css (base version) - v1.3.3 - 2014-07-06 /*! Hint.css (base version) - v1.3.5 - 2015-06-16
* http://kushagragour.in/lab/hint/ * http://kushagragour.in/lab/hint/
* Copyright (c) 2014 Kushagra Gour; Licensed MIT */ * Copyright (c) 2015 Kushagra Gour; Licensed MIT */
.hint,[data-hint]{position:relative;display:inline-block}.hint:before,.hint:after,[data-hint]:before,[data-hint]:after{position:absolute;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:.3s ease;-moz-transition:.3s ease;transition:.3s ease;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms}.hint:hover:before,.hint:hover:after,.hint:focus:before,.hint:focus:after,[data-hint]:hover:before,[data-hint]:hover:after,[data-hint]:focus:before,[data-hint]:focus:after{visibility:visible;opacity:1}.hint:hover:before,.hint:hover:after,[data-hint]:hover:before,[data-hint]:hover:after{-webkit-transition-delay:100ms;-moz-transition-delay:100ms;transition-delay:100ms}.hint:before,[data-hint]:before{content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1000001}.hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:#fff;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap}.hint--top:before{border-top-color:#383838}.hint--bottom:before{border-bottom-color:#383838}.hint--left:before{border-left-color:#383838}.hint--right:before{border-right-color:#383838}.hint--top:before{margin-bottom:-12px}.hint--top:after{margin-left:-18px}.hint--top:before,.hint--top:after{bottom:100%;left:50%}.hint--top:hover:after,.hint--top:hover:before,.hint--top:focus:after,.hint--top:focus:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--bottom:before{margin-top:-12px}.hint--bottom:after{margin-left:-18px}.hint--bottom:before,.hint--bottom:after{top:100%;left:50%}.hint--bottom:hover:after,.hint--bottom:hover:before,.hint--bottom:focus:after,.hint--bottom:focus:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--right:before{margin-left:-12px;margin-bottom:-6px}.hint--right:after{margin-bottom:-14px}.hint--right:before,.hint--right:after{left:100%;bottom:50%}.hint--right:hover:after,.hint--right:hover:before,.hint--right:focus:after,.hint--right:focus:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--left:before{margin-right:-12px;margin-bottom:-6px}.hint--left:after{margin-bottom:-14px}.hint--left:before,.hint--left:after{right:100%;bottom:50%}.hint--left:hover:after,.hint--left:hover:before,.hint--left:focus:after,.hint--left:focus:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always:after,.hint--always:before{opacity:1;visibility:visible}.hint--always.hint--top:after,.hint--always.hint--top:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--bottom:after,.hint--always.hint--bottom:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--left:after,.hint--always.hint--left:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--right:after,.hint--always.hint--right:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)} .hint--bottom:after,.hint--top:after{margin-left:-18px}.hint,[data-hint]{position:relative;display:inline-block}.hint:after,.hint:before,[data-hint]:after,[data-hint]:before{position:absolute;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:.3s ease;-moz-transition:.3s ease;transition:.3s ease;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms}.hint--always:after,.hint--always:before,.hint:focus:after,.hint:focus:before,.hint:hover:after,.hint:hover:before,[data-hint]:focus:after,[data-hint]:focus:before,[data-hint]:hover:after,[data-hint]:hover:before{opacity:1;visibility:visible}.hint:hover:after,.hint:hover:before,[data-hint]:hover:after,[data-hint]:hover:before{-webkit-transition-delay:100ms;-moz-transition-delay:100ms;transition-delay:100ms}.hint:before,[data-hint]:before{content:'';position:absolute;background:0 0;border:6px solid transparent;z-index:1000001}.hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:#fff;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap}.hint--top:before{border-top-color:#383838;margin-bottom:-12px}.hint--bottom:before{border-bottom-color:#383838;margin-top:-12px}.hint--top:after,.hint--top:before{bottom:100%;left:50%}.hint--top:focus:after,.hint--top:focus:before,.hint--top:hover:after,.hint--top:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--bottom:after,.hint--bottom:before{top:100%;left:50%}.hint--bottom:focus:after,.hint--bottom:focus:before,.hint--bottom:hover:after,.hint--bottom:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--right:before{border-right-color:#383838;margin-left:-12px;margin-bottom:-6px}.hint--right:after{margin-bottom:-14px}.hint--right:after,.hint--right:before{left:100%;bottom:50%}.hint--right:focus:after,.hint--right:focus:before,.hint--right:hover:after,.hint--right:hover:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--left:before{border-left-color:#383838;margin-right:-12px;margin-bottom:-6px}.hint--left:after{margin-bottom:-14px}.hint--left:after,.hint--left:before{right:100%;bottom:50%}.hint--left:focus:after,.hint--left:focus:before,.hint--left:hover:after,.hint--left:hover:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--top:after,.hint--always.hint--top:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--bottom:after,.hint--always.hint--bottom:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--left:after,.hint--always.hint--left:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--right:after,.hint--always.hint--right:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}

View File

@@ -169,7 +169,10 @@ $update-height: 3rem;
margin-left: $sidebar-width; margin-left: $sidebar-width;
.hint:after, [data-hint]:after { .hint:after, [data-hint]:after {
font-size: 1rem; font-size: 0.9rem;
width: 400px;
line-height: inherit;
white-space: normal;
} }
h1 { h1 {

View File

@@ -195,7 +195,7 @@ form {
.medium { .medium {
max-width: 20rem !important; max-width: 20rem;
textarea { textarea {
height: 7rem; height: 7rem;
@@ -270,11 +270,6 @@ form {
.switch-toggle { .switch-toggle {
// margin-left: 30%; // margin-left: 30%;
&.medium {
width: 100%;
width: 20rem;
}
label { label {
cursor: pointer; cursor: pointer;
} }