@openneuro/app 4.2.0 → 4.2.4

package/src/sass/crn_app/_dashboard.datasets.scss

@@ -1,588 +0,0 @@
-// Dashboard Tabs ========================
-
-.tabs.nav.nav-pills > li {
-    a {
-        @include border-radius(0);
-        transition: background .3s ease;
-        padding: 10px 20px;
-        font-size: 14px;
-        text-transform: uppercase;
-
-        .unread-badge {
-            @include border-radius(10px);
-            background: $notification-green;
-            position: absolute;
-            top: -10px;
-            right: -6px;
-            padding: 4px 0 0;
-            font-size: 9px;
-            line-height: 9px;
-            text-align: center;
-            width: 17px;
-            height: 17px;
-            color: $primary;
-            color: var(--primary);
-            font-weight: 600;
-        }
-    }
-
-    &.navbar-right {
-        a {
-            color: $dashboard-tab-text-color;
-            color: var(--dashboard-tab-text-color);
-            padding: 5px;
-            background: none;
-            font-size: 12px;
-            text-transform: uppercase;
-
-            &:hover {
-                background: none;
-                color: $primary;
-                color: var(--primary);
-            }
-        }
-
-        .dropdown-menu {
-            @include border-radius(0);
-            border: 0;
-            box-shadow: 1px 1px 3px $transparent3;
-        }
-    }
-}
-
-@include mobile {
-    .tabs.nav.nav-pills > li {
-        a { 
-            z-index: 700;
-            display: inline;
-            white-space: nowrap;
-            font-size: 10px;
-        }
-    }
-}
-
-// Dashboard and Admin sort and filter ========================
-
-.filters-sort-wrap {
-    width: 100%;
-    float: none;
-    padding: 0;
-    background: $f9;
-    border-bottom: 1px solid $ddd;
-    .filters {
-        float: right; 
-        @media (max-width: 980px) {
-            float: left;
-            label {
-                margin-left: 0px !important;
-            }
-        }
-        label {
-            margin: 0;
-            margin-left: 80px; 
-            text-transform: uppercase;
-            font-size: 10px;
-            font-weight: 600;
-            color: $c-77;
-            text-align: center;
-            padding: 10px;
-        }
-        button {
-            @extend %btn-filter;
-            padding: 10px 20px;
-            border: 1px solid #c2c2c2;
-            border-width: 0 1px;
-            border-right: none;
-
-            &.filter-all {
-                //text-transform: uppercase;
-                font-size: 12px;
-                font-weight: 600;
-            }
-
-            &:hover,
-            &:focus {
-                outline: 0;
-            }
-
-            &:active,
-            &.active,
-            &:hover {
-                background: $eee;
-                color: $primary;
-                color: var(--primary);
-
-                &.filter-shared {
-                    color: $brand-info;
-                }
-
-                &.filter-public {
-                    color: $brand-success;
-                }
-
-                &.filter-incomplete {
-                    color: darken($brand-warning, 10%);
-                }
-
-                &.filter-invalid {
-                    color: $brand-danger;
-                }
-            }
-
-            .filter-text {
-                font-size: 12px;
-                font-weight: 600;
-                margin-left: 5px;
-                position: relative;
-            }
-
-            .filter-admin{
-                i{
-                    width: 12px;
-                    margin: 0;
-                    font-size: 11px;
-                }
-            }
-        }
-    }
-
-    .sort {
-        float: left;
-        padding: 0;
-        margin: 0;
-        position: relative;
-        white-space: nowrap;
-
-        label {
-            margin: 0;
-            text-transform: uppercase;
-            font-size: 10px;
-            font-weight: 600;
-            color: $c-77;
-            float: left;
-            padding: 11px 12px;
-        }
-
-        a {
-            @extend %btn-sort;
-            padding: 11px 20px;
-            &.name,
-            &.date {
-                border: 1px solid $c2;
-                border-width: 0 1px;
-                text-align: center;
-                display: inline-block;
-            }
-
-            &.date {
-                border-width: 0 1px 0 0;
-            }
-
-            .fa {
-                position: relative;
-                line-height: 0;
-                top: 2px;
-                padding: 0;
-                font-size: 10px;
-
-                &.fa-sort-desc {
-                    top: -2px;
-                }
-            }
-        }
-    }
-}
-
-// Dashboard teaser layout for Datasets ========================
-
-.dashboard-dataset-teasers {
-    box-shadow: 0 0 2px -1px $transparent1;
-    padding: 0;
-    margin: 0 0 20px;
-    position: relative;
-    z-index: 600;
-    background: $white;
-
-    .header-wrap {
-        border-bottom: 1px solid $e1;
-    }
-
-    @include mobile {
-        .header-wrap {
-            border-bottom: none;
-        }
-    }
-
-    h2,
-    span.sub-title {
-        margin: 0;
-        padding: 20px;
-        text-transform: uppercase;
-    }
-    
-    h2 {
-        font-size: 30px;
-        font-weight: 100;
-    }
-    
-    h4 {
-        margin: 0 auto;
-        padding: 20px;
-    }
-  
-    @include mobile {
-        h2 {
-            padding: 10px 0px 0px;
-            white-space: nowrap;
-            font-size: 26px;
-        }
-      
-        h4 {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            height: 2em;
-        }
-    }
-
-    .panel-group {
-        margin-bottom: 0;
-    }
-
-    .panel-group .panel+.panel {
-        margin: 0;
-    }
-
-    .no-datasets {
-        padding: 20px;
-    }
-
-    .panel {
-        @include border-radius(0);
-        border: 0;
-        border-bottom: 1px solid $e1;
-        box-shadow: none;
-        background: $f8;
-    
-        .panel-heading {
-            padding: 0;
-            background: $white;
-
-            a {
-                display: block;
-                padding: 10px 20px;
-                transition: background 1s ease;
-                color: $primary;
-                color: var(--primary);
-                width: 60%;
-                float: left;
-
-
-                .dataset-name {
-                    border: 0;
-                    margin: 5px 0 10px;
-                    font-size: 17px;
-                    padding: 0;
-                    line-height: 17px;
-                }
-
-                p {
-                    padding: 0;
-                    margin: 0;
-                    color: $aaa;
-                }
-
-                &::after {
-                    clear: both;
-                }
-
-                &::before,
-                &::after {
-                    content: ' ';
-                    display: table;
-                }
-
-                &:hover {
-                    color: $primary-hover;
-                    color: var(--primary-hover);
-                }
-
-
-            }
-            @include mobile {
-                a {
-                    width: 80.5%;
-                    
-                    border-right: 1px solid #f4f4f4;
-                }
-            }
-
-            .UPLOADING,
-            .RUNNING {
-                background-color: rgba(0, 124, 147, .1);
-            }
-
-            .REJECTED,
-            .FAILED {
-                background-color: rgba(140, 21, 21, .1);
-            }
-
-            .SUCCESS {
-                background-color: rgba(123, 196, 123, .1);
-            }
-
-            .status-container,
-            .metric-container {
-                width: auto;
-                float: right;
-                box-sizing: border-box;
-                padding: 10px 10px;
-
-                .status-wrap, .metrics-wrap {
-                    list-style: none;
-                    padding: 0;
-                    margin: 0;
-
-                    .status, .metric {
-                        display: inline-block;
-                        float: right;
-                        margin-right: 0;
-                        margin-left: 15px;
-                        width: auto;
-                        text-align: right;
-                        box-sizing: border-box;
-
-                        .dataset-status {
-                            width: 80px;
-
-                            i {
-                                margin: 0 5px 0 0;
-                            }
-                        }
-                        @include mobile {
-                            .dataset-status {
-                                display: flex;
-                                flex-wrap: wrap;
-                            }
-                        }
-                    }
-                        
-                }
-
-                .file-wrap {
-                    float: right;
-                    margin: 0 0 0 10px;
-
-                    .fileupload-btn {
-                        font-size: 10px;
-                        padding: 0 5px;
-                        margin-top: 1px;
-                    }
-                }
-                
-                @include mobile {
-                    .metrics-wrap { 
-                        display: flex;
-                        position: fixed;
-                        flex-wrap: wrap;
-                        left: 77%;
-                        padding: 0px 0px 0px 1%;
-                    }
-                }
-            }
-
-            .metric-container {
-                min-width: 5%;
-            }
-
-            .meta-container {
-                .date {
-                    float: none;
-                    margin: 0;
-                    color: $c-90;
-                    font-size: 10px;
-                    padding: 0;
-                    line-height: 15px;
-                    text-align: left;
-                    text-transform: uppercase;
-
-                    .name {
-                        color: $c-33;
-                        text-transform: none;
-                        font-size: 12px;
-                    }
-
-                    .time-ago {
-                        color: $c-33;
-                    }
-                }
-                @include mobile {
-                    .date {
-                        display: none;
-                    }
-                }
-            }
-            @include mobile {
-                .metric-container {
-                    width: auto;
-                    float: none;
-                    box-sizing: border-box;
-                    padding: 10px 2px 0px 0px;
-                    align-items: center;
-                }
-                .status-container {
-                    display:none;
-                }
-            }
-        }
-    
-        // Dataset Dashboard Status
-        .minimal-summary {
-            display: flex;
-            width: 100%;
-            padding: 0;
-            border-top: 1px solid $f4;
-            .summary-data {
-                display: inline-flex;
-                padding: 5px 20px;
-                font-size: 12px;
-                line-height: 12px;
-                color: $c-33;
-                text-align: left;
-                border-right: 1px solid $f4;
-
-
-                    &:last-child {
-                        border: 0;
-                    }
-
-                    b,
-                    strong {
-                        text-transform: uppercase;
-                        color: $c-90;
-                        font-size: 10px;
-                        line-height: 13px;
-                    }
-            }
-            @include mobile {
-                .summary-data {
-                    border-right: none;
-                    border-bottom: 1px solid $f4;
-                    width: 100%;
-                    :last-child {
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                    }
-                }
-            }
-
-        }
-        @include mobile {
-            .minimal-summary {
-                position: absolute;
-                top: 45%;
-                display: inline-block;
-                white-space: pre-wrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                width: 80%;
-                border-right: 1px solid $f4;
-
-            [class='summary-data'] {
-                    display:none;
-                }
-            }
-        }
-
-        .panel-collapse {
-            .panel-body {
-                border: 0;
-                background: transparent;
-                padding: 0;
-
-                .inner {
-                    min-height: 50px;
-                    padding: 10px 20px;
-                    border-top: 1px solid $ddd;
-                }
-
-                .inner-right {
-                    height: 50px;
-                    border-top: 1px solid $ddd;
-                    margin: 0;
-                    padding: 0;
-
-                    .left {
-                        padding-left: 0;
-
-                        a {
-                            padding: 16px 20px;
-                            display: block;
-                        }
-                    }
-
-                    .right {
-                        padding-right: 0;
-                        text-align: right;
-
-                        &.delete-data {
-                            vertical-align: middle;
-                            display: block;
-                            text-align: right;
-                            font-size: 13px;
-                            text-transform: uppercase;
-                            overflow: hidden;
-                        }
-
-                        .btn-admin.warning {padding: 16px 20px;}
-                        .btn-admin.delete {height: 50px;}
-                        .btn-admin.cancel {height: 50px;}
-                    }
-                }
-            }
-        }
-
-        .panel-body {
-            padding: 0;
-        }
-    }
-    @include mobile {
-        .panel {
-            border: 1px solid $e1;
-        }
-    }
-}
-
-.search-group {
-    display: block;
-    padding: 0px 20px;
-    .btn-blue {
-        height: 44px;
-        width: auto;
-        padding: 10px 13px;
-        margin-left: 5px;
-        margin-bottom: 1px;
-    }
-}
-
-.datasets {
-    .search-group {
-        float: right;
-    }
-}
-
-@include mobile {
-    .desktop {
-        display: none;
-    }
-    .search-group {
-        white-space: nowrap;
-        padding: 0;
-    }
-    .datasets {
-        .search-group {
-            float: none;
-        }
-    }
-}