Feedback

event-editable.scss

// 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;
    }
}