Last active
January 5, 2016 20:34
-
-
Save devbyray/1f808611a323e81acd5c to your computer and use it in GitHub Desktop.
Feedback
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Overall feedback I see a lot in your CSS: | |
// Keep specificity as low as possible | |
// Read this article: http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ | |
// For the rest is your CSS not bad at all! | |
// Better than I expected :-) | |
@import "../../../../members/assets/scss/variables"; | |
@import "../tooltip"; | |
//Define all your colors in the variables! | |
$grey_dark: #888; | |
// Combine selectors | |
// Costs less code and than your keep more DRY (Don't Repeat Yourself) | |
::-webkit-input-placeholder, | |
:-moz-placeholder, | |
::-moz-placeholder, | |
#add_a_kid input.search-term:-ms-input-placeholder { | |
color: $grey_dark; | |
} | |
// I would advice you to keep low specificty in CSS | |
// This is to avoid the use of important! | |
// In this selector you want to use a modifier (in BEM terms) | |
/* This is yours */ | |
.overlay.overlay--large { | |
@media (min-width: 760px) { | |
padding: 0 48px 12px; | |
} | |
} | |
/* This would be mine */ | |
// I removed the .overlay because .overlay--large said for it self it is doing somthing with the overlay :-) | |
.overlay--large { | |
@media (min-width: 760px) { | |
padding: 0 48px 12px; | |
} | |
} | |
// I would consider to make more clear class names | |
// And keep specificity as low as possible | |
// Read this article: http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ | |
/* Your version */ | |
.editable-mypage-ui { | |
&:focus { | |
outline: none; | |
} | |
&.top-right { | |
position: absolute; | |
top: 0; | |
right: 0; | |
z-index: 1; | |
} | |
.icon-pencil { | |
color: white; | |
background: $editGreen; | |
padding: 4px; | |
} | |
&.delete { | |
color: white; | |
background: #c65321; | |
padding: 0 5px; | |
.icon_remove { | |
margin: 4px; | |
display: block; | |
} | |
} | |
// Why setting 2 the same class names next to each other? | |
&.supporters-sort.supporters-sort, | |
&.gallery-sort.gallery-sort { | |
color: white; | |
width: 26px; | |
height: 26px; | |
line-height: 26px; | |
font-size: 20px; | |
right: 26px; | |
background: #777; | |
text-align: center; | |
cursor: move; | |
cursor: -webkit-grabbing; | |
vertical-align: middle; | |
} | |
} | |
/* My version */ | |
// Check the generate CSS http://www.sassmeister.com/gist/9a9ab663a454a2af826d | |
// No it are all single classes | |
// No enheriting in CSS classes anymore! | |
.mypage-ui { | |
&--is-editable:focus { | |
outline: none; | |
} | |
&__top-right-element { | |
position: absolute; | |
top: 0; | |
right: 0; | |
z-index: 1; | |
} | |
&__icon-pencil { | |
color: white; | |
background: $editGreen; | |
padding: 4px; | |
} | |
&__icon_remove { | |
margin: 4px; | |
display: block; | |
} | |
&__delete-button { | |
color: white; | |
background: #c65321; | |
padding: 0 5px; | |
} | |
} | |
// Keep CSS specificity as low as posible :-) | |
.is-editable { | |
&.editable-mypage-outlined, | |
&.editable-mypage-outlined:focus, | |
.editable-mypage-outlined, | |
.editable-mypage-outlined:focus { | |
outline: 1px dashed #ccc; | |
.blur-on-enter { | |
padding-right: 1px; | |
outline: none; | |
} | |
} | |
} | |
.editable-mypage-trigger { | |
cursor: pointer; | |
} | |
// Keep CSS specificity as low as posible :-) | |
.edit-event-info-overlay.fullscreen { | |
p { | |
margin-top: 12px; | |
} | |
a { | |
color: $yellow; | |
} | |
h3 { | |
padding: 0px 12px; | |
margin-bottom: 15px; | |
@media (max-width: bp(medium)) { | |
padding: 0px; | |
} | |
} | |
&.fullscreen { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
&.overlay.overlay--large .overlay__heading { | |
margin: 0; | |
} | |
.full-width { | |
float: left; | |
width: 100%; | |
@media (max-width: 635px) { | |
padding: 12px 0; | |
} | |
} | |
.half-width { | |
float: left; | |
width: 49%; | |
&:nth-of-type(odd) { | |
margin-right: 2%; | |
width: 49%; | |
} | |
p { | |
padding: 0px 12px; | |
margin-bottom: 45px; | |
@media (max-width: bp(medium)) { | |
padding: 0px; | |
} | |
} | |
@media (max-width: bp(medium-large)) { | |
width: 100%; | |
&:nth-of-type(odd) { | |
width: 100%; | |
margin-right: 0%; | |
} | |
} | |
} | |
.span-1-3 { | |
width: 33.33333333%; | |
} | |
} | |
// Keep CSS specificity as low as posible :-) | |
// Never use #id selectors!! | |
div #states_CA_wrapper { | |
margin-right: 2%; | |
} | |
.edit-event-info-overlay .inline-input:not(.empty) label { | |
@media (max-width: 760px) { | |
left: 1.6em; | |
transform: scale(0.8) translate(-2.0em, -3em); | |
} | |
@media (min-width: 761px) { | |
left: 2.3em; | |
transform: scale(0.8) translate(-1.9em, -3em); | |
} | |
} | |
// Keep CSS specificity as low as posible :-) | |
// CSS Selectors are readed by the browser from Right-to-Left | |
// So it starts searching all the label's from the whole page | |
// Than it filters it down. So this is smarter to use a class for your label | |
// Instead to target an element! | |
.edit-event-info-overlay .inline-input label, | |
.edit-event-activities-overlay .inline-input label { | |
@media (max-width: 760px) { | |
left: 1.6em; | |
} | |
} | |
// Keep CSS specificity as low as posible :-) | |
.edit-event-activities-overlay .inline-input:not(.empty) label { | |
@media (max-width: 760px) { | |
left: 1.6em; | |
transform: scale(0.8) translate(-2.0em, -3em); | |
} | |
@media (min-width: 761px) { | |
left: 2.3em; | |
transform: scale(0.8) translate(-2.0em, -3em); | |
} | |
} | |
.edit-event-info__section { | |
padding: 34px 24px; | |
border-bottom: 1px solid #32531A; | |
} | |
.options-overlay__select { | |
display: inline-block; | |
margin-top: 4px; | |
width: 28.333%; | |
margin-right: 6%; | |
@media (max-width: 320px) { | |
margin-right: 5%; | |
} | |
} | |
// You have an overlay inside a <p> tag? | |
// If it goes about a tooltip? Than you should rename the class name | |
p .options-overlay__select:last-child { | |
margin-right: 0px | |
} | |
// Keep CSS specificity as low as posible :-) | |
.options-overlay__select select { | |
height: 100% !important; | |
width: 100% !important; | |
color: #222; | |
z-index: 1; | |
} | |
// Keep CSS specificity as low as posible :-) | |
.overlay.mypage-single-photo-overlay { | |
.caption-wrapper { | |
&.empty { | |
display: block; | |
} | |
} | |
} | |
// Keep CSS specificity as low as posible :-) | |
.mypage__header.is-editable { | |
.editable-mypage-ui { | |
display: block; | |
} | |
.flag__image { | |
.editable-mypage-ui { | |
right: 0; | |
&.delete { | |
right: 26px; | |
} | |
@media (min-width: 780px) { | |
right: 16px; | |
&.delete { | |
right: 42px; | |
} | |
} | |
} | |
.list-nav a:link, | |
.list-nav a:visited { | |
color: #7a7a7a; | |
} | |
.list-nav a:hover { | |
color: $mainBlue; | |
} | |
.overlay::after { | |
right: 20%; | |
} | |
@media (max-width: 664px) { | |
.editable-mypage-ui { | |
right: 0; | |
} | |
.overlay { | |
left: 58px; | |
top: 110px; | |
} | |
} | |
} | |
} | |
.edit-event-info-overlay input { | |
color: #444; | |
} | |
.edit-event-info-overlay .inline-input.give--invalid.empty label { | |
color: #E84522; | |
padding-left: 24px; | |
} | |
.edit-event-info-overlay .inline-input.give--invalid { | |
&.empty { | |
label { | |
color: $red; | |
padding-left: 32px; | |
&:before { | |
position: absolute; | |
display: block; | |
content: '!'; | |
left: 2px; | |
background-color: #E84522; | |
color: white; | |
width: 15px; | |
padding-left: 10px; | |
border-radius: 50%; | |
font-weight: bold; | |
top: 1px; | |
font-size: 14px; | |
} | |
} | |
input { | |
color: #444; | |
} | |
} | |
} | |
.form__error { | |
animation: shakeDialog 300ms linear both; | |
} | |
@keyframes shakeDialog { | |
0% { | |
transform: translateX(1%); | |
} | |
25% { | |
transform: translateX(-1%); | |
} | |
50% { | |
transform: translateX(1%); | |
} | |
100% { | |
transform: translateX(0%); | |
} | |
} | |
.is-editable #editable_event_info_trigger { | |
z-index: 2; | |
cursor: pointer; | |
@media (max-width: 779px) { | |
margin: 0 auto; | |
} | |
} | |
// Event Coach - Edit Event Overlay | |
.edit-event-info__section.cf #edit_event_info_event_coach__link { | |
padding-top: 20px; | |
margin-bottom: 0px; | |
} | |
.edit-event-info-overlay label[for="event_time_tbd"] { | |
white-space: nowrap; | |
border-bottom: 0px; | |
} | |
#edit_event_info_event_coach__link a { | |
border-bottom: 0px; | |
} | |
#edit_event_primary_contact__section { | |
border-bottom: 0px; | |
margin-bottom: -55px; | |
} | |
.edit-event-info-overlay #edit_event_info__buttons { | |
margin-bottom: -16px; | |
} | |
// Honored Kids | |
// TODO: move editable honored kid stuff into a separate stylesheet | |
.mypage__kids.is-editable { | |
.editable-mypage-ui { | |
display: block; | |
} | |
} | |
// Keep CSS specificity as low as posible :-) | |
.kid-info.editable-mypage-ui { | |
background: #fff; | |
border: none; | |
&:after { | |
@media (min-width: 989px) { | |
content: ''; | |
height: 1px; | |
width: 100%; | |
display: block; | |
border-bottom: 1px dashed #ccc; | |
position: absolute; | |
top: 86px; | |
left: 0; | |
} | |
} | |
.kid-info-content { | |
h3 { color: $editGreen; } | |
h3 span { float: left; } | |
.icon-add { | |
float: right; | |
display: block; | |
} | |
@media (max-width: 988px) { | |
background: #ffffff; | |
p { | |
color: #717171; | |
} | |
&:after { | |
height: 0; | |
border-bottom: none; | |
} | |
} | |
} | |
} | |
.more-than-two .kid-info.editable-mypage-ui { | |
background: #fff; | |
&:after { | |
height: 0; | |
border-bottom: none; | |
} | |
.kid-info-content { | |
.icon-add { display: block; } | |
p { color: #353535; } | |
} | |
} | |
.kid-info.random { | |
button.editable-mypage-ui { | |
display: none; | |
} | |
} | |
// Keep CSS specificity as low as posible :-) | |
// Never use #id selectors | |
#add_a_kid { // overlay | |
@media (max-width: 759px) { | |
.overlay__heading, | |
.overlay__dark { | |
margin: -20px -8px 20px; | |
} | |
} | |
form { // #kidSearch | |
position: absolute; | |
right: 48px; | |
top: 30px; | |
width: 40%; | |
@media (max-width: bp(medium-large)) { | |
position: relative; | |
right: auto; | |
top: auto; | |
width: 100%; | |
} | |
.search-term { | |
width: 100%; | |
border-radius: 8px; | |
padding: 12px 34px 12px 14px; | |
font-size: 0.9em; | |
color: #444; | |
border: none; | |
@media (max-width: bp(small)) { | |
font-size: 0.6em; | |
} | |
} | |
.search_button { | |
right: 10px; | |
top: 12px; | |
} | |
} | |
ul { | |
list-style: none; | |
@media (max-width: 759px) { | |
padding: 0 10px; | |
} | |
} | |
li { | |
border-bottom: 1px solid #5c7e36; | |
padding: 24px 0; | |
@media (max-width: bp(small)) { | |
display: flex; | |
align-items: center; | |
} | |
} | |
.frame { | |
background-color: #fff; | |
padding: 5px; | |
display: inline-block; | |
vertical-align: middle; | |
margin-right: 20px; | |
height: 85px; | |
width: 85px; | |
@media (max-width: bp(small)) { | |
height: 65px; | |
width: 65px; | |
} | |
a { | |
height: 75px; | |
width: 75px; | |
overflow: hidden; | |
display: block; | |
@media (max-width: bp(small)) { | |
height: 55px; | |
width: 55px; | |
} | |
} | |
img { | |
max-width: 100%; | |
height: auto; | |
display: block; | |
} | |
} | |
.info { | |
display: inline-block; | |
vertical-align: middle; | |
@media (max-width: bp(small)) { | |
font-size: 0.8em; | |
flex: 1; | |
} | |
h3 { | |
margin-bottom: 0; | |
a { | |
border: none; | |
} | |
} | |
} | |
.button { | |
float: right; | |
margin-top: 22px; | |
@media (max-width: bp(small)) { | |
font-size: 0.6em; | |
} | |
} | |
} | |
@import 'editable/photos-imgly'; | |
@import 'editable/photo-gallery'; | |
@import 'editable/logo'; | |
@import 'editable/supporters'; | |
.edit-photo-overlay { | |
min-width: 90%; | |
margin-top: 5%; | |
.edit-photo-overlay__photo-container { | |
position: relative; | |
} | |
.edit-photo-overlay__photo-editor-container { | |
position: relative; | |
height: 100%; | |
} | |
.imglykit-header-row, | |
.imglykit-top-controls-row { | |
display: none; | |
} | |
// we're hiding the actual UI and faking it with our own to make the workflow | |
// less confusing here | |
.imglykit-controls-container { | |
visibility: hidden; | |
// height: 0; // we can't do this because it breaks imgly's layout ಠ_ಠ | |
} | |
// this is our faked imgly controls | |
// it is placed over the top of the actual controls | |
.edit-photo-overlay__photo-editor-toolbar { | |
position: absolute; | |
height: 80px; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background: #2B2B2B; | |
user-select: none; | |
color: white; | |
@media (max-width: bp(small)) { | |
height: 40px; | |
} | |
button { | |
height: 80px; | |
width: 80px; | |
// display: inline-block; | |
border-left: 1px solid #363636; | |
border-right: 1px solid #363636; | |
text-align: center; | |
@media (max-width: bp(small)) { | |
height: 40px; | |
width: 40px; | |
} | |
img { | |
height: 40px; | |
width: 40px; | |
transition: all 0.2s ease-out; | |
vertical-align: middle; | |
@media (max-width: bp(small)) { | |
height: 20px; | |
width: 20px; | |
} | |
} | |
&:hover { | |
box-shadow: 0 -3px 0 0 #43ADEB inset; | |
background-color: rgba(0, 0, 0, 0.3); | |
img { | |
transform: scale(1.1); | |
} | |
} | |
} | |
} | |
} | |
.edit-photo-overlay__photo-container { | |
background: rgba(45, 45, 45, 0.95); | |
text-align: center; | |
margin: 24px 12px 20px; | |
height: 300px; | |
@media (min-width: bp(medium)) { | |
height: 500px; | |
} | |
@media (min-width: bp(large)) { | |
height: 50vh; | |
} | |
overflow: hidden; | |
> img { | |
height: 100%; | |
max-width: 100%; | |
} | |
} | |
// TODO: create activities scss and move this there | |
.mypage__activities.is-editable { | |
.editable-mypage-ui { | |
display: block; | |
} | |
} | |
.mypage__description.is-editable { | |
.editable-mypage-ui { | |
display: block; | |
} | |
} | |
.responsive-video.is-editable { | |
.editable-mypage-ui { | |
display: block; | |
} | |
} | |
.mypage__fundraising.is-editable { | |
.editable-mypage-ui { | |
@media (min-width: bp(large)) { | |
display: block; | |
} | |
} | |
.editable-mypage-outlined { | |
display: inline-block; | |
} | |
} | |
.editable_button { | |
right: 26px; | |
padding: 0px 0px 10px; | |
width: 26px; | |
height: 26px; | |
line-height: 26px; | |
font-size: 20px; | |
text-align: center; | |
vertical-align: middle; | |
font-weight: 400; | |
} | |
.editable-mypage-ui.top-right.delete { | |
background: #e64525 none repeat scroll 0% 0%; | |
@extend .editable_button; | |
} | |
.kid-info .editable-mypage-ui.top-right.delete { | |
right: 0; | |
} | |
.mypage--editable .mypage__activities .activities-sort { | |
color: white; | |
background: #777; | |
cursor: move; | |
cursor: -webkit-grabbing; | |
// This is goooood to use! | |
// But maybe better is to use a placeholder class | |
// Because it won't produce CSS on itself | |
// Read: http://thesassway.com/intermediate/understanding-placeholder-selectors | |
@extend .editable_button; | |
} | |
.mypage__img.mypage__img a:link.delete, a:visited.delete { | |
padding: 0; | |
color: white; | |
width: 26px; | |
height: 26px; | |
line-height: 21px; | |
right: 52px; | |
background: $red; | |
font-size: 24px; | |
text-align: center; | |
vertical-align: middle; | |
font-weight: 400; | |
} | |
.activities__list { | |
li.editable-mypage-outlined { | |
border: none; | |
outline-offset: -1px; | |
} | |
.editable-mypage-ui.top-right { | |
z-index: 4; | |
.icon { | |
height: 26px; | |
width: 26px; | |
&.icon_move { | |
height: 15px; | |
margin-top: -4px; | |
} | |
&.icon_delete { | |
height: 12px; | |
margin-top: -2px; | |
} | |
} | |
&.activity-delete { | |
right: 52px; | |
} | |
} | |
.sortable-ghost { | |
z-index: 11; | |
} | |
li.add { | |
min-height: 75px; | |
transition: background-color 0.5s ease; | |
color: $editGreen; | |
font-size: 1.17em; | |
font-weight: bold; | |
line-height: 1; | |
.top-right { | |
// float: right; | |
// margin-top: 10px; | |
} | |
> div { | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
width: 84%; | |
> span { | |
display: inline-block; | |
vertical-align: middle; | |
padding-top: 1px; | |
line-height: 24px; | |
+ span { | |
float: right; | |
} | |
} | |
} | |
.icon-add { | |
height: 23px; | |
width: 20px; | |
vertical-align: middle; | |
} | |
svg { | |
// color: $editGreen; | |
} | |
h3 { | |
// color: $editGreen; | |
// float: left; | |
// margin-top: 10px; | |
} | |
&:hover { | |
background-color: #fff; | |
} | |
} | |
} | |
.activities__list li:nth-child(3n+1) { | |
&.add > div { | |
width: 85%; | |
@media (min-width: bp(medium)) { | |
width: 90%; | |
} | |
} | |
} | |
.activities__list li:nth-child(4n+4) { | |
&.add > div { | |
@media (max-width: bp(medium)) { | |
width: 78%; | |
} | |
} | |
} | |
.edit-event-activities-overlay { | |
.full-width { | |
float: left; | |
width: 100%; | |
} | |
.half-width { | |
float: left; | |
width: 50%; | |
@media (max-width: bp(medium-large)) { | |
width: 100%; | |
} | |
} | |
} | |
.edit-event-video-overlay { | |
textarea { | |
height: 106px; | |
text-align: center; | |
resize: vertical; | |
} | |
p { | |
padding: 12px; | |
text-align: center; | |
} | |
} | |
.small-spinner { | |
top: -4px; | |
display: inline-block; | |
margin: 0 46px; | |
background: transparent; | |
border-radius: 100%; | |
animation: spin 1s infinite steps(8); | |
transform-origin: 50% 50%; | |
@include spinner(4px, 6, 2px); | |
} | |
.icon_delete { | |
height: 12px; | |
width: 26px; | |
} | |
.icon_move { | |
height: 15px; | |
} | |
// Fix for form inputs wrapping funny in IE | |
#states_USA_wrapper { | |
clear: left; | |
} | |
.event_mypage_inactive_notice { | |
color: #fff; | |
background-color: $orange; | |
margin: -24px auto 12px; | |
padding: 8px 0; | |
text-align: center; | |
p { | |
padding: 0 24px; | |
} | |
.icon-info { | |
display: inline-block; | |
top: 7px; | |
@media only screen and (device-aspect-ratio: 2/3) { | |
display: none; | |
} | |
} | |
a { | |
color: #fff; | |
border-color: #fff; | |
} | |
} | |
// iPhone 4 Fixes | |
@media only screen and (device-aspect-ratio: 2/3) { | |
.icon_delete { | |
position: absolute; | |
left: 7px; | |
width: 12px; | |
} | |
.activities__list { | |
.editable-mypage-ui.top-right { | |
.icon.icon_delete { | |
margin-top: 0; | |
width: 12px; | |
} | |
.icon.icon_move { | |
position: absolute; | |
left: 6px; | |
top: 5px; | |
width: 15px; | |
margin-top: 0; | |
} | |
.icon.icon-pencil { | |
height: 15px; | |
width: 15px; | |
} | |
} | |
} | |
.editable-mypage-ui.top-right { | |
padding: 0px 0px 10px; | |
width: 26px; | |
height: 26px; | |
line-height: 26px; | |
font-size: 20px; | |
text-align: center; | |
vertical-align: middle; | |
font-weight: 400; | |
background: #11a15c; | |
} | |
.editable-mypage-ui .icon-pencil { | |
height: 15px; | |
width: 15px; | |
display: block; | |
position: absolute; | |
padding: 0; | |
top: 6px; | |
left: 6px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment