From 3965061bdedae4d05a03e3e2b731ba666ec0bc83 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 17:01:08 +0200 Subject: [PATCH] CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. --- src/styles/base.sass | 1241 +------------------------ src/styles/blog.sass | 17 + src/styles/components/_alerts.sass | 72 ++ src/styles/components/_base.sass | 32 + src/styles/components/_buttons.sass | 14 + src/styles/components/_card.sass | 23 + src/styles/components/_checkbox.sass | 8 + src/styles/components/_flyout.sass | 25 + src/styles/components/_footer.sass | 108 +++ src/styles/components/_forms.sass | 132 +++ src/styles/components/_inputs.sass | 54 ++ src/styles/components/_jumbotron.sass | 25 + src/styles/components/_navbar.sass | 364 ++++++++ src/styles/components/_overlay.sass | 75 ++ src/styles/components/_popover.sass | 26 + src/styles/components/_search.sass | 92 ++ src/styles/components/_shortcode.sass | 6 + src/styles/components/_statusbar.sass | 21 + src/styles/components/_tooltip.sass | 20 + 19 files changed, 1135 insertions(+), 1220 deletions(-) create mode 100644 src/styles/components/_alerts.sass create mode 100644 src/styles/components/_base.sass create mode 100644 src/styles/components/_buttons.sass create mode 100644 src/styles/components/_card.sass create mode 100644 src/styles/components/_checkbox.sass create mode 100644 src/styles/components/_flyout.sass create mode 100644 src/styles/components/_footer.sass create mode 100644 src/styles/components/_forms.sass create mode 100644 src/styles/components/_inputs.sass create mode 100644 src/styles/components/_jumbotron.sass create mode 100644 src/styles/components/_navbar.sass create mode 100644 src/styles/components/_overlay.sass create mode 100644 src/styles/components/_popover.sass create mode 100644 src/styles/components/_search.sass create mode 100644 src/styles/components/_shortcode.sass create mode 100644 src/styles/components/_statusbar.sass create mode 100644 src/styles/components/_tooltip.sass diff --git a/src/styles/base.sass b/src/styles/base.sass index 64f93ec9..9eeaeeb5 100644 --- a/src/styles/base.sass +++ b/src/styles/base.sass @@ -7,1223 +7,24 @@ @import _comments @import _error - -html - height: 100% - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - -body - height: 100% - font: - family: $font-body, sans-serif - size: $font-size - color: $color-text-dark - background-color: $color-background - - +media-sm - width: 100% - max-width: 100% - min-width: auto - - +media-xs - width: 100% - max-width: 100% - min-width: auto - -h1, h2, h3, h4, h5 - font: - family: $font-body - weight: 300 - -a - color: $color-primary-dark - &:hover - color: $color-primary - -.container - +media-xs - max-width: 100% - min-width: auto - padding: - left: 0 - right: 0 - - &.box - +container-box - -.container-page - background-color: $color-background - -.page-content - position: relative - flex: 1 - .container-box - +container-box - - -.navbar+.page-content - padding-top: $navbar-height - -.alert+.navbar+.page-content - padding-top: 0 - -.alert - display: block - position: relative - z-index: 16 - width: 100% - margin-bottom: 0 - text-align: center - padding: 15px 20px - border-radius: 0 - border-bottom: thin solid rgba(black, .1) - - // overriden by alert types - color: $color-text-dark - background-color: $color-background - - +clearfix - - &.alert-danger, - &.alert-error - background-color: lighten($color-danger, 35%) - color: $color-danger - .alert-icon, .close - color: $color-danger - - &.alert-warning - background-color: lighten($color-warning, 20%) - color: darken($color-warning, 20%) - .alert-icon, .close - color: darken($color-warning, 20%) - - &.alert-success - background-color: lighten($color-success, 45%) - color: $color-success - - .alert-icon, .close - color: $color-success - - &.alert-info - background-color: lighten($color-info, 30%) - color: darken($color-info, 10%) - .alert-icon, .close - color: darken($color-info, 10%) - - button.close - background: none - border: none - opacity: .5 - position: absolute - top: 5px - right: 10px - padding: 10px - - &:hover - opacity: 1 - - i - font-size: .8em - - i.alert-icon - &:before - font-family: "pillar-font" - padding-right: 10px - - &.success:before - content: '\e801' - &.info:before - content: "\e80c" - &.warning:before - content: "\e80b" - &.danger:before, - &.error:before - content: "\e83d" - - -/* When there's an alert, disable the fixed top */ -.alert+.navbar-fixed-top - position: relative - margin-bottom: 0 - - &+.container - padding-top: 0 - - -/* Navigation */ -header.navbar-header - position: relative - margin: 0 - height: 100% - z-index: 1 // to be on top of the overlay - - .navbar-toggle - color: white - float: none - margin: 5px 0 0 10px - - i - margin: 0 - -.navbar-overlay - bottom: 0 - display: none - left: 0 - height: 100% - position: absolute - right: 0 - top: 0 - transition: background-color 350ms ease-in-out - width: 100% - z-index: 0 - - &+.navbar-container - .search-input - +media-lg - border: thin solid rgba(white, .2) - - #cloud-search, .tt-hint - &::placeholder - color: rgba(white, .8) - - border: thin solid transparent - border-radius: 3px - margin: 8px 0 - - &.is-active - background-color: $color-background-nav - text-shadow: none - - &+.navbar-container - .search-input - +media-sm - background-color: darken($color-background-nav, 6%) - +media-md - background-color: darken($color-background-nav, 6%) - +media-lg - border: thin solid transparent - background-color: darken($color-background-nav, 6%) - - #cloud-search, .tt-hint - &::placeholder - color: rgba(white, .5) - - +media-lg - display: block - - -.navbar-container - align-items: center - display: flex - width: 100% - - .navbar-collapse - +media-xs - padding: 0 - width: 100% - max-height: initial // overrides bs, we don't have many items - - &.show-notifications - display: block - - li - display: none - &.nav-notifications - display: block - position: absolute - top: 7px - left: 0 - width: 100% - z-index: $z-index-base - - #notifications - padding: 0 10px - - -nav - &.navbar - border-radius: 0 - left: 0 - position: fixed - right: 0 - top: 0 - - -nav.navbar, -nav.sidebar - z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */ - border: none - display: flex - align-items: center - background-color: $color-background-nav - - nav - margin-left: auto - margin-right: 0 - - .navbar-nav - margin-right: 0 - +media-xs - margin: 0 - width: 100% - - li - user-select: none - - a.navbar-item - align-items: center - color: $color-text-light-secondary - display: flex - height: $navbar-height - transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out - user-select: none - - +media-sm - padding-left: 10px - padding-right: 10px - - &:hover, &:focus - color: $color-text-light - background-color: initial - box-shadow: inset 0 -3px 0 $color-primary - - &:focus - box-shadow: inset 0 -3px 0 $color-primary - - &.active - color: $color-text-light - box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%) - - &:hover - box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%) - - .pi-angle-down - position: relative - left: 5px - - &.nav-item-sign-in - i - padding-right: 6px - font-size: 1.1em - - img.gravatar - border-radius: 999em - height: 32px - width: 32px - box-shadow: 1px 1px 0 rgba(black, .2) - position: relative - - - .special - width: 18px - height: 18px - border-radius: 999em - position: absolute - background-color: white - z-index: 2 - display: inline-block - top: 10px - left: 38px - font-size: 1.2em - box-shadow: 1px 1px 1px rgba(black, .2) - - &.subscriber - background-color: $color-success - color: white - font-size: .6em - - &.demo - background-color: $color-info - color: white - font-size: .6em - - &.none - color: $color-danger - - i - +position-center-translate - - .navbar-brand - +media-xs - padding-left: 10px - align-items: center - display: flex - color: white - padding: - top: 8px - left: 5px - right: 20px // overrides bootstrap - - &:hover - span.app-logo - transform: scale(1.1) - - span.app-logo - font-size: 1.2em - position: relative - top: 3px - transition: transform 150ms ease-in-out - - .dropdown - position: relative - min-width: 60px - - &:hover - background-color: rgba($color-background-nav, .4) - - &.open a - background-color: $color-background-nav - - span.fa-stack - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) - - ul.dropdown-menu - padding: 0 - - li - a - background-color: rgba(white, .3) - text-shadow: none - height: initial - font: - family: $font-body - size: .9em - padding: 5px 15px 5px 5px - color: rgba($color-text, .8) - - &:hover - color: $color-primary - box-shadow: none - - &.subitem - font-size: .8em - padding-top: 0 - text-transform: initial - - i - width: 35px - text-align: center - - &.subscription-status - padding: - top: 10px - bottom: 10px - - transition: opacity 150ms ease-in-out - opacity: 1 - - &:hover - opacity: .8 - - a - text-transform: initial - - &.none a - color: $color-danger - &.subscriber a - color: $color-success - - &.demo a - color: $color-info - - span.info - display: block - - span.renew - display: block - color: $color-text-dark-primary - font-size: .9em - - - &.libraries - ul.dropdown-menu - background-color: lighten($color-background-nav, 5%) - color: white - left: 0 - right: auto - - small - padding-left: 5px - li - a - background-color: transparent - color: $color-text-light-primary - - &:hover - background-color: lighten($color-background-nav, 15%) - - &:last-child a - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - - &.disabled a - color: $color-text-dark-primary - cursor: default - - -nav.sidebar - ul li.nav-item-sign-in a.navbar-item - font-size: .8em - - -.navbar-backdrop-container - width: 100% - height: 100% - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - - img - display: none - position: fixed - width: 100% - align-self: flex-start - +media-md - display: block - +media-lg - display: block - - -.navbar-backdrop - z-index: 0 - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - - width: 100% - height: 100% - background: - size: 100% - position: 0 0 - repeat: no-repeat - color: transparent - image: url(https://cloud.blender.org/static/assets/img/backgrounds/pattern_02_blur.jpg) - - filter: none - - &.project - display: none - +media-lg - display: block - left: -10px - width: 105% - &.blog - display: none - +media-lg - display: block - left: -10px - width: 105% - +media-md - display: block - left: -10px - width: 105% - - -.navbar-backdrop-overlay - position: absolute - top: 0 - left: 0 - width: 100% - height: $navbar-backdrop-height - background: linear-gradient(to bottom, rgba($color-background, 0) 25%, rgba($color-background,0.5) 50%, rgba($color-background,1) 100%) - - -/* Global, we want all menus to look like this */ -ul.dropdown-menu - background-color: $color-background-light - border: none - box-shadow: 0 10px 25px rgba(black, .1) - user-select: none - - .divider - background-color: rgba(black, .1) - -nav .dropdown:hover ul.dropdown-menu - display: block - -.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu - margin-top: 0 - - -/* FOOTER */ -#footer-container - position: relative - background-color: $color-background - - .row - +media-xs - margin: 0 - -/* Footer Navigation */ -footer - font-size: .75em - padding: 0 0 10px 0 - a - color: $color-text-dark-primary - - &:hover - color: $color-primary - - ul.links - float: left - padding: 0 - margin: 0 - list-style-type: none - - li - padding: 0 15px 0 0 - margin: 0 - float: left - - #hop - display: flex - align-items: center - justify-content: center - visibility: hidden - position: fixed - right: 25px - bottom: 25px - z-index: 999 - cursor: pointer - opacity: 0 - background: $color-background-light - width: 32px - height: 32px - border-radius: 50% - color: $color-text-dark-secondary - font-size: 2em - box-shadow: 0 0 15px rgba(black, .2) - transform: scale(0.5) - transition: all 150ms ease-in-out - - &:hover - transform: scale(1.2) - background-color: $color-background-nav - - &.active - visibility: visible - opacity: 1 - transform: scale(1) - - -#footer-navigation - font-size: .85em - margin-bottom: 5px - color: lighten($color-text, 30%) - border-top: thick solid lighten($color-text, 60%) - padding: - top: 15px - bottom: 15px - - h4 - color: lighten($color-text, 8%) - margin-bottom: 10px - - a - color: $color-text-dark-primary - - ul - position: relative - margin: 0 - padding: 0 0 10px 0 - list-style-type: none - - li - position: relative - padding: 0 - margin: 0 - - a - color: lighten($color-text, 35%) - - &:hover - color: $color-primary - - .footer-links - i - font-size: 80% - position: absolute - left: -14px - top: 20% - - .special - padding: - top: 10px - bottom: 15px - font-size: .9em - border-left: thin solid darken($color-background, 20%) - - - img - max-width: 100% - opacity: .6 - - ul.footer-social - width: 100% - text-align:center - margin: 0 auto - display: flex - align-items: center - justify-content: space-around - - li - display: inline-block - padding: 30px 0 - - i - font-size: 3em - - -.btn-outline - background-color: transparent - border-width: 1px - transition: background-color .1s - - &:focus, &:active - box-shadow: none - -.btn-empty - background-color: transparent - border-color: transparent - - &:focus, &:active - box-shadow: none - - -.tooltip - transition: opacity 50ms ease-in-out - &.in - opacity: 1 - - .tooltip-inner - max-width: auto - white-space: nowrap - background-color: $color-background-nav-light - color: $color-text-light-primary - border-radius: 3px - - &.top .tooltip-arrow - border-top-color: $color-background-nav-light - &.bottom .tooltip-arrow - border-bottom-color: $color-background-nav-light - &.left .tooltip-arrow - border-left-color: $color-background-nav-light - &.right .tooltip-arrow - border-right-color: $color-background-nav-light - -.popover - background-color: lighten($color-background-nav, 5%) - border-radius: 3px - box-shadow: 1px 1px 2px rgba(black, .2) - border: thin solid lighten($color-background-nav, 10%) - - &.in - opacity: 1 - - .popover-title - background-color: lighten($color-background-nav, 10%) - border-bottom: thin solid lighten($color-background-nav, 3%) - color: $color-text-light-primary - font-family: $font-body - - .popover-content - color: $color-text-light - font-size: .9em - - &.top .arrow:after - border-top-color: lighten($color-background-nav, 5%) - &.bottom .arrow:after - border-bottom-color: lighten($color-background-nav, 5%) - &.left .arrow:after - border-left-color: lighten($color-background-nav, 5%) - &.right .arrow:after - border-right-color: lighten($color-background-nav, 5%) - -/* Inputs */ -input, input.form-control, -textarea, textarea.form-control, -select, select.form-control - +input-generic - -label, label.control-label - +label-generic - -select, select.form-control - border-top-left-radius: 3px - border-top-right-radius: 3px - background-color: $color-background-light - - option - background-color: white - -input.fileupload - background-color: transparent - display: block - margin-top: 10px - -textarea - resize: vertical - -button, .btn - +button($color-text-dark-secondary, $color-background, false) - - &-success - +button($color-success, $color-success, false) - &-warning - +button($color-warning, $color-warning, false) - &-danger - +button($color-danger, $color-danger, false) - &-info - +button($color-info, $color-info, false) - - - &.disabled - +button($color-background-dark, $color-background, false) - background-color: $color-background-light !important - border-color: $color-background-dark !important - color: $color-text !important - opacity: .5 !important - pointer-events: none !important - text-shadow: none !important - user-select: none !important - -.input-group-flex - display: flex - -.input-group-separator - margin: 10px 0 - border-top: thin solid $color-background - -/* File Upload forms */ -.fieldlist - list-style: none - padding: 0 - margin: 10px 0 0 0 - - li.fieldlist-item - background-color: $color-background-light - border: thin solid $color-background - border-left: 3px solid $color-primary - border-top-right-radius: 3px - border-bottom-right-radius: 3px - - margin-bottom: 10px - padding: 10px - +clearfix - - .form-group - margin-bottom: 0 !important // override bs - width: 100% - - input.form-control - background-color: white !important - padding: 0 10px !important - border: thin solid $color-background-dark !important - - div[class$="slug"] - width: 50% - float: left - display: flex - align-items: center - - label - margin-right: 10px - - .fieldlist-action-button - +button($color-success, 3px) - margin: 0 0 0 10px - padding: 5px 10px - text-transform: initial - -.form-upload-file - margin-bottom: 10px - display: flex - flex-direction: column - - .form-upload-progress - margin-top: 10px - - .form-upload-progress-bar - margin-top: 5px - background-color: $color-success - height: 5px - min-width: 0 - border-radius: 3px - - &.progress-uploading - background-color: hsl(hue($color-success), 80%, 65%) !important - - &.progress-processing - +stripes($color-success, lighten($color-success, 15%), -45deg, 25px) - +stripes-animate - animation-duration: 1s - - &.progress-error - background-color: $color-danger !important - - .preview-thumbnail - width: 50px - height: 50px - min-width: 50px - min-height: 50px - margin-right: 10px - margin-top: 5px - border-radius: 3px - background-color: $color-background - - .form-upload-file-meta-container - display: flex - - .form-upload-file-meta - list-style: none - padding: 0 - margin: 0 - width: 100% - display: flex - flex-wrap: wrap - flex: 1 - - li - display: inline-block - padding: 5px 10px - - &:first-child - padding-left: 0 - - &.dimensions, &.size - color: $color-text-dark-secondary - - &.delete - margin-left: auto - - &.name - +text-overflow-ellipsis - - .file_delete - color: $color-danger - - .form-upload-file-actions - list-style: none - padding: 0 - margin: 0 - display: flex - flex-wrap: wrap - - li - display: inline-block - padding: 5px 10px - - .file_delete - color: $color-danger - -.form-group - &.error - .form-control, input - border-color: $color-danger !important - - ul.error - padding: 5px 0 0 0 - margin: 0 - color: $color-danger - list-style-type: none - -.checkbox label label - padding-left: 0 - -.checkbox label input[type=checkbox] + label - transition: color 100ms ease-in-out - -.checkbox label input[type=checkbox]:checked + label - color: $color-success !important - - - -/* Flyouts (only used on notifications for now) */ -.flyout - background-color: $color-background - border-radius: 3px - border: thin solid darken($color-background, 3%) - box-shadow: 1px 2px 2px rgba(black, .2) - display: block - font-size: .9em - - & .flyout-title - cursor: default - display: block - float: left - font-size: 1.1em - font-weight: 600 - padding: 8px 10px 5px 10px - - &.notifications - max-height: 1000% - overflow-x: hidden - position: absolute - right: 0 - top: 60px - width: 420px - z-index: 9999 - - -/* Font aliases */ -.pi /* blank item with the right spacing */ - &:after - content: '' - font-family: "pillar-font" - font-style: normal - font-weight: normal - speak: none - display: inline-block - text-decoration: inherit - width: 1em - margin-right: .2em - text-align: center - font-variant: normal - text-transform: none - line-height: 1em - margin-left: .2em - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - position: relative - - &:before - position: relative - -.pi-license-cc-zero:before - content: '\e85a' -.pi-license-cc-sa:before - content: '\e858' -.pi-license-cc-nd:before - content: '\e859' -.pi-license-cc-nc:before - content: '\e857' - -.pi-license-cc-0 - @extend .pi-license-cc-zero - position: relative - top: 1px -.pi-license-cc-by-sa - @extend .pi-license-cc-sa -.pi-license-cc-by-nd - @extend .pi-license-cc-nd -.pi-license-cc-by-nc - @extend .pi-license-cc-nc - -.pi-license-cc-by-sa, -.pi-license-cc-by-nd, -.pi-license-cc-by-nc - @extend .pi - - &:after - content: '\e807' - left: -27px - - &:before - left: 27px - -#search-overlay - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - width: 100% - height: 100% - pointer-events: none - visibility: hidden - opacity: 0 - z-index: $z-index-base + 4 - transition: opacity 150ms ease-in-out - - &.active - opacity: 1 - visibility: visible - background-color: rgba($color-background-nav, .7) - -.search-input - +media-lg - max-width: 350px - +media-md - max-width: 350px - +media-sm - max-width: 120px - +media-xs - display: block - margin: 0 10px - position: absolute - z-index: $z-index-base - right: 5px - position: relative - float: left - padding: 0 - margin: 0 - - - .search-icon - position: absolute - color: white - top: 4px - left: 10px - cursor: pointer - - &:after - opacity: 0 - content: 'Use advanced search...' - font-style: normal - background: darken($color-background-nav, 5%) - color: $color-text-light-primary - box-shadow: 1px 1px 3px rgba(black, .4) - padding: 3px 10px - font-size: .85em - border-radius: 3px - top: 30px - left: -10px - width: 150px - position: absolute - transition: top 150ms ease-in-out, opacity 150ms ease-in-out - pointer-events: none - - &:hover - &:after - opacity: 1 - top: 35px - - - #cloud-search, .tt-hint - +text-overflow-ellipsis - border: thin solid $color-background-nav-light - border-radius: 3px - color: white - font: - size: 1em - weight: 400 - family: $font-body - margin: 0 - min-height: 32px - outline: none - padding: 0 20px 0 40px - transition: border 100ms ease-in-out - - &:focus - background-color: $color-background-nav-light - outline: none - - &::placeholder - color: rgba(white, .5) - transition: color 150ms ease-in-out - - &:hover - &::placeholder - color: rgba(white, .6) - -#page-overlay - background-color: rgba(black, .8) - position: fixed - top: 0 - bottom: 0 - right: 0 - left: 0 - z-index: $z-index-base + 15 - visibility: hidden - opacity: 0 - transition: opacity 150ms ease-in-out - - display: flex - align-items: center - justify-content: center - - img - user-select: none - display: block - max-height: 96% - max-width: 96% - z-index: 0 - - box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5) - p.caption - position: absolute - bottom: 1% - - &.active - visibility: visible - opacity: 1 - - .no-preview - user-select: none - z-index: 0 - color: $color-text-light-secondary - - .nav-prev, .nav-next - display: block - font: - family: 'pillar-font' - size: 2em - height: 80% - width: 50px - cursor: pointer - color: $color-text-light-secondary - z-index: 1 - +position-center-translate - - &:hover - color: $color-text-light - - &:before, &:after - +position-center-translate - - .nav-prev - left: 50px - &:before - content: '\e839' - - .nav-next - left: initial - right: 0 - &:before - content: '\e83a' - - - &.video - .video-embed - +position-center-translate - position: fixed - - iframe - width: 853px - height: 480px - -#status-bar - opacity: 0 - transition: all 250ms ease-in-out - - i - margin-right: 5px - - &.info - color: $color-info - &.error - color: $color-danger - &.warning - color: $color-warning - &.success - color: $color-success - &.default - color: $color-text-light - - &.active - opacity: 1 - -p.shortcode.nocap - padding: 0.6em 3em - font-size: .8em - color: $color-text-dark-primary - background-color: $color-background-dark - border-radius: 3px +@import components/base +@import components/alerts +@import components/navbar +@import components/footer +@import components/shortcode +@import components/statusbar +@import components/search +@import components/flyout +@import components/forms +@import components/inputs +@import components/buttons +@import components/popover +@import components/tooltip +@import components/checkbox +@import components/overlay + +/* Top level, standalone stylesheets (not starting with _ so not meant for importing) + * should not have pure styling here. + * They should be imported as components/modules. + * e.g: @import _notifications + */ diff --git a/src/styles/blog.sass b/src/styles/blog.sass index 42970519..ff84c52e 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -2,10 +2,27 @@ @import _config @import _utils +@import _apps_base @import _comments @import _error @import _search +@import components/base +@import components/alerts +@import components/navbar +@import components/footer +@import components/shortcode +@import components/statusbar +@import components/search +@import components/flyout +@import components/forms +@import components/inputs +@import components/buttons +@import components/popover +@import components/tooltip +@import components/checkbox +@import components/overlay + .container-fluid.blog padding: 0 diff --git a/src/styles/components/_alerts.sass b/src/styles/components/_alerts.sass new file mode 100644 index 00000000..2877b4e9 --- /dev/null +++ b/src/styles/components/_alerts.sass @@ -0,0 +1,72 @@ +.alert + margin-bottom: 0 + text-align: center + padding: 10px 20px + z-index: 16 + + // overriden by alert types + color: $color-text-dark + background-color: $color-background + + &.alert-danger, + &.alert-error + background-color: lighten($color-danger, 35%) + color: $color-danger + .alert-icon, .close + color: $color-danger + + &.alert-warning + background-color: lighten($color-warning, 20%) + color: darken($color-warning, 20%) + .alert-icon, .close + color: darken($color-warning, 20%) + + &.alert-success + background-color: lighten($color-success, 45%) + color: $color-success + + .alert-icon, .close + color: $color-success + + &.alert-info + background-color: lighten($color-info, 30%) + color: darken($color-info, 10%) + .alert-icon, .close + color: darken($color-info, 10%) + + button.close + position: absolute + right: 10px + + i + font-size: .8em + + i.alert-icon + &:before + font-family: "pillar-font" + padding-right: 10px + + &.success:before + content: '\e801' + &.info:before + content: "\e80c" + &.warning:before + content: "\e80b" + &.danger:before, + &.error:before + content: "\e83d" + + +/* When there's an alert, disable the fixed top */ +.alert+.navbar-fixed-top + position: relative + margin-bottom: 0 + + &+.container + padding-top: 0 + +.alert+.navbar + position: relative + +.alert+.navbar+.page-content + padding-top: 0 diff --git a/src/styles/components/_base.sass b/src/styles/components/_base.sass new file mode 100644 index 00000000..027f1b92 --- /dev/null +++ b/src/styles/components/_base.sass @@ -0,0 +1,32 @@ +body + height: 100% + + +media-sm + width: 100% + max-width: 100% + min-width: auto + + +media-xs + width: 100% + max-width: 100% + min-width: auto + +.container + +media-xs + max-width: 100% + min-width: auto + padding: + left: 0 + right: 0 + + &.box + +container-box + +.container-page + background-color: white + +.page-content + position: relative + flex: 1 + .container-box + +container-box diff --git a/src/styles/components/_buttons.sass b/src/styles/components/_buttons.sass new file mode 100644 index 00000000..ff0e0163 --- /dev/null +++ b/src/styles/components/_buttons.sass @@ -0,0 +1,14 @@ +.btn-outline + background-color: transparent + border-width: 1px + transition: background-color .1s + + &:focus, &:active + box-shadow: none + +.btn-empty + background-color: transparent + border-color: transparent + + &:focus, &:active + box-shadow: none diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass new file mode 100644 index 00000000..edb993fc --- /dev/null +++ b/src/styles/components/_card.sass @@ -0,0 +1,23 @@ +.card-deck + // Custom, as of bootstrap 4.1.3 there is no way to do this. + &.card-3-columns + .card + min-width: 30% + max-width: 30% + + +.card-padless + .card + border: none + + .card-body + padding: 20px 0 + +.card-fade + img + opacity: .8 + transition: opacity ease-in-out 150ms + + &:hover + img + opacity: 1 diff --git a/src/styles/components/_checkbox.sass b/src/styles/components/_checkbox.sass new file mode 100644 index 00000000..13d66285 --- /dev/null +++ b/src/styles/components/_checkbox.sass @@ -0,0 +1,8 @@ +.checkbox label label + padding-left: 0 + +.checkbox label input[type=checkbox] + label + transition: color 100ms ease-in-out + +.checkbox label input[type=checkbox]:checked + label + color: $color-success !important diff --git a/src/styles/components/_flyout.sass b/src/styles/components/_flyout.sass new file mode 100644 index 00000000..4e527916 --- /dev/null +++ b/src/styles/components/_flyout.sass @@ -0,0 +1,25 @@ +/* Flyouts (only used on notifications for now) */ +.flyout + background-color: $color-background + border-radius: 3px + border: thin solid darken($color-background, 3%) + box-shadow: 1px 2px 2px rgba(black, .2) + display: block + font-size: .9em + + & .flyout-title + cursor: default + display: block + float: left + font-size: 1.1em + font-weight: 600 + padding: 8px 10px 5px 10px + + &.notifications + max-height: 1000% + overflow-x: hidden + position: absolute + right: 0 + top: 60px + width: 420px + z-index: 9999 diff --git a/src/styles/components/_footer.sass b/src/styles/components/_footer.sass new file mode 100644 index 00000000..9af3ba97 --- /dev/null +++ b/src/styles/components/_footer.sass @@ -0,0 +1,108 @@ +/* FOOTER */ +#footer-container + position: relative + + .row + +media-xs + margin: 0 + +/* Footer Navigation */ +footer + font-size: .75em + padding: 0 0 10px 0 + a + color: $color-text-dark-primary + + &:hover + color: $color-primary + + ul.links + float: left + padding: 0 + margin: 0 + list-style-type: none + + li + padding: 0 15px 0 0 + margin: 0 + float: left + +#hop + display: flex + align-items: center + justify-content: center + visibility: hidden + position: fixed + right: 25px + bottom: 25px + z-index: 999 + cursor: pointer + opacity: 0 + background: $color-background-light + width: 32px + height: 32px + border-radius: 50% + color: $color-text-dark-secondary + font-size: 2em + box-shadow: 0 0 15px rgba(black, .2) + transform: scale(0.5) + transition: all 150ms ease-in-out + + &:hover + transform: scale(1.2) + background-color: $color-background-nav + + &.active + visibility: visible + opacity: 1 + transform: scale(1) + + +#footer-navigation + font-size: .85em + margin-bottom: 5px + color: lighten($color-text, 30%) + border-top: thick solid lighten($color-text, 60%) + padding: + top: 15px + bottom: 15px + + a + color: lighten($color-text, 35%) + + &:hover + color: $color-primary + + .footer-links + i + font-size: 80% + position: absolute + left: -14px + top: 20% + + .special + padding: + top: 10px + bottom: 15px + font-size: .9em + border-left: thin solid darken($color-background, 20%) + + + img + max-width: 100% + opacity: .6 + + ul.footer-social + width: 100% + text-align:center + margin: 0 auto + display: flex + align-items: center + justify-content: space-around + + li + display: inline-block + padding: 30px 0 + + i + font-size: 3em diff --git a/src/styles/components/_forms.sass b/src/styles/components/_forms.sass new file mode 100644 index 00000000..60b4b059 --- /dev/null +++ b/src/styles/components/_forms.sass @@ -0,0 +1,132 @@ +/* File Upload forms */ +.fieldlist + list-style: none + padding: 0 + margin: 10px 0 0 0 + + li.fieldlist-item + background-color: $color-background-light + border: thin solid $color-background + border-left: 3px solid $color-primary + border-top-right-radius: 3px + border-bottom-right-radius: 3px + + margin-bottom: 10px + padding: 10px + +clearfix + + .form-group + margin-bottom: 0 !important // override bs + width: 100% + + input.form-control + background-color: white !important + padding: 0 10px !important + border: thin solid $color-background-dark !important + + div[class$="slug"] + width: 50% + float: left + display: flex + align-items: center + + label + margin-right: 10px + + .fieldlist-action-button + +button($color-success, 3px) + margin: 0 0 0 10px + padding: 5px 10px + text-transform: initial + +.form-upload-file + margin-bottom: 10px + display: flex + flex-direction: column + + .form-upload-progress + margin-top: 10px + + .form-upload-progress-bar + margin-top: 5px + background-color: $color-success + height: 5px + min-width: 0 + border-radius: 3px + + &.progress-uploading + background-color: hsl(hue($color-success), 80%, 65%) !important + + &.progress-processing + +stripes($color-success, lighten($color-success, 15%), -45deg, 25px) + +stripes-animate + animation-duration: 1s + + &.progress-error + background-color: $color-danger !important + + .preview-thumbnail + width: 50px + height: 50px + min-width: 50px + min-height: 50px + margin-right: 10px + margin-top: 5px + border-radius: 3px + background-color: $color-background + + .form-upload-file-meta-container + display: flex + + .form-upload-file-meta + list-style: none + padding: 0 + margin: 0 + width: 100% + display: flex + flex-wrap: wrap + flex: 1 + + li + display: inline-block + padding: 5px 10px + + &:first-child + padding-left: 0 + + &.dimensions, &.size + color: $color-text-dark-secondary + + &.delete + margin-left: auto + + &.name + +text-overflow-ellipsis + + .file_delete + color: $color-danger + + .form-upload-file-actions + list-style: none + padding: 0 + margin: 0 + display: flex + flex-wrap: wrap + + li + display: inline-block + padding: 5px 10px + + .file_delete + color: $color-danger + +.form-group + &.error + .form-control, input + border-color: $color-danger !important + + ul.error + padding: 5px 0 0 0 + margin: 0 + color: $color-danger + list-style-type: none diff --git a/src/styles/components/_inputs.sass b/src/styles/components/_inputs.sass new file mode 100644 index 00000000..11dcd2f7 --- /dev/null +++ b/src/styles/components/_inputs.sass @@ -0,0 +1,54 @@ +/* Inputs */ +input, input.form-control, +textarea, textarea.form-control, +select, select.form-control + +input-generic + +label, label.control-label + +label-generic + +select, select.form-control + border-top-left-radius: 3px + border-top-right-radius: 3px + background-color: $color-background-light + + option + background-color: white + +input.fileupload + background-color: transparent + display: block + margin-top: 10px + +textarea + resize: vertical + +button, .btn + +button($color-text-dark-secondary, $color-background, false) + + &-success + +button($color-success, $color-success, false) + &-warning + +button($color-warning, $color-warning, false) + &-danger + +button($color-danger, $color-danger, false) + &-info + +button($color-info, $color-info, false) + + + &.disabled + +button($color-background-dark, $color-background, false) + background-color: $color-background-light !important + border-color: $color-background-dark !important + color: $color-text !important + opacity: .5 !important + pointer-events: none !important + text-shadow: none !important + user-select: none !important + +.input-group-flex + display: flex + +.input-group-separator + margin: 10px 0 + border-top: thin solid $color-background diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass new file mode 100644 index 00000000..985ed80d --- /dev/null +++ b/src/styles/components/_jumbotron.sass @@ -0,0 +1,25 @@ +// Mainly overrides bootstrap jumbotron settings +.jumbotron + background-size: cover + border-radius: 0 + padding-top: 12em + padding-bottom: 12em + + // Black-transparent gradient from left to right to better read the overlay text. + &.jumbotron-overlay + position: relative + + &:after + background-image: linear-gradient(45deg, rgba(black, .5) 25%, transparent 50%) + bottom: 0 + content: '' + left: 0 + position: absolute + right: 0 + top: 0 + + * + z-index: 1 + + h2, p + text-shadow: 1px 1px rgba(black, .2), 1px 1px 25px rgba(black, .5) diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass new file mode 100644 index 00000000..a6c846cc --- /dev/null +++ b/src/styles/components/_navbar.sass @@ -0,0 +1,364 @@ +/* Navigation */ +.navbar-overlay + bottom: 0 + display: none + left: 0 + height: 100% + position: absolute + right: 0 + top: 0 + transition: background-color 350ms ease-in-out + width: 100% + z-index: 0 + + &+.navbar-container + .search-input + +media-lg + border: thin solid rgba(white, .2) + + #cloud-search, .tt-hint + &::placeholder + color: rgba(white, .8) + + border: thin solid transparent + border-radius: 3px + margin: 8px 0 + + &.is-active + background-color: $color-background-nav + text-shadow: none + + &+.navbar-container + .search-input + +media-sm + background-color: darken($color-background-nav, 6%) + +media-md + background-color: darken($color-background-nav, 6%) + +media-lg + border: thin solid transparent + background-color: darken($color-background-nav, 6%) + + #cloud-search, .tt-hint + &::placeholder + color: rgba(white, .5) + + +media-lg + display: block + + +.navbar-container + align-items: center + display: flex + width: 100% + + .navbar-collapse + +media-xs + padding: 0 + width: 100% + max-height: initial // overrides bs, we don't have many items + + &.show-notifications + display: block + + li + display: none + &.nav-notifications + display: block + position: absolute + top: 7px + left: 0 + width: 100% + z-index: $z-index-base + + #notifications + padding: 0 10px + + +nav + &.navbar + border-radius: 0 + left: 0 + position: fixed + right: 0 + top: 0 + +.navbar-brand + padding-left: 10px + color: $color-text + + width: 120px // Blender Cloud logo width + + &:hover + color: $color-text-dark-primary + +nav.navbar, +nav.sidebar + align-items: center + background-color: $color-background-nav + border: none + display: flex + padding: 0 + z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */ + + nav + margin-left: auto + margin-right: 0 + + .navbar-nav + margin-right: 0 + +media-xs + margin: 0 + width: 100% + + li + user-select: none + position: relative + + a.navbar-item + align-items: center + color: $color-text + display: flex + user-select: none + padding: $navbar-brand-padding-y + height: 100% + transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out + + +media-sm + padding-left: 10px + padding-right: 10px + + &:hover, &:focus + color: $color-primary + background-color: transparent + box-shadow: inset 0 -3px 0 $color-primary + text-decoration: none + + &:focus + box-shadow: inset 0 -3px 0 $color-primary + + &.active + color: $color-primary + box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%) + + &:hover + box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%) + + .pi-angle-down + position: relative + left: 5px + + &.nav-item-sign-in + i + padding-right: 6px + font-size: 1.1em + + img.gravatar + border-radius: 999em + height: 32px + width: 32px + box-shadow: 1px 1px 0 rgba(black, .2) + position: relative + + + .special + width: 18px + height: 18px + border-radius: 999em + position: absolute + background-color: white + z-index: 2 + display: inline-block + top: 10px + left: 38px + font-size: 1.2em + box-shadow: 1px 1px 1px rgba(black, .2) + + &.subscriber + background-color: $color-success + color: white + font-size: .6em + + &.demo + background-color: $color-info + color: white + font-size: .6em + + &.none + color: $color-danger + + i + +position-center-translate + + .dropdown + position: relative + min-width: 60px + + // Removes angle-down icon from bootstrap, + // since we use a nicer chevron. + a:after + display: none + + span.fa-stack + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) + + ul.dropdown-menu + padding: 0 + + li + a + padding: 5px 15px 5px 5px + + &:hover + color: $color-primary + box-shadow: none + + &.subitem + font-size: .8em + padding-top: 0 + text-transform: initial + + i + width: 35px + text-align: center + + &.subscription-status + padding: + top: 10px + bottom: 10px + + transition: opacity 150ms ease-in-out + opacity: 1 + + &:hover + opacity: .8 + + a + text-transform: initial + + &.none a + color: $color-danger + &.subscriber a + color: $color-success + + &.demo a + color: $color-info + + span.info + display: block + + span.renew + display: block + color: $color-text-dark-primary + font-size: .9em + + +nav.sidebar + ul li.nav-item-sign-in a.navbar-item + font-size: .8em + + +.navbar-backdrop-container + width: 100% + height: 100% + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + + img + display: none + position: fixed + width: 100% + align-self: flex-start + +media-md + display: block + +media-lg + display: block + + +.navbar-backdrop + z-index: 0 + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + + width: 100% + height: 100% + background: + size: 100% + position: 0 0 + repeat: no-repeat + color: transparent + image: url(https://cloud.blender.org/static/assets/img/backgrounds/pattern_02_blur.jpg) + + filter: none + + &.project + display: none + +media-lg + display: block + left: -10px + width: 105% + &.blog + display: none + +media-lg + display: block + left: -10px + width: 105% + +media-md + display: block + left: -10px + width: 105% + + +.navbar-backdrop-overlay + position: absolute + top: 0 + left: 0 + width: 100% + height: $navbar-backdrop-height + background: linear-gradient(to bottom, rgba($color-background, 0) 25%, rgba($color-background,0.5) 50%, rgba($color-background,1) 100%) + + +/* Global, we want all menus to look like this */ +ul.dropdown-menu + background-color: $color-background-light + border: none + box-shadow: 0 10px 25px rgba(black, .1) + user-select: none + + .divider + background-color: rgba(black, .1) + +nav .dropdown:hover ul.dropdown-menu + display: block + +.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu + margin-top: 0 + +.navbar+.page-content + padding-top: $navbar-height + + +// Secondary navigation for +.nav-secondary + align-items: center + box-shadow: 0 2px 0 0 $color-background + + .nav-link + color: $color-text + transition: box-shadow 150ms ease-in-out + + &:hover, + &.active + box-shadow: 0 2px 0 0 $color-primary + + .nav-title + font-weight: bold + padding-right: 20px diff --git a/src/styles/components/_overlay.sass b/src/styles/components/_overlay.sass new file mode 100644 index 00000000..32d9e29d --- /dev/null +++ b/src/styles/components/_overlay.sass @@ -0,0 +1,75 @@ +#page-overlay + background-color: rgba(black, .8) + position: fixed + top: 0 + bottom: 0 + right: 0 + left: 0 + z-index: $z-index-base + 15 + visibility: hidden + opacity: 0 + transition: opacity 150ms ease-in-out + + display: flex + align-items: center + justify-content: center + + img + user-select: none + display: block + max-height: 96% + max-width: 96% + z-index: 0 + + box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5) + p.caption + position: absolute + bottom: 1% + + &.active + visibility: visible + opacity: 1 + + .no-preview + user-select: none + z-index: 0 + color: $color-text-light-secondary + + .nav-prev, .nav-next + display: block + font: + family: 'pillar-font' + size: 2em + height: 80% + width: 50px + cursor: pointer + color: $color-text-light-secondary + z-index: 1 + +position-center-translate + + &:hover + color: $color-text-light + + &:before, &:after + +position-center-translate + + .nav-prev + left: 50px + &:before + content: '\e839' + + .nav-next + left: initial + right: 0 + &:before + content: '\e83a' + + + &.video + .video-embed + +position-center-translate + position: fixed + + iframe + width: 853px + height: 480px diff --git a/src/styles/components/_popover.sass b/src/styles/components/_popover.sass new file mode 100644 index 00000000..5e6ab300 --- /dev/null +++ b/src/styles/components/_popover.sass @@ -0,0 +1,26 @@ +.popover + background-color: lighten($color-background-nav, 5%) + border-radius: 3px + box-shadow: 1px 1px 2px rgba(black, .2) + border: thin solid lighten($color-background-nav, 10%) + + &.in + opacity: 1 + + .popover-title + background-color: lighten($color-background-nav, 10%) + border-bottom: thin solid lighten($color-background-nav, 3%) + color: $color-text-light-primary + + .popover-content + color: $color-text-light + font-size: .9em + + &.top .arrow:after + border-top-color: lighten($color-background-nav, 5%) + &.bottom .arrow:after + border-bottom-color: lighten($color-background-nav, 5%) + &.left .arrow:after + border-left-color: lighten($color-background-nav, 5%) + &.right .arrow:after + border-right-color: lighten($color-background-nav, 5%) diff --git a/src/styles/components/_search.sass b/src/styles/components/_search.sass new file mode 100644 index 00000000..929ecb8d --- /dev/null +++ b/src/styles/components/_search.sass @@ -0,0 +1,92 @@ +#search-overlay + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + width: 100% + height: 100% + pointer-events: none + visibility: hidden + opacity: 0 + z-index: $z-index-base + 4 + transition: opacity 150ms ease-in-out + + &.active + opacity: 1 + visibility: visible + background-color: rgba($color-background-nav, .7) + +.search-input + +media-lg + max-width: 350px + +media-md + max-width: 350px + +media-sm + max-width: 120px + +media-xs + display: block + margin: 0 10px + position: absolute + z-index: $z-index-base + right: 5px + position: relative + float: left + padding: 0 + margin: 0 + + + .search-icon + position: absolute + color: white + top: 4px + left: 10px + cursor: pointer + + &:after + opacity: 0 + content: 'Use advanced search...' + font-style: normal + background: darken($color-background-nav, 5%) + color: $color-text-light-primary + box-shadow: 1px 1px 3px rgba(black, .4) + padding: 3px 10px + font-size: .85em + border-radius: 3px + top: 30px + left: -10px + width: 150px + position: absolute + transition: top 150ms ease-in-out, opacity 150ms ease-in-out + pointer-events: none + + &:hover + &:after + opacity: 1 + top: 35px + + + #cloud-search, .tt-hint + +text-overflow-ellipsis + border: thin solid $color-background + border-radius: 3px + font: + size: 1em + weight: 400 + margin: 0 + min-height: 32px + outline: none + padding: 0 20px 0 40px + transition: border 100ms ease-in-out + + &:focus + box-shadow: none + border: none + + &::placeholder + color: rgba($color-text, .5) + transition: color 150ms ease-in-out + + &:hover + &::placeholder + color: rgba($color-text, .6) diff --git a/src/styles/components/_shortcode.sass b/src/styles/components/_shortcode.sass new file mode 100644 index 00000000..aa807f24 --- /dev/null +++ b/src/styles/components/_shortcode.sass @@ -0,0 +1,6 @@ +p.shortcode.nocap + padding: 0.6em 3em + font-size: .8em + color: $color-text-dark-primary + background-color: $color-background-dark + border-radius: 3px diff --git a/src/styles/components/_statusbar.sass b/src/styles/components/_statusbar.sass new file mode 100644 index 00000000..02d872d9 --- /dev/null +++ b/src/styles/components/_statusbar.sass @@ -0,0 +1,21 @@ +#status-bar + opacity: 0 + transition: all 250ms ease-in-out + + i + margin-right: 5px + + &.info + color: $color-info + &.error + color: $color-danger + &.warning + color: $color-warning + &.success + color: $color-success + &.default + color: $color-text-light + + &.active + opacity: 1 + diff --git a/src/styles/components/_tooltip.sass b/src/styles/components/_tooltip.sass new file mode 100644 index 00000000..3a317919 --- /dev/null +++ b/src/styles/components/_tooltip.sass @@ -0,0 +1,20 @@ +.tooltip + transition: opacity 50ms ease-in-out + &.in + opacity: 1 + + .tooltip-inner + max-width: auto + white-space: nowrap + background-color: $color-background-nav-light + color: $color-text-light-primary + border-radius: 3px + + &.top .tooltip-arrow + border-top-color: $color-background-nav-light + &.bottom .tooltip-arrow + border-bottom-color: $color-background-nav-light + &.left .tooltip-arrow + border-left-color: $color-background-nav-light + &.right .tooltip-arrow + border-right-color: $color-background-nav-light