diff --git a/app/modules/attachments/attachment-gallery.scss b/app/modules/attachments/attachment-gallery.scss index adeb7276..0be640e5 100644 --- a/app/modules/attachments/attachment-gallery.scss +++ b/app/modules/attachments/attachment-gallery.scss @@ -14,7 +14,7 @@ } } .attachment-name { - @extend %light; + @include font-type(light); @include ellipsis(175px); display: inline-block; } diff --git a/app/modules/attachments/attachments.scss b/app/modules/attachments/attachments.scss index 23f6c3c3..16e465cf 100644 --- a/app/modules/attachments/attachments.scss +++ b/app/modules/attachments/attachments.scss @@ -25,8 +25,8 @@ justify-content: space-between; min-height: 36px; .attachments-title { - @extend %medium; - @extend %bold; + @include font-type(bold); + @include font-size(medium); color: $grayer; line-height: 36px; padding: 0 1rem; @@ -70,8 +70,8 @@ } } .size-info { - @extend %light; - @extend %small; + @include font-size(small); + @include font-type(light); color: $gray; padding-left: 1rem; } @@ -81,8 +81,8 @@ } .attachments-empty { - @extend %large; - @extend %bold; + @include font-size(large); + @include font-type(bold); border: 3px dashed $whitish; color: $gray-light; margin-top: .5rem; @@ -91,10 +91,10 @@ } .single-attachment { - @extend %small; + @include font-size(small); background: rgba($white, .9); .attachment-name { - @extend %bold; + @include font-type(bold); padding-right: 1rem; svg { fill: $gray; @@ -109,7 +109,7 @@ } .more-attachments { - @extend %small; + @include font-size(small); border-bottom: 1px solid $gray-light; display: block; padding: 1rem 0 1rem 1rem; diff --git a/app/modules/components/live-announcement/live-announcement.scss b/app/modules/components/live-announcement/live-announcement.scss index f1b7964e..2a615b3f 100644 --- a/app/modules/components/live-announcement/live-announcement.scss +++ b/app/modules/components/live-announcement/live-announcement.scss @@ -43,15 +43,15 @@ width: 100%; } .title { - @extend %bold; - @extend %larger; + @include font-type(bold); + @include font-size(larger); color: $tribe-secondary; margin-bottom: .5rem; } .warning { color: $tribe-secondary; a { - @extend %bold; + @include font-type(bold); color: $tribe-secondary; } } diff --git a/app/modules/discover/components/discover-search-bar/discover-search-bar.scss b/app/modules/discover/components/discover-search-bar/discover-search-bar.scss index 888a06b8..f94e784c 100644 --- a/app/modules/discover/components/discover-search-bar/discover-search-bar.scss +++ b/app/modules/discover/components/discover-search-bar/discover-search-bar.scss @@ -8,12 +8,12 @@ margin: 0 auto; } .title { - @extend %xxlarge; + @include font-size(xxlarge); margin-bottom: 0; } .project-number { - @extend %light; - @extend %large; + @include font-type(light); + @include font-size(large); color: $primary; } form { diff --git a/app/modules/discover/components/discover-search-list-header/discover-search-list-header.scss b/app/modules/discover/components/discover-search-list-header/discover-search-list-header.scss index 6f265a9a..2633faed 100644 --- a/app/modules/discover/components/discover-search-list-header/discover-search-list-header.scss +++ b/app/modules/discover/components/discover-search-list-header/discover-search-list-header.scss @@ -10,8 +10,8 @@ margin-right: .25rem; } .title { - @extend %bold; - @extend %larger; + @include font-type(bold); + @include font-size(larger); text-transform: uppercase; } h2 { @@ -57,7 +57,7 @@ animation: dropdownFade .2s; } .results { - @extend %small; + @include font-size(small); color: $red-light; display: block; padding: .5rem 1rem; diff --git a/app/modules/discover/components/featured-projects/featured-projects.scss b/app/modules/discover/components/featured-projects/featured-projects.scss index 2efdce61..d2d54dd9 100644 --- a/app/modules/discover/components/featured-projects/featured-projects.scss +++ b/app/modules/discover/components/featured-projects/featured-projects.scss @@ -3,8 +3,8 @@ .featured-projects { @include centered; .title { - @extend %bold; - @extend %larger; + @include font-type(bold); + @include font-size(larger); color: $grayer; text-align: center; } diff --git a/app/modules/discover/components/highlighted/highlighted.scss b/app/modules/discover/components/highlighted/highlighted.scss index d82d03ed..0c9b0a0e 100644 --- a/app/modules/discover/components/highlighted/highlighted.scss +++ b/app/modules/discover/components/highlighted/highlighted.scss @@ -49,8 +49,8 @@ } } .title { - @extend %bold; - @extend %larger; + @include font-type(bold); + @include font-size(larger); color: $grayer; display: inline-block; margin: 0; @@ -85,7 +85,7 @@ margin: 1rem auto; } span { - @extend %light; + @include font-type(light); color: $gray; display: block; } @@ -122,7 +122,7 @@ } } li { - @extend %small; + @include font-size(small); color: $white; cursor: pointer; min-width: 8rem; @@ -161,8 +161,8 @@ justify-content: space-between; } .project-title { - @extend %large; - @extend %text; + @include font-size(large); + @include font-type(text); display: inline-block; margin-bottom: .5rem; a { @@ -173,7 +173,7 @@ } } .project-description { - @extend %small; + @include font-size(small); color: $gray; margin-bottom: 0; } @@ -188,7 +188,7 @@ } } .statistic { - @extend %small; + @include font-size(small); color: $gray-light; display: inline-block; margin-right: .5rem; diff --git a/app/modules/discover/discover-search/discover-search.scss b/app/modules/discover/discover-search/discover-search.scss index df39297e..fa6eee89 100644 --- a/app/modules/discover/discover-search/discover-search.scss +++ b/app/modules/discover/discover-search/discover-search.scss @@ -82,7 +82,7 @@ } } .statistic { - @extend %small; + @include font-size(small); color: $gray-light; display: inline-block; margin-right: .5rem; @@ -114,8 +114,8 @@ margin-bottom: 1rem; } .title { - @extend %large; - @extend %light; + @include font-size(large); + @include font-type(light); margin: 0; text-transform: uppercase; } diff --git a/app/modules/external-apps/external-app.scss b/app/modules/external-apps/external-app.scss index 9a387368..17f5ff08 100644 --- a/app/modules/external-apps/external-app.scss +++ b/app/modules/external-apps/external-app.scss @@ -26,10 +26,10 @@ margin: 0; } h3 { - @extend %large; + @include font-size(large); } a { - @extend %xsmall; + @include font-size(x-small); display: block; } } @@ -47,7 +47,7 @@ } p { - @extend %xsmall; + @include font-size(x-small); } } .user-card { @@ -67,7 +67,7 @@ display: block; } .cancel { - @extend %small; + @include font-size(small); display: block; margin-top: .5rem; text-align: left; diff --git a/app/modules/home/home.scss b/app/modules/home/home.scss index 9f488e10..c1fd038a 100644 --- a/app/modules/home/home.scss +++ b/app/modules/home/home.scss @@ -11,8 +11,8 @@ display: block; } .title-bar { - @extend %light; - @extend %larger; + @include font-type(light); + @include font-size(larger); align-content: center; background: $whitish; display: flex; diff --git a/app/modules/home/projects/home-project-list.scss b/app/modules/home/projects/home-project-list.scss index fefe9aa0..a7114326 100644 --- a/app/modules/home/projects/home-project-list.scss +++ b/app/modules/home/projects/home-project-list.scss @@ -35,8 +35,8 @@ width: 100%; } p { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); } .create-project-button { display: block; diff --git a/app/modules/home/working-on/empty.scss b/app/modules/home/working-on/empty.scss index cf8c5c3c..aa10d7a3 100644 --- a/app/modules/home/working-on/empty.scss +++ b/app/modules/home/working-on/empty.scss @@ -2,7 +2,7 @@ .watching-empty { margin-bottom: 4rem; p { - @extend %light; + @include font-type(light); margin: 2rem 9rem 1rem; text-align: center; } diff --git a/app/modules/navigation-bar/navigation-bar.scss b/app/modules/navigation-bar/navigation-bar.scss index 5d0796a2..8cdda49f 100644 --- a/app/modules/navigation-bar/navigation-bar.scss +++ b/app/modules/navigation-bar/navigation-bar.scss @@ -136,7 +136,7 @@ $dropdown-width: 350px; } } .new { - @extend %small; + @include font-size(small); background: $red-light; float: right; margin-left: auto; diff --git a/app/modules/profile/profile.scss b/app/modules/profile/profile.scss index a2b22bb7..97b6b7f5 100644 --- a/app/modules/profile/profile.scss +++ b/app/modules/profile/profile.scss @@ -27,7 +27,7 @@ margin: 10% auto; width: 3rem; img { - @extend %loading-spinner; + @include loading-spinner; max-height: 3rem; max-width: 3rem; } diff --git a/app/modules/profile/styles/profile-bar.scss b/app/modules/profile/styles/profile-bar.scss index d7982289..e7f62a9d 100644 --- a/app/modules/profile/styles/profile-bar.scss +++ b/app/modules/profile/styles/profile-bar.scss @@ -22,8 +22,8 @@ width: 100%; } .profile-edition { - @extend %large; - @extend %light; + @include font-size(large); + @include font-type(light); background: rgba($black, .4); bottom: 0; color: $white; @@ -64,8 +64,8 @@ } } h1 { - @extend %bold; - @extend %xlarge; + @include font-type(bold); + @include font-size(xlarge); line-height: 1.2; margin-bottom: .25rem; text-transform: none; @@ -75,15 +75,15 @@ word-wrap: break-word; } h2 { - @extend %light; - @extend %larger; + @include font-type(light); + @include font-size(larger); color: $gray; line-height: 1.2; margin-bottom: 1rem; } .username { - @extend %light; - @extend %large; + @include font-type(light); + @include font-size(large); color: $gray-light; margin-bottom: 1rem; } @@ -112,20 +112,20 @@ text-align: center; } .stat-number { - @extend %xlarge; - @extend %bold; + @include font-size(xlarge); + @include font-type(bold); display: block; line-height: 1; } .stat-name { - @extend %title; - @extend %small; + @include font-type(text); + @include font-size(small); display: block; } } .profile-quote { - @extend %light; - @extend %large; + @include font-type(light); + @include font-size(large); background: url('../images/quote.png') no-repeat top left; line-height: 1.4; padding: .5rem; diff --git a/app/modules/profile/styles/profile-sidebar.scss b/app/modules/profile/styles/profile-sidebar.scss index 964b3322..edfba05a 100644 --- a/app/modules/profile/styles/profile-sidebar.scss +++ b/app/modules/profile/styles/profile-sidebar.scss @@ -1,6 +1,6 @@ .profile-sidebar { h4 { - @extend %bold; + @include font-type(bold); background: $whitish; color: $gray; margin-bottom: .5rem; @@ -13,7 +13,7 @@ } } p { - @extend %small; + @include font-size(small); color: $gray-light; } a { diff --git a/app/modules/projects/listing/styles/project-list.scss b/app/modules/projects/listing/styles/project-list.scss index f4737361..4fa8d390 100644 --- a/app/modules/projects/listing/styles/project-list.scss +++ b/app/modules/projects/listing/styles/project-list.scss @@ -8,8 +8,8 @@ margin: 2rem 0 1rem; padding: .9rem 1rem; h1 { - @extend %larger; - @extend %light; + @include font-size(larger); + @include font-type(light); margin: 0; } } @@ -45,7 +45,7 @@ margin-right: 2rem; } .help-area { - @extend %small; + @include font-size(small); color: $gray-light; width: 200px; } diff --git a/app/modules/projects/project/blocked-project.scss b/app/modules/projects/project/blocked-project.scss index c53b7d04..7db3966b 100644 --- a/app/modules/projects/project/blocked-project.scss +++ b/app/modules/projects/project/blocked-project.scss @@ -32,7 +32,7 @@ top: -.5rem; } .project-title { - @extend %larger; + @include font-size(larger); } } @@ -40,6 +40,6 @@ margin-top: 4rem; text-align: center; .project-block-title { - @extend %xlarge; + @include font-size(xlarge); } } diff --git a/app/modules/projects/transfer/transfer-project.scss b/app/modules/projects/transfer/transfer-project.scss index 21bfa791..199b08ad 100644 --- a/app/modules/projects/transfer/transfer-project.scss +++ b/app/modules/projects/transfer/transfer-project.scss @@ -13,7 +13,7 @@ justify-content: center; min-height: calc(100vh - 40px); .transfer-title { - @extend %light; + @include font-type(light); } &-detail { align-items: center; @@ -30,8 +30,8 @@ width: 4rem; } &-title { - @extend %light; - @extend %larger; + @include font-type(light); + @include font-size(larger); margin-bottom: .25rem; } &-statistics { @@ -84,7 +84,7 @@ &-options { display: flex; a { - @extend %large; + @include font-size(large); display: block; flex: 1; padding: .75rem; diff --git a/app/modules/user-timeline/user-timeline/user-timeline.scss b/app/modules/user-timeline/user-timeline/user-timeline.scss index 181109b4..54d03b71 100644 --- a/app/modules/user-timeline/user-timeline/user-timeline.scss +++ b/app/modules/user-timeline/user-timeline/user-timeline.scss @@ -11,7 +11,7 @@ .username { color: $primary; &:first-child { - @extend %bold; + @include font-type(bold); color: $gray; } } @@ -70,7 +70,7 @@ flex: 1; } a { - @extend %bold; + @include font-type(bold); } p { color: $gray-light; @@ -80,8 +80,8 @@ border: 0; padding: 0; span { - @extend %text; - @extend %medium; + @include font-type(text); + @include font-size(medium); display: inline-block; max-width: 95%; overflow: hidden; @@ -98,7 +98,7 @@ margin: 10% auto; width: 3rem; img { - @extend %loading-spinner; + @include loading-spinner; max-height: 3rem; max-width: 3rem; } diff --git a/app/partials/project/wizard-create-project.jade b/app/partials/project/wizard-create-project.jade index e381369c..9015795a 100644 --- a/app/partials/project/wizard-create-project.jade +++ b/app/partials/project/wizard-create-project.jade @@ -9,12 +9,6 @@ form section.template-option .template-selector-title legend(translate="WIZARD.CHOOSE_TEMPLATE") - // UX issue - //- a.more-info( - //- href="" - //- title="{{ 'WIZARD.CHOOSE_TEMPLATE_TITLE' | translate }}" - //- translate="WIZARD.CHOOSE_TEMPLATE_INFO" - //- ) .template-selector fieldset(ng-repeat="template in templates") input( diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index dff7c572..99795199 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -1,7 +1,7 @@ .button, %button { - @extend %light; - @extend %small; + @include font-type(light); + @include font-size(small); background: transparent; border: 0; border-radius: 3px; @@ -44,9 +44,8 @@ } } } + .trans-button { - @extend %medium; - @extend %title; @extend %button; span, .icon { @@ -123,7 +122,7 @@ a.button-gray { background: $grayer; .icon, img { - @extend %large; + @include font-size(large); color: $white; margin-right: .5rem; } diff --git a/app/styles/components/card-placeholder.scss b/app/styles/components/card-placeholder.scss index 27691a88..9ac9e325 100644 --- a/app/styles/components/card-placeholder.scss +++ b/app/styles/components/card-placeholder.scss @@ -29,7 +29,7 @@ text-transform: uppercase; } p { - @extend %light; + @include font-type(light); color: $gray; margin: 0; } diff --git a/app/styles/components/check.scss b/app/styles/components/check.scss index 176b1b2e..0d0bf6f8 100644 --- a/app/styles/components/check.scss +++ b/app/styles/components/check.scss @@ -22,8 +22,8 @@ width: 50%; } ~ .check-text { - @extend %small; - @extend %text; + @include font-size(small); + @include font-type(text); color: $white; position: absolute; top: .2rem; diff --git a/app/styles/components/created-by.scss b/app/styles/components/created-by.scss index 60d6470a..e44b4536 100644 --- a/app/styles/components/created-by.scss +++ b/app/styles/components/created-by.scss @@ -24,8 +24,8 @@ } .created-title, .created-date { - @extend %light; - @extend %small; + @include font-type(light); + @include font-size(small); color: $gray; display: block; text-align: right; diff --git a/app/styles/components/editor-help.scss b/app/styles/components/editor-help.scss index 038b2a18..304e9a00 100644 --- a/app/styles/components/editor-help.scss +++ b/app/styles/components/editor-help.scss @@ -10,7 +10,7 @@ } .drag-drop-help { - @extend %xsmall; + @include font-size(x-small); color: $gray; } diff --git a/app/styles/components/estimation.scss b/app/styles/components/estimation.scss index f9d47a2b..6055321b 100644 --- a/app/styles/components/estimation.scss +++ b/app/styles/components/estimation.scss @@ -33,7 +33,7 @@ .points, .role, .icon-arrow-bottom { - @extend %text; + @include font-type(text); color: currentColor; fill: currentColor; } @@ -45,11 +45,11 @@ width: .6rem; } .points { - @extend %light; + @include font-type(light); color: $grayer; } .role { - @extend %light; + @include font-type(light); } } .popover { diff --git a/app/styles/components/filter.scss b/app/styles/components/filter.scss index 98d85f35..acf758dc 100644 --- a/app/styles/components/filter.scss +++ b/app/styles/components/filter.scss @@ -1,6 +1,6 @@ .single-filter { - @extend %large; - @extend %title; + @include font-size(large); + @include font-type(text); @include clearfix; align-items: center; background: darken($whitish, 10%); // Fallback diff --git a/app/styles/components/kanban-task.scss b/app/styles/components/kanban-task.scss index 034e2018..121bcfb2 100644 --- a/app/styles/components/kanban-task.scss +++ b/app/styles/components/kanban-task.scss @@ -62,7 +62,7 @@ } .avatar { a { - @extend %small; + @include font-size(small); text-align: center; } img { @@ -74,7 +74,7 @@ } } .task-text { - @extend %small; + @include font-size(small); flex-grow: 1; padding: 0 .5rem 0 .8rem; } @@ -87,7 +87,7 @@ margin-right: .3rem; } .task-name { - @extend %bold; + @include font-type(bold); } .loading { bottom: .5rem; @@ -129,7 +129,7 @@ color: $gray-light; } p { - @extend %small; + @include font-size(small); color: $gray-light; margin: 0; &:last-child { @@ -148,7 +148,7 @@ right: .5rem; } .task-points { - @extend %small; + @include font-size(small); color: darken($card-hover, 15%); margin: 0; span { @@ -171,7 +171,7 @@ padding: 0 .3rem; } .task-archived { - @extend %small; + @include font-size(small); background: darken($whitish, 5%); padding: .3rem; text-align: left; diff --git a/app/styles/components/list-items.scss b/app/styles/components/list-items.scss index da319819..06cdef94 100644 --- a/app/styles/components/list-items.scss +++ b/app/styles/components/list-items.scss @@ -8,14 +8,13 @@ padding: .5rem; padding-right: 0; h2 { - @extend %normal; - @extend %text; + @include font-type(text); line-height: 1.4; margin-bottom: 0; text-transform: none; } p { - @extend %light; + @include font-type(light); margin-bottom: 0; } .list-itemtype-avatar { @@ -41,7 +40,7 @@ } } h2 { - @extend %large; + @include font-size(large); } .icon-blocked-project { @include svg-size(.75rem); @@ -96,7 +95,7 @@ } } h2 { - @extend %medium; + @include font-size(medium); } .ticket-type, .ticket-project { @@ -123,11 +122,11 @@ .list-itemtype-user { @include list-itemtype-common; h2 { - @extend %large; + @include font-size(large); } .extra-info { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); margin-top: .25rem; } } diff --git a/app/styles/components/loader.scss b/app/styles/components/loader.scss index 2f34f661..b76efd07 100644 --- a/app/styles/components/loader.scss +++ b/app/styles/components/loader.scss @@ -18,7 +18,7 @@ width: 100%; } p { - @extend %large; + @include font-size(large); color: $gray; text-align: center; } diff --git a/app/styles/components/loading-spinner.scss b/app/styles/components/loading-spinner.scss index b035d515..af5d73c9 100644 --- a/app/styles/components/loading-spinner.scss +++ b/app/styles/components/loading-spinner.scss @@ -1,3 +1,3 @@ .loading-spinner { - @extend %loading-spinner; + @include loading-spinner; } diff --git a/app/styles/components/notification-message.scss b/app/styles/components/notification-message.scss index 70e39a09..a059513f 100644 --- a/app/styles/components/notification-message.scss +++ b/app/styles/components/notification-message.scss @@ -21,8 +21,8 @@ margin: 0; } .warning { - @extend %large; - @extend %bold; + @include font-size(large); + @include font-type(bold); color: $white; line-height: 1.2; } @@ -77,8 +77,8 @@ margin-right: .5rem; } .warning { - @extend %xlarge; - @extend %bold; + @include font-size(xlarge); + @include font-type(bold); color: $white; line-height: 2.4rem; } @@ -135,8 +135,8 @@ transition: all .6s; } p { - @extend %light; - @extend %small; + @include font-type(light); + @include font-size(small); margin: 0; } .warning { diff --git a/app/styles/components/select-color.scss b/app/styles/components/select-color.scss index b2216cbb..dc329393 100644 --- a/app/styles/components/select-color.scss +++ b/app/styles/components/select-color.scss @@ -24,8 +24,8 @@ margin-bottom: 1rem; } input { - @extend %medium; - @extend %text; + @include font-size(medium); + @include font-type(text); background-color: $whitish; width: 243px; @include placeholder { diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss index 26b6bf2e..2b9a8cda 100644 --- a/app/styles/components/summary.scss +++ b/app/styles/components/summary.scss @@ -19,15 +19,15 @@ $summary-background: $grayer; } } .number { - @extend %xlarge; - @extend %bold; + @include font-size(xlarge); + @include font-type(bold); line-height: .9; margin-right: .3rem; } .description { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); line-height: 1; } .stats { @@ -149,7 +149,7 @@ $summary-background: $grayer; } .empty-burndown { - @extend %light; + @include font-type(light); align-content: center; align-items: center; background: rgba($primary-dark, .15); @@ -172,14 +172,14 @@ $summary-background: $grayer; flex: 1; } .title { - @extend %light; - @extend %large; + @include font-type(light); + @include font-size(large); color: $primary-dark; margin: 0; text-transform: uppercase; } a { - @extend %bold; + @include font-type(bold); animation: blink 2s infinite; } } diff --git a/app/styles/components/tag.scss b/app/styles/components/tag.scss index 80130150..ff2ed64c 100644 --- a/app/styles/components/tag.scss +++ b/app/styles/components/tag.scss @@ -1,6 +1,6 @@ .tag { - @extend %light; - @extend %small; + @include font-type(light); + @include font-size(small); background: $whitish; // Fallback border-radius: 0 5px 5px 0; color: $grayer; @@ -56,7 +56,7 @@ } } .tag { - @extend %small; + @include font-size(small); margin: 0 .5rem .5rem 0; padding: .5rem; } @@ -80,7 +80,7 @@ @include svg-size(.9rem); } .add-tag-text { - @extend %small; + @include font-size(small); } .remove-tag { display: inline-block; diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss index 47f7a19e..7a9e6516 100644 --- a/app/styles/components/taskboard-task.scss +++ b/app/styles/components/taskboard-task.scss @@ -58,7 +58,7 @@ flex-grow: 1; max-width: 55px; a { - @extend %small; + @include font-size(small); display: block; text-align: center; } @@ -87,7 +87,7 @@ width: 1.75rem; } .task-assigned { - @extend %small; + @include font-size(small); color: $card-dark; display: block; &:hover { @@ -99,10 +99,10 @@ margin-right: .5em; } .task-name { - @extend %bold; + @include font-type(bold); } .taskboard-text { - @extend %small; + @include font-size(small); flex-basis: 50px; flex-grow: 10; padding: 0 .5rem 0 1rem; diff --git a/app/styles/components/track-btn.scss b/app/styles/components/track-btn.scss index b4c108e9..94c4a0d1 100644 --- a/app/styles/components/track-btn.scss +++ b/app/styles/components/track-btn.scss @@ -3,7 +3,7 @@ ////////////////////// .track-buttons-container { - @extend %small; + @include font-size(small); position: relative; } @@ -102,7 +102,7 @@ } } a { - @extend %light; + @include font-type(light); border-bottom: 1px solid rgba($gray-light, .3); color: $white; display: flex; diff --git a/app/styles/components/user-list.scss b/app/styles/components/user-list.scss index 9105554f..b52796a2 100644 --- a/app/styles/components/user-list.scss +++ b/app/styles/components/user-list.scss @@ -21,7 +21,7 @@ } } .user-list-name { - @extend %light; + @include font-type(light); color: $grayer; margin-left: .5rem; } diff --git a/app/styles/components/wysiwyg.scss b/app/styles/components/wysiwyg.scss index 3953a8dc..e93f5277 100644 --- a/app/styles/components/wysiwyg.scss +++ b/app/styles/components/wysiwyg.scss @@ -4,19 +4,19 @@ overflow: auto; padding: 1rem; h1 { - @extend %xlarge; - @extend %text; + @include font-size(xlarge); + @include font-type(text); line-height: 2.5rem; text-transform: uppercase; } h2 { - @extend %large; - @extend %bold; + @include font-size(large); + @include font-type(bold); margin-bottom: .5rem; text-transform: uppercase; } h3 { - @extend %bold; + @include font-type(bold); text-transform: uppercase; } ul, @@ -55,7 +55,7 @@ } pre, code { - @extend %small; + @include font-size(small); background: lighten($grayer, 10%); color: $whitish; direction: ltr; diff --git a/app/styles/core/base.scss b/app/styles/core/base.scss index a531fad6..b42e403f 100644 --- a/app/styles/core/base.scss +++ b/app/styles/core/base.scss @@ -1,10 +1,16 @@ // Basic layout styles +@include meyer-reset; + +* { + box-sizing: border-box; +} + html { min-height: 100%; width: 100%; } body { - @extend %text; + @include font-type(text); line-height: 1.3; min-height: 100%; width: 100%; diff --git a/app/styles/core/elements.scss b/app/styles/core/elements.scss index b7ed043d..aa6e2468 100644 --- a/app/styles/core/elements.scss +++ b/app/styles/core/elements.scss @@ -9,7 +9,7 @@ blockquote { margin: 0 0 20px; padding: .5rem 1.25rem; cite { - @extend %small; + @include font-size(small); display: block; &::before { content: '\2014 \0020'; @@ -27,7 +27,7 @@ ul { list-style: none outside; } ol { list-style: decimal; } sup { - @extend %small; + @include font-size(small); vertical-align: super; } @@ -83,7 +83,7 @@ svg { .spin { img { - @extend %loading-spinner; + @include loading-spinner; max-height: 2rem; max-width: 2rem; } diff --git a/app/styles/core/reset.scss b/app/styles/core/reset.scss deleted file mode 100644 index 1b431829..00000000 --- a/app/styles/core/reset.scss +++ /dev/null @@ -1,135 +0,0 @@ -// FTW -* { - box-sizing: border-box; -} - - -// #Reset & Basics (Inspired by E. Meyers) -//================================================== -a, -abbr, -acronym, -address, -applet, -article, -aside, -audio, -b, -big, -blockquote, -body, -canvas, -caption, -center, -cite, -code, -dd, -del, -details, -dfn, -div, -dl, -dt, -em, -embed, -fieldset, -figcaption, -figure, -footer, -form, -h1, -h2, -h3, -h4, -h5, -h6, -header, -hgroup, -html, -i, -iframe, -img, -ins, -kbd, -label, -legend, -li, -mark, -menu, -nav, -object, -ol, -output, -p, -pre, -q, -ruby, -s, -samp, -section, -small, -span, -strike, -strong, -sub, -summary, -sup, -table, -tbody, -td, -tfoot, -th, -thead, -time, -tr, -tt, -u, -ul, -var, -video { - border: 0; - font: inherit; - font-size: 100%; - margin: 0; - padding: 0; - vertical-align: baseline; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} -body { - line-height: 1; -} - -ol, -ul { - list-style: none; -} - -blockquote, -q { - quotes: none; -} - -blockquote::before, -blockquote::after, -q::before, -q::after { - content: ''; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} diff --git a/app/styles/core/typography.scss b/app/styles/core/typography.scss index 85c74703..6b8469d2 100755 --- a/app/styles/core/typography.scss +++ b/app/styles/core/typography.scss @@ -36,14 +36,14 @@ h6 { } h1 { - @extend %xlarge; - @extend %light; + @include font-size(xlarge); + @include font-type(light); line-height: 1.5; margin-bottom: 1rem; text-transform: uppercase; span { - @extend %larger; + @include font-size(larger); margin-right: .5rem; overflow: hidden; text-overflow: ellipsis; @@ -77,8 +77,8 @@ h1 { } h2 { - @extend %larger; - @extend %text; + @include font-size(larger); + @include font-type(text); line-height: 1.2; margin-bottom: 1rem; } @@ -97,7 +97,7 @@ em { } small { - @extend %xsmall; + @include font-size(x-small); } strong { diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss index b7d66bfb..ed6cb729 100644 --- a/app/styles/dependencies/helpers.scss +++ b/app/styles/dependencies/helpers.scss @@ -1,94 +1,2 @@ -// __Font Sizes__ // -%xsmall {font-size: .75rem;} -%small {font-size: .9rem;} -%medium {font-size: 1rem;} -%large {font-size: 1.2rem;} -%larger {font-size: 1.6rem;} -%xlarge {font-size: 2rem;} -%xxlarge {font-size: 3rem;} -%gigantic {font-size: 4rem;} - -// __Font Types__ // -%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; } -%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; } -%text {font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif; } -%bold {font-family: 'OpenSans-Semibold', Arial, Helvetica, sans-serif; } -%mono {font-family: 'courier new', 'monospace';} - -%lightbox { - bottom: 0; - display: none; - left: 0; - opacity: 0; - position: fixed; - right: 0; - top: 0; - z-index: 99910; - .close { - @include svg-size(2rem); - cursor: pointer; - display: block; - fill: $gray; - position: absolute; - right: 3rem; - top: 3rem; - transition: fill .2s; - display: block; - &:hover { - fill: $red-light; - } - svg { - @include svg-size(2rem); - pointer-events: none; - } - } - &.open { - align-content: center; - align-items: center; - display: flex; - justify-content: center; - opacity: 1; - transition: opacity .3s ease; - } - &.close { - opacity: 0; - transition: opacity .3s ease; - } - .lb-icon { - margin: 1rem auto; - display: flex; - justify-content: center; - svg { - @include svg-size(6rem); - display: block; - fill: $whitish; - } - } - .title { - text-align: center; - } - fieldset { - margin-bottom: 1rem; - } - textarea { - resize: vertical; - } - .button-green, - .button-gray { - display: block; - padding: 12px; - text-align: center; - } -} - -%loading-spinner { - animation-timing-function: ease-in-out; - animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate; - margin: 0 auto; - max-height: 1rem; - max-width: 1rem; - transform-origin: 32 32; -} - $navbar: 40px; $main-height: calc(100vh - 40px); diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss deleted file mode 100644 index f0419f29..00000000 --- a/app/styles/dependencies/mixins.scss +++ /dev/null @@ -1,159 +0,0 @@ -@mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) { - box-shadow: $h-shadow $v-shadow $blur $spread $color; -} - -@mixin clearfix { - &:after { - clear: both; - content: ''; - display: table; - } -} - -@mixin placeholder { - $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; - @each $placeholder in $placeholders { - &:#{$placeholder}-placeholder { - @content; - } - } -} - -@mixin slide($max, $overflow, $min: 0) { - max-height: $min; - transition: max-height .5s ease-in; - overflow: #{$overflow}; - &.open { - transition: max-height .5s ease-in; - max-height: $max; - } -} - -@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '', $arrow-width: 0, $arrow-top: '', $arrow-left: '', $arrow-bottom: '', $arrow-height: 15px) { - @extend %light; - @extend %small; - background: $blackish; - bottom: #{$bottom}; - color: $white; - display: none; - left: #{$left}; - list-style-type: none; - margin: 0; - padding: 10px; - position: absolute; - right: #{$right}; - top: #{$top}; - width: $width; - z-index: 99; - a { - @extend %small; - border-bottom: 1px solid $grayer; - color: $white; - display: block; - padding: 10px 2px; - &:last-child { - border: 0; - } - &:hover { - color: $primary-light; - transition: color .3s linear; - &.point { - color: $white; - } - } - } - &:after { - background: $blackish; - bottom: #{$arrow-bottom}; - content: ''; - height: #{$arrow-height}; - left: #{$arrow-left}; - position: absolute; - top: #{$arrow-top}; - transform: rotate(45deg); - width: #{$arrow-width}; - } -} - -@mixin arrow($arrow-direction, $border-color, $background-color, $border-width, $border-size) { - &:after, - &:before { - #{$arrow-direction}: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - &:after { - border-color: rgba($background-color, 0); - border-#{$arrow-direction}-color: $background-color; - border-width: #{$border-size}px; - margin-left: -#{$border-size}px; - } - &:before { - border-color: rgba($border-color, 0); - border-#{$arrow-direction}-color: $border-color; - border-width: calc(#{$border-size}px + #{$border-width}px); - margin-left: calc(-#{$border-size}px + #{$border-width}px); - } -} - -// Mixin for track buttons -@mixin list-itemtype-track { - .list-itemtype-track { - @extend %small; - color: $gray-light; - display: flex; - flex-shrink: 0; - justify-content: flex-end; - .list-itemtype-track-likers { - margin-right: .5rem; - } - } - .list-itemtype-track-likers, - .list-itemtype-track-watchers { - display: flex; - .icon { - display: block; - margin-right: .25rem; - } - &.active { - color: $primary; - .icon { - fill: currentcolor; - } - } - } - .icon { - fill: $gray-light; - } -} - -@mixin cursor-progress { - .in-progress { - cursor: progress; - } -} - -@mixin centered { - margin: 1rem auto; - max-width: 1200px; - min-width: 768px; - @include breakpoint(tablet) { - width: 90%; - min-width: 0; - } -} - -@mixin svg-size($width: 1rem, $height: null) { - @if $height == null { - width: $width; - height: $width; - } @else { - width: $width; - height: $height; - } -} diff --git a/app/styles/dependencies/mixins/background.scss b/app/styles/dependencies/mixins/background.scss new file mode 100644 index 00000000..0e4a6697 --- /dev/null +++ b/app/styles/dependencies/mixins/background.scss @@ -0,0 +1,9 @@ +@mixin triangled-bg { + background: url('../images/bg.png') no-repeat center center; + background-size: cover; +} + +@mixin background-taiga { + background: url('../images/invitation_bg.jpg') no-repeat center center; + background-size: cover; +} diff --git a/app/styles/dependencies/mixins/box-arrow.scss b/app/styles/dependencies/mixins/box-arrow.scss new file mode 100644 index 00000000..88d6046c --- /dev/null +++ b/app/styles/dependencies/mixins/box-arrow.scss @@ -0,0 +1,25 @@ +@mixin arrow($arrow-direction, $border-color, $background-color, $border-width, $border-size) { + &:after, + &:before { + #{$arrow-direction}: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + &:after { + border-color: rgba($background-color, 0); + border-#{$arrow-direction}-color: $background-color; + border-width: #{$border-size}px; + margin-left: -#{$border-size}px; + } + &:before { + border-color: rgba($border-color, 0); + border-#{$arrow-direction}-color: $border-color; + border-width: calc(#{$border-size}px + #{$border-width}px); + margin-left: calc(-#{$border-size}px + #{$border-width}px); + } +} diff --git a/app/styles/dependencies/mixins/box-shadow.scss b/app/styles/dependencies/mixins/box-shadow.scss new file mode 100644 index 00000000..f102095c --- /dev/null +++ b/app/styles/dependencies/mixins/box-shadow.scss @@ -0,0 +1,3 @@ +@mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) { + box-shadow: $h-shadow $v-shadow $blur $spread $color; +} diff --git a/app/styles/dependencies/mixins/centered.scss b/app/styles/dependencies/mixins/centered.scss new file mode 100644 index 00000000..182442f0 --- /dev/null +++ b/app/styles/dependencies/mixins/centered.scss @@ -0,0 +1,9 @@ +@mixin centered { + margin: 1rem auto; + max-width: 1200px; + min-width: 768px; + @include breakpoint(tablet) { + width: 90%; + min-width: 0; + } +} diff --git a/app/styles/dependencies/mixins/lightbox.scss b/app/styles/dependencies/mixins/lightbox.scss new file mode 100644 index 00000000..9bfa9e92 --- /dev/null +++ b/app/styles/dependencies/mixins/lightbox.scss @@ -0,0 +1,66 @@ +@mixin lightbox { + background: rgba($white, .95); + bottom: 0; + display: none; + left: 0; + opacity: 0; + position: fixed; + right: 0; + top: 0; + z-index: 99910; + .close { + @include svg-size(2rem); + cursor: pointer; + display: block; + fill: $gray; + position: absolute; + right: 3rem; + top: 3rem; + transition: fill .2s; + display: block; + &:hover { + fill: $red-light; + } + svg { + @include svg-size(2rem); + pointer-events: none; + } + } + &.open { + align-content: center; + align-items: center; + display: flex; + justify-content: center; + opacity: 1; + transition: opacity .3s ease; + } + &.close { + opacity: 0; + transition: opacity .3s ease; + } + .lb-icon { + margin: 1rem auto; + display: flex; + justify-content: center; + svg { + @include svg-size(6rem); + display: block; + fill: $whitish; + } + } + .title { + text-align: center; + } + fieldset { + margin-bottom: 1rem; + } + textarea { + resize: vertical; + } + .button-green, + .button-gray { + display: block; + padding: 12px; + text-align: center; + } +} diff --git a/app/styles/dependencies/mixins/loading-spinner.scss b/app/styles/dependencies/mixins/loading-spinner.scss new file mode 100644 index 00000000..225daab9 --- /dev/null +++ b/app/styles/dependencies/mixins/loading-spinner.scss @@ -0,0 +1,8 @@ +@mixin loading-spinner { + animation-timing-function: ease-in-out; + animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate; + margin: 0 auto; + max-height: 1rem; + max-width: 1rem; + transform-origin: 32 32; +} diff --git a/app/styles/dependencies/mixins/popover.scss b/app/styles/dependencies/mixins/popover.scss new file mode 100644 index 00000000..19fd9038 --- /dev/null +++ b/app/styles/dependencies/mixins/popover.scss @@ -0,0 +1,45 @@ +@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '', $arrow-width: 0, $arrow-top: '', $arrow-left: '', $arrow-bottom: '', $arrow-height: 15px) { + @include font-type(light); + @include font-size(small); + background: $blackish; + bottom: #{$bottom}; + color: $white; + display: none; + left: #{$left}; + list-style-type: none; + margin: 0; + padding: 10px; + position: absolute; + right: #{$right}; + top: #{$top}; + width: $width; + z-index: 99; + a { + @include font-size(small); + border-bottom: 1px solid $grayer; + color: $white; + display: block; + padding: 10px 2px; + &:last-child { + border: 0; + } + &:hover { + color: $primary-light; + transition: color .3s linear; + &.point { + color: $white; + } + } + } + &:after { + background: $blackish; + bottom: #{$arrow-bottom}; + content: ''; + height: #{$arrow-height}; + left: #{$arrow-left}; + position: absolute; + top: #{$arrow-top}; + transform: rotate(45deg); + width: #{$arrow-width}; + } +} diff --git a/app/styles/dependencies/mixins/profile-form.scss b/app/styles/dependencies/mixins/profile-form.scss index b19d7365..dbab5066 100644 --- a/app/styles/dependencies/mixins/profile-form.scss +++ b/app/styles/dependencies/mixins/profile-form.scss @@ -6,7 +6,7 @@ margin-bottom: 1rem; } label { - @extend %light; + @include font-type(light); display: block; margin-bottom: .2rem; } @@ -41,12 +41,12 @@ } } .loading-spinner { - @extend %loading-spinner; + @include loading-spinner; border: 0; transform-origin: center center; } .use-default-image { - @extend %xsmall; + @include font-size(x-small); display: block; margin-top: .25rem; text-align: center; @@ -59,7 +59,6 @@ flex: 1; max-width: 500px; } - @include breakpoint(tablet) { form { display: block; diff --git a/app/styles/dependencies/mixins/progress.scss b/app/styles/dependencies/mixins/progress.scss new file mode 100644 index 00000000..1cd4938b --- /dev/null +++ b/app/styles/dependencies/mixins/progress.scss @@ -0,0 +1,5 @@ +@mixin cursor-progress { + .in-progress { + cursor: progress; + } +} diff --git a/app/styles/dependencies/mixins/project-card.scss b/app/styles/dependencies/mixins/project-card.scss index 6b351616..dfb03bf6 100644 --- a/app/styles/dependencies/mixins/project-card.scss +++ b/app/styles/dependencies/mixins/project-card.scss @@ -17,8 +17,8 @@ width: 100%; } .project-card-description { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); color: $gray; } .project-card-statistics { @@ -31,7 +31,7 @@ } } .statistic { - @extend %small; + @include font-size(small); color: $gray-light; display: inline-block; margin-right: .5rem; @@ -60,8 +60,8 @@ .project-card-name { line-height: 1.25; a { - @extend %large; - @extend %large; + @include font-size(large); + @include font-size(large); color: $primary; &:hover { color: $primary-light; diff --git a/app/styles/dependencies/mixins/slide.scss b/app/styles/dependencies/mixins/slide.scss new file mode 100644 index 00000000..a9880c3f --- /dev/null +++ b/app/styles/dependencies/mixins/slide.scss @@ -0,0 +1,9 @@ +@mixin slide($max, $overflow, $min: 0) { + max-height: $min; + transition: max-height .5s ease-in; + overflow: #{$overflow}; + &.open { + transition: max-height .5s ease-in; + max-height: $max; + } +} diff --git a/app/styles/dependencies/mixins/svg.scss b/app/styles/dependencies/mixins/svg.scss new file mode 100644 index 00000000..a6b776ba --- /dev/null +++ b/app/styles/dependencies/mixins/svg.scss @@ -0,0 +1,9 @@ +@mixin svg-size($width: 1rem, $height: null) { + @if $height == null { + width: $width; + height: $width; + } @else { + width: $width; + height: $height; + } +} diff --git a/app/styles/dependencies/mixins/track-buttons.scss b/app/styles/dependencies/mixins/track-buttons.scss new file mode 100644 index 00000000..06cf598a --- /dev/null +++ b/app/styles/dependencies/mixins/track-buttons.scss @@ -0,0 +1,31 @@ + +// Mixin for track buttons +@mixin list-itemtype-track { + .list-itemtype-track { + @include font-size(small); + color: $gray-light; + display: flex; + flex-shrink: 0; + justify-content: flex-end; + .list-itemtype-track-likers { + margin-right: .5rem; + } + } + .list-itemtype-track-likers, + .list-itemtype-track-watchers { + display: flex; + .icon { + display: block; + margin-right: .25rem; + } + &.active { + color: $primary; + .icon { + fill: currentcolor; + } + } + } + .icon { + fill: $gray-light; + } +} diff --git a/app/styles/dependencies/mixins/typography.scss b/app/styles/dependencies/mixins/typography.scss new file mode 100644 index 00000000..f46d0113 --- /dev/null +++ b/app/styles/dependencies/mixins/typography.scss @@ -0,0 +1,39 @@ +// __Font Sizes__ // + +@mixin font-size($size) { + @if $size == xsmall { + font-size: .75rem; + } @else if $size == small { + font-size: .9rem; + } @else if $size == medium { + font-size: 1rem; + } @else if $size == large { + font-size: 1.2rem; + } @else if $size == larger { + font-size: 1.6rem; + } @else if $size == xlarge { + font-size: 2rem; + } @else if $size == xxlarge { + font-size: 3rem; + } @else if $size == gigantic { + font-size: 4rem; + } @else { + font-size: 1rem; + } +} + +@mixin font-type($type) { + @if $type == title { + font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; + } @else if $type == light { + font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; + } @else if $type == text { + font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif; + } @else if $type == bold { + font-family: 'OpenSans-Semibold', Arial, Helvetica, sans-serif; + } @else if $type == mono { + font-family: 'courier new', 'monospace'; + } @else { + font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif; + } +} diff --git a/app/styles/dependencies/reset.scss b/app/styles/dependencies/reset.scss new file mode 100644 index 00000000..0d910da5 --- /dev/null +++ b/app/styles/dependencies/reset.scss @@ -0,0 +1,136 @@ +// http://meyerweb.com/eric/tools/css/reset/ +// v2.0 | 20110126 +// License: none (public domain) +@mixin meyer-reset { + a, + abbr, + acronym, + address, + applet, + article, + aside, + audio, + b, + big, + blockquote, + body, + canvas, + caption, + center, + cite, + code, + dd, + del, + details, + dfn, + div, + dl, + dt, + em, + embed, + fieldset, + figcaption, + figure, + footer, + form, + h1, + h2, + h3, + h4, + h5, + h6, + header, + hgroup, + html, + i, + iframe, + img, + ins, + kbd, + label, + legend, + li, + mark, + menu, + nav, + object, + ol, + output, + p, + pre, + q, + ruby, + s, + samp, + section, + small, + span, + strike, + strong, + sub, + summary, + sup, + table, + tbody, + td, + tfoot, + th, + thead, + time, + tr, + tt, + u, + ul, + var, + video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + // HTML5 display-role reset for older browsers + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + menu, + nav, + section { + display: block; + } + body { + line-height: 1; + } + ol, + ul { + list-style: none; + } + blockquote, + q { + quotes: none; + } + blockquote { + &:after, + &:before { + content: ""; + content: none; + } + } + q { + &:after, + &:before { + content: ""; + content: none; + } + } + table { + border-collapse: collapse; + border-spacing: 0; + } +} diff --git a/app/styles/dependencies/responsive.scss b/app/styles/dependencies/responsive.scss index d3ecb5e0..3d4f8457 100644 --- a/app/styles/dependencies/responsive.scss +++ b/app/styles/dependencies/responsive.scss @@ -1,7 +1,3 @@ -// - Hey, there is a mixin here instead of in mixins.scss!!! Are you drunk or what? -// - I know, I know, but look it closer, it makes sense -// - Oh, I see. It's ok for this time... - @mixin breakpoint($point) { @if $point == desktop { @media (min-width: 1200px) { @content ; } diff --git a/app/styles/extras/dependencies.scss b/app/styles/extras/dependencies.scss index 21c2988a..a7fff44b 100644 --- a/app/styles/extras/dependencies.scss +++ b/app/styles/extras/dependencies.scss @@ -1,9 +1,4 @@ // Bourbon -$prefix-for-webkit: true; -$prefix-for-mozilla: true; -$prefix-for-microsoft: true; -$prefix-for-opera: true; -$prefix-for-spec: true; @import '../../../vendor/bourbon/app/assets/stylesheets/bourbon'; //################################################# @@ -11,6 +6,18 @@ $prefix-for-spec: true; //################################################# @import "variables"; -@import '../dependencies/mixins'; +@import '../dependencies/reset'; @import '../dependencies/helpers'; @import '../dependencies/responsive'; +@import '../dependencies/mixins/typography'; +@import '../dependencies/mixins/background'; +@import '../dependencies/mixins/box-arrow'; +@import '../dependencies/mixins/box-shadow'; +@import '../dependencies/mixins/centered'; +@import '../dependencies/mixins/lightbox'; +@import '../dependencies/mixins/loading-spinner'; +@import '../dependencies/mixins/popover'; +@import '../dependencies/mixins/progress'; +@import '../dependencies/mixins/slide'; +@import '../dependencies/mixins/svg'; +@import '../dependencies/mixins/track-buttons'; diff --git a/app/styles/layout/admin-memberships.scss b/app/styles/layout/admin-memberships.scss index 7efb1748..577430db 100644 --- a/app/styles/layout/admin-memberships.scss +++ b/app/styles/layout/admin-memberships.scss @@ -1,6 +1,6 @@ .admin-membership { .limit-users-warning { - @extend %small; + @include font-size(small); color: $primary; margin-right: 1rem; } diff --git a/app/styles/layout/admin-project-values.scss b/app/styles/layout/admin-project-values.scss index 77a20115..7474d016 100644 --- a/app/styles/layout/admin-project-values.scss +++ b/app/styles/layout/admin-project-values.scss @@ -5,7 +5,7 @@ height: 0; position: relative; li { - @extend %light; + @include font-type(light); background: rgba($red, .7); position: absolute; width: 100%; @@ -22,8 +22,8 @@ margin-bottom: 0; } p { - @extend %title; - @extend %large; + @include font-type(text); + @include font-size(large); color: $gray-light; } } @@ -37,6 +37,8 @@ padding: .8em 1rem; text-transform: uppercase; h2 { + @include font-type(light); + @include font-size(large); margin: 0; span { margin-left: .5rem; diff --git a/app/styles/layout/auth.scss b/app/styles/layout/auth.scss index 1898df12..de95a0c5 100644 --- a/app/styles/layout/auth.scss +++ b/app/styles/layout/auth.scss @@ -1,5 +1,5 @@ .auth { - @extend %triangled-bg; + @include triangled-bg; align-items: center; bottom: 0; display: flex; @@ -22,15 +22,15 @@ } } .logo { - @extend %xxlarge; - @extend %title; + @include font-size(xxlarge); + @include font-type(text); color: $white; margin-bottom: 1rem; text-align: center; } .tagline { - @extend %xlarge; + @include font-size(xlarge); color: $white; line-height: 2rem; margin-bottom: 1rem; diff --git a/app/styles/layout/backlog.scss b/app/styles/layout/backlog.scss index ecb640a8..340aa1af 100644 --- a/app/styles/layout/backlog.scss +++ b/app/styles/layout/backlog.scss @@ -5,14 +5,13 @@ justify-content: space-between; margin-bottom: 1rem; .trans-button { - @extend %trans-button; color: $blackish; display: inline-block; padding: .4rem 1.5rem; &.active, &:hover { - background: $gray-light; - color: $gray; + background: darken($whitish, 10%); + color: $grayer; } &.active { &:hover { diff --git a/app/styles/layout/invitation.scss b/app/styles/layout/invitation.scss index 6b51c083..f8d1ea37 100644 --- a/app/styles/layout/invitation.scss +++ b/app/styles/layout/invitation.scss @@ -1,5 +1,5 @@ .invitation-main { - @extend %background-taiga; + @include background-taiga; align-content: center; align-items: center; background-size: cover; @@ -19,8 +19,8 @@ display: flex; flex-direction: column; .person-name { - @extend %large; - @extend %light; + @include font-size(large); + @include font-type(light); color: $white; } img { @@ -29,12 +29,12 @@ } } .invitation-text { - @extend %large; - @extend %light; + @include font-size(large); + @include font-type(light); color: $white; text-align: center; .project-name { - @extend %xlarge; + @include font-size(xlarge); display: block; text-transform: uppercase; } @@ -53,7 +53,7 @@ } } .forgot-pass { - @extend %small; + @include font-size(small); color: $gray-light; opacity: 1; position: absolute; @@ -72,8 +72,8 @@ padding: 1rem 3rem; text-align: center; .form-header { - @extend %large; - @extend %light; + @include font-size(large); + @include font-type(light); color: $white; } } diff --git a/app/styles/layout/not-found.scss b/app/styles/layout/not-found.scss index 15f3345e..3d9b3931 100644 --- a/app/styles/layout/not-found.scss +++ b/app/styles/layout/not-found.scss @@ -1,5 +1,5 @@ .error-main { - @extend %background-taiga; + @include background-taiga; align-items: center; bottom: 0; display: flex; diff --git a/app/styles/layout/ticket-detail.scss b/app/styles/layout/ticket-detail.scss index 38dadffc..6e8cbc48 100644 --- a/app/styles/layout/ticket-detail.scss +++ b/app/styles/layout/ticket-detail.scss @@ -8,8 +8,8 @@ margin-bottom: .5rem; } .us-title { - @extend %large; - @extend %text; + @include font-size(large); + @include font-type(text); align-items: flex-start; background: $whitish; display: flex; @@ -39,7 +39,7 @@ color: $red-light; } .unblock { - @extend %bold; + @include font-type(bold); color: $white; float: right; } @@ -71,8 +71,8 @@ } } .us-title-text { - @extend %larger; - @extend %text; + @include font-size(larger); + @include font-type(text); align-content: center; align-items: center; display: flex; @@ -88,7 +88,7 @@ } } .us-number { - @extend %text; + @include font-type(text); color: $gray-light; flex-shrink: 0; line-height: 2.2rem; @@ -114,7 +114,7 @@ opacity: 0; } .us-related-task { - @extend %small; + @include font-size(small); color: $gray-light; margin-top: .5rem; a { @@ -129,10 +129,10 @@ } } .block-desc-container { - @extend %small; + @include font-size(small); } .block-description-title { - @extend %bold; + @include font-type(bold); color: $white; margin-right: .5rem; } @@ -143,7 +143,7 @@ } } .loading-spinner { - @extend %loading-spinner; + @include loading-spinner; max-height: 1.5rem; max-width: 1.5rem; } @@ -152,14 +152,14 @@ .blocked-warning { margin-bottom: 1rem; .blocked { - @extend %title; - @extend %xlarge; + @include font-type(text); + @include font-size(xlarge); color: $red; line-height: 2.5rem; margin-bottom: .5rem; } .icon { - @extend %xlarge; + @include font-size(xlarge); vertical-align: middle; } .block-description { @@ -244,7 +244,7 @@ transition: opacity .2s linear; } .loading-spinner { - @extend %loading-spinner; + @include loading-spinner; max-height: 1.5rem; max-width: 1.5rem; } diff --git a/app/styles/layout/wiki.scss b/app/styles/layout/wiki.scss index cc15bd3e..696267da 100644 --- a/app/styles/layout/wiki.scss +++ b/app/styles/layout/wiki.scss @@ -1,10 +1,10 @@ .wiki { .wiki-title { - @extend %light; - @extend %larger; + @include font-type(light); + @include font-size(larger); } .remove { - @extend %small; + @include font-size(small); color: $gray-light; &:hover { color: $red-light; diff --git a/app/styles/modules/admin/admin-common.scss b/app/styles/modules/admin/admin-common.scss index fe3fe486..a3d91497 100644 --- a/app/styles/modules/admin/admin-common.scss +++ b/app/styles/modules/admin/admin-common.scss @@ -9,7 +9,7 @@ margin-bottom: 2rem; } .total { - @extend %large; + @include font-size(large); align-items: center; background-color: $whitish; color: $grayer; diff --git a/app/styles/modules/admin/admin-custom-attributes.scss b/app/styles/modules/admin/admin-custom-attributes.scss index 73c45584..6d97314a 100644 --- a/app/styles/modules/admin/admin-custom-attributes.scss +++ b/app/styles/modules/admin/admin-custom-attributes.scss @@ -10,7 +10,7 @@ padding: .5rem 0; } .table-header { - @extend %bold; + @include font-type(bold); border-bottom: 3px solid $whitish; .custom-name, .custom-description { diff --git a/app/styles/modules/admin/admin-functionalities.scss b/app/styles/modules/admin/admin-functionalities.scss index 39e1b53c..c402d415 100644 --- a/app/styles/modules/admin/admin-functionalities.scss +++ b/app/styles/modules/admin/admin-functionalities.scss @@ -27,15 +27,15 @@ } } .module-name { - @extend %bold; - @extend %large; + @include font-type(bold); + @include font-size(large); color: $gray-light; flex-basis: 100px; flex-shrink: 0; margin: 0 .5rem; } .module-desc { - @extend %small; + @include font-size(small); color: $gray-light; flex: 1; margin: 0 2rem 0 0; diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss index 5780eaf9..0312b8f1 100644 --- a/app/styles/modules/admin/admin-membership-table.scss +++ b/app/styles/modules/admin/admin-membership-table.scss @@ -1,6 +1,6 @@ .admin-membership-table { .title { - @extend %bold; + @include font-type(bold); } .avatar { align-items: center; @@ -27,7 +27,7 @@ width: 100%; } .name { - @extend %bold; + @include font-type(bold); } .email { color: $gray-light; @@ -76,7 +76,7 @@ vertical-align: middle; } label { - @extend %small; + @include font-size(small); } } .row-member, diff --git a/app/styles/modules/admin/admin-menu.scss b/app/styles/modules/admin/admin-menu.scss index 38e52885..8d74aa36 100644 --- a/app/styles/modules/admin/admin-menu.scss +++ b/app/styles/modules/admin/admin-menu.scss @@ -1,7 +1,6 @@ .admin-menu { li { - @extend %large; - @extend %title; + @include font-type(text); border-bottom: 1px solid darken($whitish, 10%); text-transform: uppercase; &:last-child { diff --git a/app/styles/modules/admin/admin-project-export.scss b/app/styles/modules/admin/admin-project-export.scss index d87a6279..1a02135c 100644 --- a/app/styles/modules/admin/admin-project-export.scss +++ b/app/styles/modules/admin/admin-project-export.scss @@ -8,13 +8,13 @@ margin: 0 auto; width: 2.5rem; img { - @extend %loading-spinner; + @include loading-spinner; width: 100%; } } h3 { - @extend %bold; - @extend %large; + @include font-type(bold); + @include font-size(large); background: $whitish; color: $gray; margin: .5rem; diff --git a/app/styles/modules/admin/admin-project-profile.scss b/app/styles/modules/admin/admin-project-profile.scss index fe3984be..ed86342f 100644 --- a/app/styles/modules/admin/admin-project-profile.scss +++ b/app/styles/modules/admin/admin-project-profile.scss @@ -2,7 +2,7 @@ .project-details { @include profile-form; .looking-for-people { - @extend %light; + @include font-type(light); border-bottom: 1px solid $whitish; border-top: 1px solid $whitish; padding: 1rem 0; @@ -31,7 +31,7 @@ } } .delete-project { - @extend %xsmall; + @include font-size(x-small); display: block; margin-top: 1rem; text-align: right; @@ -40,7 +40,7 @@ } } .private-or-public { - @extend %xsmall; + @include font-size(x-small); color: $gray-light; margin-bottom: 2rem; svg { @@ -115,7 +115,7 @@ } tg-admin-project-restrictions { p { - @extend %xsmall; + @include font-size(x-small); text-align: center; } a { @@ -163,7 +163,7 @@ tg-admin-project-restrictions { color: $gray-light; } .owner-name { - @extend %bold; + @include font-type(bold); } .owner-avatar { width: 2.5rem; diff --git a/app/styles/modules/admin/admin-roles.scss b/app/styles/modules/admin/admin-roles.scss index 5507d1b0..90f0692d 100644 --- a/app/styles/modules/admin/admin-roles.scss +++ b/app/styles/modules/admin/admin-roles.scss @@ -3,8 +3,8 @@ display: inline-block; } .role-name { - @extend %xlarge; - @extend %light; + @include font-size(xlarge); + @include font-type(light); color: $grayer; } .icon { @@ -42,8 +42,8 @@ padding: .5rem; } .general-category { - @extend %light; - @extend %small; + @include font-type(light); + @include font-size(small); align-items: center; display: flex; justify-content: flex-end; diff --git a/app/styles/modules/admin/admin-submenu.scss b/app/styles/modules/admin/admin-submenu.scss index 6b019c83..2e4b9b80 100644 --- a/app/styles/modules/admin/admin-submenu.scss +++ b/app/styles/modules/admin/admin-submenu.scss @@ -1,7 +1,6 @@ .admin-submenu { li { - @extend %large; - @extend %title; + @include font-type(text); border-bottom: 1px solid $gray-light; text-transform: uppercase; &:last-child { diff --git a/app/styles/modules/admin/admin-third-parties-webhooks.scss b/app/styles/modules/admin/admin-third-parties-webhooks.scss index 7b280b39..1cca310e 100644 --- a/app/styles/modules/admin/admin-third-parties-webhooks.scss +++ b/app/styles/modules/admin/admin-third-parties-webhooks.scss @@ -14,7 +14,7 @@ } .table-header { - @extend %bold; + @include font-type(bold); border-bottom: 1px solid $gray-light; } .table-body { @@ -137,11 +137,11 @@ justify-content: space-between; padding: 1.5rem 0 .5rem; span:first-child { - @extend %bold; + @include font-type(bold); color: $gray-light; } a { - @extend %small; + @include font-size(small); color: $gray-light; &:hover { color: $primary-light; @@ -156,7 +156,7 @@ .history-single-request-body, .history-single-response-body { .response-container { - @extend %mono; + @include font-type(mono); align-content: center; align-items: center; background: $whitish; @@ -166,7 +166,7 @@ margin-bottom: .5rem; } span { - @extend %small; + @include font-size(small); color: $gray-light; flex-basis: 20%; flex-grow: 1; @@ -174,7 +174,7 @@ text-align: center; } textarea { - @extend %mono; + @include font-type(mono); border: 0; flex-grow: 2; min-height: 7.5rem; diff --git a/app/styles/modules/admin/contrib.scss b/app/styles/modules/admin/contrib.scss index a37dc03e..2db94d29 100644 --- a/app/styles/modules/admin/contrib.scss +++ b/app/styles/modules/admin/contrib.scss @@ -5,8 +5,8 @@ width: 100%; } h2 { - @extend %text; - @extend %large; + @include font-type(text); + @include font-size(large); margin-bottom: 0; } fieldset { @@ -17,7 +17,7 @@ margin-bottom: 1rem; } label { - @extend %text; + @include font-type(text); display: block; margin-bottom: .25rem; } diff --git a/app/styles/modules/admin/project-csv.scss b/app/styles/modules/admin/project-csv.scss index 4c370888..ac253f49 100644 --- a/app/styles/modules/admin/project-csv.scss +++ b/app/styles/modules/admin/project-csv.scss @@ -10,7 +10,7 @@ justify-content: space-between; margin-bottom: 1rem; a { - @extend %small; + @include font-size(small); min-width: 110px; } .icon:not(.icon-clipboard) { diff --git a/app/styles/modules/admin/project-values.scss b/app/styles/modules/admin/project-values.scss index e1ce865a..5a8119d2 100644 --- a/app/styles/modules/admin/project-values.scss +++ b/app/styles/modules/admin/project-values.scss @@ -20,7 +20,7 @@ } .project-values-header { - @extend %bold; + @include font-type(bold); border-bottom: 3px solid $whitish; } .project-values-body { diff --git a/app/styles/modules/admin/third-parties.scss b/app/styles/modules/admin/third-parties.scss index 7983d81c..9a5bf0ea 100644 --- a/app/styles/modules/admin/third-parties.scss +++ b/app/styles/modules/admin/third-parties.scss @@ -6,13 +6,13 @@ } input, textarea { - @extend %text; + @include font-type(text); } fieldset { margin-bottom: 1rem; } label { - @extend %text; + @include font-type(text); display: block; margin-bottom: .2rem; } @@ -38,7 +38,7 @@ padding: 0 1rem; } .help-copy { - @extend %small; + @include font-size(small); opacity: 0; &.visible { opacity: 1; diff --git a/app/styles/modules/auth/login-form.scss b/app/styles/modules/auth/login-form.scss index 591c60a1..03e5e556 100644 --- a/app/styles/modules/auth/login-form.scss +++ b/app/styles/modules/auth/login-form.scss @@ -11,7 +11,7 @@ } } .forgot-pass { - @extend %small; + @include font-size(small); color: $gray; opacity: 1; position: absolute; diff --git a/app/styles/modules/auth/register-form.scss b/app/styles/modules/auth/register-form.scss index 2aebef9c..971018eb 100644 --- a/app/styles/modules/auth/register-form.scss +++ b/app/styles/modules/auth/register-form.scss @@ -6,6 +6,6 @@ text-align: center; } .register-text { - @extend %small; + @include font-size(small); } } diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss index f6351766..124e7969 100644 --- a/app/styles/modules/backlog/backlog-table.scss +++ b/app/styles/modules/backlog/backlog-table.scss @@ -9,7 +9,7 @@ } } .row { - @extend %small; + @include font-size(small); align-items: center; border-bottom: 1px solid $gray-light; display: flex; @@ -128,8 +128,8 @@ .backlog-table-header { .backlog-table-title { - @extend %text; - @extend %medium; + @include font-type(text); + @include font-size(medium); border-bottom: 2px solid $gray-light; flex-wrap: nowrap; padding-right: 1rem; @@ -204,7 +204,7 @@ display: flex; flex-wrap: nowrap; a { - @extend %light; + @include font-type(light); display: inline-block; flex: 1; } @@ -216,7 +216,7 @@ display: none; margin-bottom: .3rem; .tag { - @extend %small; + @include font-size(small); margin-right: .5rem; padding: .2rem .5rem; } @@ -250,8 +250,8 @@ position: relative; width: 100%; span { - @extend %small; - @extend %title; + @include font-size(small); + @include font-type(text); color: $white; position: absolute; right: .5rem; @@ -290,7 +290,7 @@ margin: 2% auto; width: 3rem; img { - @extend %loading-spinner; + @include loading-spinner; max-height: 3rem; max-width: 3rem; } @@ -298,7 +298,7 @@ } .empty-backlog { - @extend %light; + @include font-type(light); padding: 2rem; text-align: center; .row { @@ -308,7 +308,7 @@ margin-bottom: 1rem; } .title { - @extend %large; + @include font-size(large); margin-bottom: .5rem; text-transform: uppercase; } diff --git a/app/styles/modules/backlog/sprints.scss b/app/styles/modules/backlog/sprints.scss index f4a78ce0..a97beb6c 100644 --- a/app/styles/modules/backlog/sprints.scss +++ b/app/styles/modules/backlog/sprints.scss @@ -22,7 +22,7 @@ } } .filter-closed-sprints { - @extend %small; + @include font-size(small); align-content: center; display: flex; justify-content: center; @@ -45,8 +45,8 @@ } .sprint-name { a { - @extend %large; - @extend %title; + @include font-size(normal); + @include font-type(text); @include ellipsis($width: 90%); display: inline-block; margin-right: .5rem; @@ -80,10 +80,10 @@ } } .number { - @extend %large; + @include font-size(small); } .description { - @extend %xsmall; + @include font-size(x-small); line-height: .6rem; margin-top: 5px; } @@ -92,13 +92,14 @@ justify-content: space-between; } .sprint-date { - @extend %large; - @extend %title; + @include font-size(small); + @include font-type(text); color: $gray-light; flex-flow: 1; } ul { margin: 0; + text-align: right; } li { display: inline-block; @@ -141,7 +142,7 @@ } .sprint-table { .sprint-empty { - @extend %light; + @include font-type(light); background: darken($whitish, 5%); border: 2px dashed lighten($gray-light, 10%); color: $gray; @@ -181,7 +182,7 @@ } } .column-us { - @extend %small; + @include font-size(small); flex-flow: 3; padding: 0 4px; } @@ -226,7 +227,7 @@ display: none; } .user-story-name { - @extend %small; + @include font-size(small); line-height: 1rem; margin-top: 5px; } @@ -253,14 +254,14 @@ } .sprints-empty { - @extend %light; + @include font-type(light); text-align: center; img { margin: 1rem 0; width: 50%; } .title { - @extend %large; + @include font-size(large); margin-bottom: .5rem; text-transform: uppercase; } diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index 403e7149..16b5f1f2 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/app/styles/modules/backlog/taskboard-table.scss @@ -5,7 +5,7 @@ $column-flex: 1; $column-shrink: 0; $column-margin: 0 10px 0 0; -%fold { +@mixin fold { .taskboard-task { background: none; border: 0; @@ -71,7 +71,7 @@ $column-margin: 0 10px 0 0; position: absolute; } .task-colum-name { - @extend %medium; + @include font-size(medium); align-items: center; background: $whitish; border-top: 3px solid $gray-light; @@ -107,7 +107,7 @@ $column-margin: 0 10px 0 0; display: block; margin-right: .3rem; svg { - @extend %medium; + @include font-size(medium); fill: $gray-light; transition: fill .2s linear; } @@ -143,10 +143,10 @@ $column-margin: 0 10px 0 0; } } .row-fold { - @extend %fold; + @include fold; } .column-fold { - @extend %fold; + @include fold; .taskboard-task { max-width: 40px; width: 40px; @@ -223,13 +223,13 @@ $column-margin: 0 10px 0 0; .taskboard-userstory-box { position: relative; .us-title { - @extend %large; - @extend %title; + @include font-size(normal); + @include font-type(text); margin-bottom: 0; margin-right: 3rem; } .points-value { - @extend %small; + @include font-size(small); color: $gray-light; span { margin-right: .1rem; diff --git a/app/styles/modules/common/assigned-to.scss b/app/styles/modules/common/assigned-to.scss index 907c3255..79612eaa 100644 --- a/app/styles/modules/common/assigned-to.scss +++ b/app/styles/modules/common/assigned-to.scss @@ -13,7 +13,7 @@ } } .loading-spinner { - @extend %loading-spinner; + @include loading-spinner; margin: 1rem auto; max-height: 2rem; max-width: 2rem; @@ -49,8 +49,8 @@ flex-grow: 1; margin-left: .5rem; .assigned-title { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); color: $gray; display: block; margin: .2rem 0 .25rem; diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss index 915388ee..872bbbeb 100644 --- a/app/styles/modules/common/colors-table.scss +++ b/app/styles/modules/common/colors-table.scss @@ -1,7 +1,7 @@ .colors-table { .table-header { - @extend %medium; - @extend %bold; + @include font-size(medium); + @include font-type(bold); border-bottom: 3px solid $whitish; &:hover { background: transparent; diff --git a/app/styles/modules/common/custom-fields.scss b/app/styles/modules/common/custom-fields.scss index 4d5d6413..d0efb714 100644 --- a/app/styles/modules/common/custom-fields.scss +++ b/app/styles/modules/common/custom-fields.scss @@ -1,7 +1,7 @@ .duty-custom-fields { margin-bottom: 2rem; .custom-fields-header { - @extend %bold; + @include font-type(bold); align-content: space-between; align-items: center; background: $whitish; @@ -55,15 +55,15 @@ display: block; } .custom-field-description { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); color: lighten($gray, 20%); display: block; line-height: .9rem; } } .custom-field-value { - @extend %light; + @include font-type(light); align-items: flex-start; flex: 1; padding: 0 1rem 0 2rem; diff --git a/app/styles/modules/common/external-reference.scss b/app/styles/modules/common/external-reference.scss index 44336f69..1e778589 100644 --- a/app/styles/modules/common/external-reference.scss +++ b/app/styles/modules/common/external-reference.scss @@ -12,7 +12,7 @@ } .external-reference { - @extend %small; + @include font-size(small); color: $gray-light; margin-top: .5rem; a { diff --git a/app/styles/modules/common/history.scss b/app/styles/modules/common/history.scss index 993231a1..554454a2 100644 --- a/app/styles/modules/common/history.scss +++ b/app/styles/modules/common/history.scss @@ -31,15 +31,15 @@ flex-grow: 1; } .activity-changed { - @extend %bold; + @include font-type(bold); } .activity-fromto { - @extend %small; + @include font-size(small); word-wrap: break-word; } } .history-tabs { - @extend %light; + @include font-type(light); border-bottom: 1px solid $whitish; border-top: 1px solid $whitish; margin-bottom: 0; @@ -127,7 +127,7 @@ } } .show-more-comments { - @extend %small; + @include font-size(small); border-bottom: 1px solid $gray-light; border-top: 1px solid $gray-light; color: $gray-light; @@ -177,7 +177,7 @@ } &.deleted-comment, .deleted-comment { - @extend %small; + @include font-size(small); color: $gray-light; padding: .5rem; a { @@ -196,12 +196,12 @@ display: none; margin: .2rem 0 .5rem; p { - @extend %medium; + @include font-size(medium); } } } .comment-restore { - @extend %small; + @include font-size(small); color: $gray-light; display: block; position: absolute; @@ -245,7 +245,7 @@ } } .date { - @extend %small; + @include font-size(small); color: $gray-light; margin-left: 1rem; } diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss index def10271..77e9644e 100644 --- a/app/styles/modules/common/lightbox.scss +++ b/app/styles/modules/common/lightbox.scss @@ -1,8 +1,8 @@ .lightbox { - @extend %lightbox; + @include lightbox; h2 { - @extend %xlarge; - @extend %light; + @include font-size(xlarge); + @include font-type(light); } } @@ -22,7 +22,7 @@ resize: vertical; } label { - @extend %xsmall; + @include font-size(xsmall); background: $whitish; border: 1px solid $gray-light; color: $grayer; @@ -191,7 +191,7 @@ } } .member-limit-warning { - @extend %small; + @include font-size(small); background: $red-light; color: $white; margin: 1rem 0; @@ -199,8 +199,8 @@ text-align: center; } .help-text { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); margin-top: 1rem; } .checksley-error-list { @@ -221,7 +221,7 @@ max-width: 600px; } .last-sprint-name { - @extend %small; + @include font-size(small); color: $gray; opacity: 1; position: absolute; @@ -247,7 +247,7 @@ } } .delete-sprint { - @extend %small; + @include font-size(small); color: $gray; float: right; margin: 1rem .25rem 0 0; @@ -278,8 +278,8 @@ text-align: center; } .subtitle { - @extend %large; - @extend %title; + @include font-size(large); + @include font-type(text); white-space: pre-line; } .options { @@ -308,8 +308,8 @@ text-align: center; } .subtitle { - @extend %large; - @extend %title; + @include font-size(large); + @include font-type(text); } .replacement { display: block; @@ -332,7 +332,7 @@ } } .warning { - @extend %bold; + @include font-type(bold); } } @@ -357,8 +357,8 @@ input { margin-right: .5rem; +label { - @extend %small; - @extend %text; + @include font-size(small); + @include font-type(text); } } } @@ -388,8 +388,8 @@ text-align: center; } .subtitle { - @extend %large; - @extend %title; + @include font-size(large); + @include font-type(text); } .options { display: flex; @@ -427,7 +427,7 @@ margin: 1rem auto; width: 5rem; img { - @extend %loading-spinner; + @include loading-spinner; max-height: 100%; max-width: 100%; width: 100%; @@ -446,9 +446,9 @@ transition: width .1s linear; } .progress { - @extend %title; - @extend %bold; - @extend %large; + @include font-type(text); + @include font-type(bold); + @include font-size(large); background: darken($whitish, 5%); bottom: 35px; color: $gray; @@ -517,8 +517,8 @@ } } .more-watchers { - @extend %title; - @extend %medium; + @include font-type(text); + @include font-size(medium); padding: .5rem; text-align: center; } diff --git a/app/styles/modules/common/nav.scss b/app/styles/modules/common/nav.scss index 5703357b..0da555f0 100644 --- a/app/styles/modules/common/nav.scss +++ b/app/styles/modules/common/nav.scss @@ -35,7 +35,7 @@ tg-project-menu { transition: fill .3s linear; } .helper { - @extend %small; + @include font-size(small); animation: slideLeft 200ms ease-in-out both; background: linear-gradient(to right, rgba($black, 1) 0%, rgba($black, .8) 100%); color: $white; @@ -80,7 +80,7 @@ tg-project-menu { line-height: 2.2rem; } .item { - @extend %large; + @include font-size(large); } .active { background: rgba($black, .2); diff --git a/app/styles/modules/common/related-tasks.scss b/app/styles/modules/common/related-tasks.scss index 6aa197ea..d34e27db 100644 --- a/app/styles/modules/common/related-tasks.scss +++ b/app/styles/modules/common/related-tasks.scss @@ -11,8 +11,8 @@ justify-content: space-between; min-height: 36px; .related-tasks-title { - @extend %medium; - @extend %bold; + @include font-size(medium); + @include font-type(bold); margin-left: 1rem; } .add-button { @@ -37,7 +37,7 @@ .related-tasks-body { width: 100%; .row { - @extend %small; + @include font-size(small); align-items: center; border-bottom: 1px solid $whitish; display: flex; @@ -83,7 +83,7 @@ margin-right: .25rem; } input { - @extend %medium; + @include font-size(medium); margin-right: 1rem; padding: 3px; width: 85%; diff --git a/app/styles/modules/common/ticket-data.scss b/app/styles/modules/common/ticket-data.scss index 0b350198..91415fe2 100644 --- a/app/styles/modules/common/ticket-data.scss +++ b/app/styles/modules/common/ticket-data.scss @@ -4,13 +4,13 @@ margin: 1.5rem 0 2rem; position: relative; .ticket-title { - @extend %larger; - @extend %light; + @include font-size(larger); + @include font-type(light); text-transform: uppercase; vertical-align: sub; } .detail-status { - @extend %small; + @include font-size(small); display: flex; margin-left: .25rem; position: relative; @@ -33,7 +33,7 @@ padding: 0; text-transform: none; a { - @extend %text; + @include font-type(text); padding: .5rem 1rem; } a:hover { @@ -43,8 +43,8 @@ } .ticket-data-container { - @extend %small; - @extend %normal; + @include font-size(small); + @include font-type(text); margin-bottom: 1rem; .icon { @include svg-size(.7rem); @@ -114,7 +114,7 @@ .ticket-watch { .ticket-watch-title { - @extend %bold; + @include font-type(bold); margin-bottom: .5rem; } .ticket-watch-inner { @@ -127,8 +127,8 @@ } .ticket-watch-button, .add-watcher { - @extend %light; - @extend %small; + @include font-type(light); + @include font-size(small); background: $gray-light; color: $white; flex: 1; diff --git a/app/styles/modules/common/wizard.scss b/app/styles/modules/common/wizard.scss index 9fb128ac..f0482026 100644 --- a/app/styles/modules/common/wizard.scss +++ b/app/styles/modules/common/wizard.scss @@ -1,5 +1,5 @@ .wizard-create-project { - @extend %lightbox; + @include lightbox; .close { @include svg-size(2rem); } @@ -12,7 +12,7 @@ margin-bottom: 0; } .subtitle { - @extend %small; + @include font-size(small); color: $gray-light; text-align: center; } @@ -61,7 +61,7 @@ vertical-align: text-top; } .template-name { - @extend %large; + @include font-size(large); text-transform: uppercase; } } @@ -121,7 +121,7 @@ } } .create-warning { - @extend %small; + @include font-size(small); padding: 1rem; text-align: center; .icon-exclamation { diff --git a/app/styles/modules/filters/filters.scss b/app/styles/modules/filters/filters.scss index 53fc5ab2..bc938262 100644 --- a/app/styles/modules/filters/filters.scss +++ b/app/styles/modules/filters/filters.scss @@ -9,7 +9,7 @@ } } .breadcrumb { - @extend %large; + @include font-size(large); margin-top: 1rem; .icon-arrow-right { @include svg-size(.7rem); @@ -43,7 +43,7 @@ text-align: center; width: 100%; .loading-spinner { - @extend %loading-spinner; + @include loading-spinner; max-height: 1rem; max-width: 1rem; } diff --git a/app/styles/modules/help/joyride.scss b/app/styles/modules/help/joyride.scss index c9938f01..945a61cd 100644 --- a/app/styles/modules/help/joyride.scss +++ b/app/styles/modules/help/joyride.scss @@ -15,11 +15,11 @@ .introjs-tooltip { h3 { - @extend %large; + @include font-size(large); margin-bottom: .5rem; } p { - @extend %light; + @include font-type(light); line-height: 1.4; margin-bottom: 0; } diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss index 1ef426ee..13e869f7 100644 --- a/app/styles/modules/home-project.scss +++ b/app/styles/modules/home-project.scss @@ -43,17 +43,17 @@ @include list-itemtype-track; } .description { - @extend %light; - @extend %medium; + @include font-type(light); + @include font-size(medium); margin: 0; } .project-data { display: flex; } .title { - @extend %medium; - @extend %text; - @extend %bold; + @include font-size(medium); + @include font-type(text); + @include font-type(bold); align-content: center; background: $whitish; display: flex; @@ -77,11 +77,11 @@ width: 100%; } h3 { - @extend %small; + @include font-size(small); } p { - @extend %small; - @extend %light; + @include font-size(small); + @include font-type(light); } } .involved-data { diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss index 8375a2cd..d641bbd9 100644 --- a/app/styles/modules/issues/issues-table.scss +++ b/app/styles/modules/issues/issues-table.scss @@ -21,8 +21,8 @@ } } .title { - @extend %medium; - @extend %bold; + @include font-size(medium); + @include font-type(bold); border-bottom: 1px solid $gray-light; &:hover { background: transparent; @@ -35,7 +35,7 @@ } } .table-main { - @extend %small; + @include font-size(small); border-bottom: 1px solid darken($whitish, 4%); } .avatar { @@ -161,11 +161,11 @@ margin-bottom: 1rem; } .title { - @extend %large; + @include font-size(large); text-transform: uppercase; } p { - @extend %light; + @include font-type(light); margin: 0; } } diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index d7492a9b..1ea5bf03 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/app/styles/modules/kanban/kanban-table.scss @@ -59,7 +59,7 @@ $column-margin: 0 10px 0 0; position: absolute; } .task-colum-name { - @extend %medium; + @include font-size(medium); align-items: center; background: $whitish; border-top: 3px solid $gray-light; @@ -96,7 +96,7 @@ $column-margin: 0 10px 0 0; } .kanban-table-body { - @extend %medium; + @include font-size(medium); display: flex; height: 100%; overflow: hidden; @@ -114,8 +114,8 @@ $column-margin: 0 10px 0 0; margin-right: 0; } .kanban-column-intro { - @extend %bold; - @extend %small; + @include font-type(bold); + @include font-size(small); color: $gray-light; margin: 1rem 2rem; &.active { diff --git a/app/styles/modules/search/search-result-table.scss b/app/styles/modules/search/search-result-table.scss index 2f4607bc..79571ccd 100644 --- a/app/styles/modules/search/search-result-table.scss +++ b/app/styles/modules/search/search-result-table.scss @@ -48,7 +48,7 @@ white-space: nowrap; } .icon { - @extend %medium; + @include font-size(medium); color: $gray-light; &:hover { color: $grayer; @@ -57,7 +57,7 @@ } } .table-main { - @extend %small; + @include font-size(small); border-bottom: 1px solid $whitish; } .status, @@ -83,7 +83,7 @@ } .search-result-table-header { - @extend %bold; + @include font-type(bold); } .empty-search-results { @@ -93,11 +93,11 @@ margin-bottom: 1rem; } .title { - @extend %large; + @include font-size(large); text-transform: uppercase; } p { - @extend %light; + @include font-type(light); margin: 0; } } diff --git a/app/styles/modules/team/team-filters.scss b/app/styles/modules/team/team-filters.scss index e32092b1..d6bc6ecf 100644 --- a/app/styles/modules/team/team-filters.scss +++ b/app/styles/modules/team/team-filters.scss @@ -4,8 +4,8 @@ position: relative; } li { - @extend %large; - @extend %text; + @include font-size(large); + @include font-type(text); border-bottom: 1px solid $gray-light; text-transform: uppercase; &:last-child { diff --git a/app/styles/modules/team/team-table.scss b/app/styles/modules/team/team-table.scss index c7927a87..bc62797f 100644 --- a/app/styles/modules/team/team-table.scss +++ b/app/styles/modules/team/team-table.scss @@ -14,7 +14,7 @@ justify-content: flex-end; } .attribute { - @extend %light; + @include font-type(light); flex: 1; position: relative; text-align: center; @@ -23,8 +23,8 @@ fill: $gray; } .points { - @extend %larger; - @extend %light; + @include font-size(larger); + @include font-type(light); color: $grayer; } .top { @@ -38,7 +38,7 @@ } } .leave-project { - @extend %small; + @include font-size(small); color: $red-light; .icon { @include svg-size(.8rem); @@ -54,8 +54,8 @@ } } .team-header { - @extend %title; - @extend %bold; + @include font-type(text); + @include font-type(bold); border-bottom: 0; } .hero { @@ -91,10 +91,10 @@ width: 100%; } .name { - @extend %bold; + @include font-type(bold); } .position { - @extend %light; + @include font-type(light); color: $gray-light; } } diff --git a/app/styles/modules/user-settings/mail-notifications-table.scss b/app/styles/modules/user-settings/mail-notifications-table.scss index adc7da4b..5e547d6d 100644 --- a/app/styles/modules/user-settings/mail-notifications-table.scss +++ b/app/styles/modules/user-settings/mail-notifications-table.scss @@ -7,7 +7,7 @@ } .policy-table-header { - @extend %bold; + @include font-type(bold); border-bottom: 2px solid $gray-light; } diff --git a/app/styles/modules/user-settings/user-change-password.scss b/app/styles/modules/user-settings/user-change-password.scss index e31f3d19..e0c8b801 100644 --- a/app/styles/modules/user-settings/user-change-password.scss +++ b/app/styles/modules/user-settings/user-change-password.scss @@ -7,7 +7,7 @@ } } label { - @extend %title; + @include font-type(text); display: block; margin-bottom: .5rem; } diff --git a/app/styles/modules/user-settings/user-profile.scss b/app/styles/modules/user-settings/user-profile.scss index 16f492d1..97d554eb 100644 --- a/app/styles/modules/user-settings/user-profile.scss +++ b/app/styles/modules/user-settings/user-profile.scss @@ -7,7 +7,7 @@ width: 100%; } .delete-account { - @extend %small; + @include font-size(small); display: block; margin-top: 1rem; } diff --git a/app/styles/modules/wiki/wiki-nav.scss b/app/styles/modules/wiki/wiki-nav.scss index 0c761b37..ef09edb9 100644 --- a/app/styles/modules/wiki/wiki-nav.scss +++ b/app/styles/modules/wiki/wiki-nav.scss @@ -1,6 +1,5 @@ .wiki-link { - @extend %large; - @extend %title; + @include font-type(text); align-items: center; border-bottom: 1px solid $gray-light; display: flex; @@ -42,8 +41,8 @@ text-align: center; } input[type="text"] { - @extend %text; - @extend %medium; + @include font-type(text); + @include font-size(medium); background: $grayer; color: $whitish; @include placeholder { diff --git a/app/styles/modules/wiki/wiki-summary.scss b/app/styles/modules/wiki/wiki-summary.scss index cadf915f..21189166 100644 --- a/app/styles/modules/wiki/wiki-summary.scss +++ b/app/styles/modules/wiki/wiki-summary.scss @@ -21,7 +21,7 @@ width: 32px; } .username { - @extend %large; + @include font-size(large); color: $primary-light; white-space: nowrap; } diff --git a/app/styles/shame/shame.scss b/app/styles/shame/shame.scss index 442e4a43..35b86fc0 100644 --- a/app/styles/shame/shame.scss +++ b/app/styles/shame/shame.scss @@ -10,7 +10,7 @@ _:-ms-fullscreen, // External lybrary makes weird things. Please destroy .markItUpEditor { - @extend %small; + @include font-size(small); line-height: 1.5; font-family: monospace; } diff --git a/app/themes/high-contrast/custom.scss b/app/themes/high-contrast/custom.scss index 92078437..f460705b 100644 --- a/app/themes/high-contrast/custom.scss +++ b/app/themes/high-contrast/custom.scss @@ -97,7 +97,7 @@ textarea { // Input errors .checksley-error-list { - @extend %light; + @include font-type(light); background: rgba($red, .7); color: $white; } diff --git a/app/themes/high-contrast/variables.scss b/app/themes/high-contrast/variables.scss index de28f77c..861556da 100755 --- a/app/themes/high-contrast/variables.scss +++ b/app/themes/high-contrast/variables.scss @@ -37,38 +37,14 @@ $tribe-secondary: #107a8a; $top-icon-color: $white; $dropdown-color: rgba(darken($primary-dark, 20%), 1); -//************************** -//** TYPOGRAPHY -//************************** +/* Overwrite mixins */ -// Font Sizes -%xsmall {font-size: .75rem;} -%small {font-size: .9rem;} -%medium {font-size: 1rem;} -%large {font-size: 1.2rem;} -%larger {font-size: 1.6rem;} -%xlarge {font-size: 2rem;} -%xxlarge {font-size: 3rem;} - -// Font Types -%title {font-family: Arial, Helvetica, sans-serif; } -%light {font-family: Arial, Helvetica, sans-serif; font-weight: 100; } -%text {font-family: Arial, Helvetica, sans-serif; font-weight: 400; } -%bold {font-family: Arial, Helvetica, sans-serif; font-weight:800; } -%taiga {font-family: 'taiga';} -%mono {font-family: 'courier new', 'monospace';} - -%lightbox { - background: rgba($white, 1); -} - -// Background images -%triangled-bg { +@mixin triangled-bg { background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center; background-size: cover; } -%background-taiga { +@mixin background-taiga { background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center; background-size: cover; } diff --git a/app/themes/material-design/custom.scss b/app/themes/material-design/custom.scss index 987d7cd1..25252a9d 100644 --- a/app/themes/material-design/custom.scss +++ b/app/themes/material-design/custom.scss @@ -92,7 +92,7 @@ textarea { // Input errors .checksley-error-list { - @extend %light; + @include font-type(light); background: rgba($red, .7); color: $white; } diff --git a/app/themes/material-design/variables.scss b/app/themes/material-design/variables.scss index a191c209..cf662a5d 100755 --- a/app/themes/material-design/variables.scss +++ b/app/themes/material-design/variables.scss @@ -37,35 +37,14 @@ $tribe-secondary: #107a8a; $top-icon-color: $white; $dropdown-color: rgba(darken($primary-dark, 20%), 1); -// Font Sizes -%xsmall {font-size: .75rem;} -%small {font-size: .9rem;} -%medium {font-size: 1rem;} -%large {font-size: 1.2rem;} -%larger {font-size: 1.6rem;} -%xlarge {font-size: 2rem;} -%xxlarge {font-size: 3rem;} +/* Overwrite mixins */ -// Font Types -%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; } -%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; } -%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; } -%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; } -%taiga {font-family: 'taiga';} -%mono {font-family: 'courier new', 'monospace';} - -// lightbox -%lightbox { - background: rgba($white, .98); -} - -// Background images -%triangled-bg { +@mixin triangled-bg { background: url('https://lh4.googleusercontent.com/-k7YewfrSQ_Q/VGdNZND0NBI/AAAAAAAAD1A/UDZBeSGR7iM/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B480') no-repeat center center; background-size: cover; } -%background-taiga { +@mixin background-taiga { background: url('https://lh6.googleusercontent.com/-2l_mJ5g6j4k/VGdNZCpaERI/AAAAAAAAD2o/zCx5Z3cYv6Y/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B497') no-repeat center center; background-size: cover; } diff --git a/app/themes/taiga/custom.scss b/app/themes/taiga/custom.scss index 3c6a40dd..40fca1f4 100644 --- a/app/themes/taiga/custom.scss +++ b/app/themes/taiga/custom.scss @@ -75,7 +75,7 @@ textarea { // Input errors .checksley-error-list { - @extend %light; + @include font-type(light); background: rgba($red, .7); color: $white; } diff --git a/app/themes/taiga/variables.scss b/app/themes/taiga/variables.scss index 963d7dcb..3eaa69df 100755 --- a/app/themes/taiga/variables.scss +++ b/app/themes/taiga/variables.scss @@ -36,41 +36,3 @@ $tribe-secondary: #107a8a; $top-icon-color: #11241f; $dropdown-color: rgba(darken($grayer, 20%), 1); - - -//************************** -//** TYPOGRAPHY -//************************** - -// Font Sizes -%xsmall {font-size: .75rem;} -%small {font-size: .9rem;} -%medium {font-size: 1rem;} -%large {font-size: 1.2rem;} -%larger {font-size: 1.6rem;} -%xlarge {font-size: 2rem;} -%xxlarge {font-size: 3rem;} - -// Font Types -%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; } -%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; } -%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; } -%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; } -%taiga {font-family: 'taiga';} -%mono {font-family: 'courier new', 'monospace';} - -// lightbox -%lightbox { - background: rgba($white, .98); -} - -// Background images -%triangled-bg { - background: url('../images/bg.png') no-repeat center center; - background-size: cover; -} - -%background-taiga { - background: url('../images/invitation_bg.jpg') no-repeat center center; - background-size: cover; -} diff --git a/package.json b/package.json index ef8de32e..44f9ac51 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "babel-cli": "^6.6.5", "babel-polyfill": "^6.7.4", "babel-preset-es2015": "^6.6.0", + "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.7.2", "bluebird": "^3.0.2", "chai": "^3.3.0", @@ -63,7 +64,7 @@ "gulp-print": "^2.0.1", "gulp-rename": "^1.2.0", "gulp-replace": "^0.5.3", - "gulp-sass": "2.2.0", + "gulp-sass": "^2.3.1", "gulp-scss-lint": "0.3.6", "gulp-size": "^2.0.0", "gulp-sourcemaps": "^1.5.0",