Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
06/13/2017 04:38:30 AM (3 years ago)
Author:
netweb
Message:

Build Tools: Use stylelint to lint CSS and SCSS files.

  • Switches to using https://stylelint.io/ for CSS and SCSS linting
  • Removes the Ruby SCSS lint tool configuration and Grunt tasks
  • One less dependency platform for which BuddyPress repo tool chain.

Props netweb, hnla, DJPaul.
Fixes #7028.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-templates/bp-legacy/css/twentyseventeen.scss

    r11586 r11587  
    2222// In addition BP will use the em breakpoints as  referenced below to provide
    2323// a series of finer breakpoints for max widths, to allow fine adjustments;
    24 // For main structural elements we use the themes values, only using bp breakpoints
    25 // to manage granular elements in loops etc.
     24// For main structural elements we use the themes values, only using bp
     25// breakpoints to manage granular elements in loops etc.
    2626
    2727$x-small-only-bp: "max-width: 22em"; // for xtra small mobile only
     
    4040
    4141@mixin x-small-only {
    42     @media screen and ($x-small-only-bp){
     42
     43    @media screen and ($x-small-only-bp) {
     44
    4345        @content;
    4446    }
     
    4648
    4749@mixin small-only {
    48     @media screen and ($small-only-bp){
     50
     51    @media screen and ($small-only-bp) {
     52
    4953        @content;
    5054    }
     
    5256
    5357@mixin medium-only-bp {
    54     @media screen and ($med-only-bp){
     58
     59    @media screen and ($med-only-bp) {
     60
    5561        @content;
    5662    }
     
    5864
    5965@mixin small-up-bp {
    60     @media screen and ($small-up-bp){
     66
     67    @media screen and ($small-up-bp) {
     68
    6169        @content;
    6270    }
     
    6472
    6573@mixin small-up {
    66     @media screen and ($small-up-2017){
     74
     75    @media screen and ($small-up-2017) {
     76
    6777        @content;
    6878    }
     
    7080
    7181@mixin med-small-up {
     82
    7283    @media screen and ($med-small-up-2017) {
     84
    7385        @content;
    7486    }
     
    7688
    7789@mixin medium-up {
     90
    7891    @media screen and ($medium-up-2017) {
     92
    7993        @content;
    8094    }
     
    8296
    8397@mixin large-up {
     98
    8499    @media screen and ($large-up-2017) {
     100
    85101        @content;
    86102    }
     
    88104
    89105@mixin x-large-up {
     106
    90107    @media screen and ($x-large-up-2017) {
     108
    91109        @content;
    92110    }
     
    229247$unread:             $x-light-grey;
    230248$link-action:        #c82b2b;
     249
    231250/*--------------------------------------------------------------
    232251
     
    241260in your child themes root & either start over or modify the rulesets.
    242261
    243 If you do not require the styles you can dequeue them from the themes functions file.
     262If you do not require the styles you can dequeue them from the themes
     263functions file.
    244264
    245265Please see this codex article for more information:
     
    292312.buddypress {
    293313    // Remove any empty clearing elements, CSS provides clearing.
    294     div.clear {display: none;}
     314    div.clear {
     315        display: none;
     316    }
    295317
    296318    // deal with global clearing property set on heading elements
     
    298320
    299321    ul.item-list {
     322
    300323        h1,
    301324        h2,
     
    395418
    396419// Some element colors are inherited from BP original sheet so need to
    397 // to be reset under the dark scheme, where set in this sheet we simply state them
     420// be reset under the dark scheme, where set in this sheet we simply state them
    398421// only for the light scheme, additionally elements such as BP form styles
    399422// need styles removing & are handled later in 'Forms' section
     
    441464        }
    442465
    443         // With the dark scheme the subnav links lose definition as
    444         // nav menu links, add a border top to clarify the li.last element seperated from links.
     466        // With the dark scheme the subnav links lose definition as nav menu links,
     467        // add a border top to clarify the li.last element seperated from links.
    445468        #subnav.item-list-tabs {
    446469
     
    480503            .activity-meta,
    481504            .action {
     505
    482506                a {
    483507                    background: $off-white;
     
    500524
    501525        #item-header {
     526
    502527            .user-nicename {
    503528                color: $bp-xlight-text;
     
    560585        #subnav {
    561586
    562             li {background: none;}
     587            li {
     588                background: none;
     589            }
    563590
    564591            .groups-members-search {
     
    713740                a {
    714741
    715                     span {border-radius: 25%;}
     742                    span {
     743                        border-radius: 25%;
     744                    }
    716745                }
    717746            }
     
    753782
    754783            @include small-up-bp {
     784
    755785                li {
    756786                    float: left;
     
    787817                label,
    788818                option {
     819
    789820                    @include font-size(14);
    790821                }
     
    797828
    798829            @include small-up-bp {
     830
    799831                li.last {
    800832                    text-align: right;
     
    854886                    margin: 0 0 0 (-$spacing-val-md);
    855887
    856                     ul {margin-top: 0;}
     888                    ul {
     889                        margin-top: 0;
     890                    }
    857891                }
    858892            }
     
    898932                    border: 1px solid $border-med;
    899933                    border-bottom-color: $content-background;
     934
    900935                    @include border-top-radius(4px);
    901936                    margin-bottom: -1px;
     
    912947
    913948        #subnav {
     949
    914950            ul {
    915951                border-bottom: 0;
     
    940976        }
    941977
    942         .pag-count {margin-left: 0;}
     978        .pag-count {
     979            margin-left: 0;
     980        }
     981
    943982        .pagination-links {
    944983            margin-right: 0;
     
    957996                overflow: visible;
    958997                width: auto;
    959                 &:before {display: none;}
     998
     999                &:before {
     1000                    display: none;
     1001                }
    9601002            }
    9611003
     
    9861028        .activity-header,
    9871029        .activity-meta {
     1030
    9881031            @include default-font-sans();
    9891032        }
     
    10461089                text-align: center;
    10471090
    1048                 a {border-bottom: 0;}
     1091                a {
     1092                    border-bottom: 0;
     1093                }
    10491094
    10501095                img.avatar {
     
    10781123
    10791124                .item-title {
     1125
    10801126                    @include font-size(18);
    10811127                    line-height: 1.2;
     
    10901136                    .update {
    10911137                        display: block;
     1138
    10921139                        @include font-size(13);
    10931140
    10941141                        @include medium-up {
     1142
    10951143                            @include font-size(14);
    10961144                        }
     
    11181166
    11191167                    .item-title {
    1120                         @include font-size(22)
     1168
     1169                        @include font-size(22);
    11211170                    }
    11221171                }
     
    11941243
    11951244#buddypress {
     1245
    11961246    form#whats-new-form {
    11971247
     
    12191269                    border: 1px solid rgba($border-color, 0.5);
    12201270                    float: left;
    1221                     line-height: 1.5em;
     1271                    line-height: 1.5;
    12221272                    margin-top: 12px;
    12231273                    padding-left: 0.2em;
     
    12351285
    12361286                @include small-up {
     1287
    12371288                    #whats-new-post-in-box {
    12381289                        width: auto;
     
    12511302    // User account form requires matching bp default specificity
    12521303    #item-body {
     1304
    12531305        form#whats-new-form {
    12541306            margin: $spacing-val-lg 0;
     
    12941346
    12951347                .activity-header {
     1348
    12961349                    @include font-size(14);
    12971350
     
    13081361                    margin-right: $spacing-val-sm;
    13091362                    text-align: left;
    1310                     a {border-bottom: 0;}
     1363
     1364                    a {
     1365                        border-bottom: 0;
     1366                    }
    13111367                }
    13121368
     
    13161372
    13171373                    .activity-header {
     1374
    13181375                        @include font-size(16);
    13191376                    }
     
    13411398
    13421399                .activity-header {
     1400
    13431401                    @include font-size(14);
    13441402                }
     
    13911449                background: darken($light-background, 1%);
    13921450                border: 1px solid rgba(#9fd1e2, 0.3);
    1393                 a { font-style: italic; }
     1451
     1452                a {
     1453                    font-style: italic;
     1454                }
    13941455            }
    13951456
     
    14051466
    14061467.activity-permalink {
     1468
    14071469    #buddypress {
    14081470
     
    14141476
    14151477            li.mini {
     1478
    14161479                .activity-header {
     1480
    14171481                    @include font-size(16);
     1482
    14181483                    @include med-small-up {
     1484
    14191485                        @include font-size(20);
    14201486                    }
    14211487
    14221488                    margin-bottom: $spacing-val-lg;
    1423                     p {padding: $spacing-val-md;}
     1489
     1490                    p {
     1491                        padding: $spacing-val-md;
     1492                    }
    14241493                }
    14251494            }
     
    14681537                    display: inline-block;
    14691538                    font-family: inherit;
     1539
    14701540                    @include font-size(12);
    1471                     font-weight: normal;
     1541                    font-weight: 400;
    14721542                    line-height: 1.2;
    14731543                    padding: 4px 10px;
     
    15061576
    15071577            li {
     1578
    15081579                .item-avatar,
    15091580                .item {
     
    15581629
    15591630        @include small-up {
    1560             #profile-details-section {float: right;}
    1561             #basic-details-section {float: left;}
     1631
     1632            #profile-details-section {
     1633                float: right;
     1634            }
     1635
     1636            #basic-details-section {
     1637                float: left;
     1638            }
    15621639        }
    15631640
     
    16231700        // & reset them for med up  only.
    16241701        #item-header-cover-image {
     1702
    16251703            .user-nicename {
    16261704                color: $body-text;
     
    16431721
    16441722            #item-meta {
     1723
    16451724                @include font-size(14);
    16461725                text-align: left;
    16471726
    1648                 p {margin-bottom: 0.5em;}
     1727                p {
     1728                    margin-bottom: 0.5em;
     1729                }
    16491730            }
    16501731        }
     
    16541735
    16551736        main {
     1737
    16561738            header.entry-header {
    16571739                padding-bottom: 1rem;
     
    16761758                .generic-button {
    16771759                    float: none;
    1678                     margin: 1.5em 0 0 0;
     1760                    margin: 1.5em 0 0;
    16791761                }
    16801762            }
     
    16881770
    16891771            #item-header-avatar {
     1772
    16901773                img.avatar {
    16911774                    margin-right: 0;
     
    17131796
    17141797        @include medium-only-bp {
     1798
    17151799            #item-header {
     1800
    17161801                #item-meta {
    17171802                    margin-bottom: $spacing-val-md;
     
    17811866
    17821867                h2 {
     1868
    17831869                    @include font-size(14);
    17841870
    17851871                    @include med-small-up {
     1872
    17861873                        @include font-size(16);
    17871874                    }
     
    18271914
    18281915.bp-user {
     1916
    18291917    #buddypress {
    18301918
     
    18371925
    18381926                img.avatar,
    1839 
    18401927                a {
    18411928                    display: inline-block;
     
    19312018            background: none;
    19322019            color: inherit;
     2020
    19332021            @include font-size(14);
    19342022            width: auto;
     
    19532041            ul {
    19542042                color: rgba($body-text, 0.6);
     2043
    19552044                @include font-size(14);
    19562045            }
     
    19812070                    float: left;
    19822071
    1983                     > a {border-bottom: 0;}
     2072                    > a {
     2073                        border-bottom: 0;
     2074                    }
    19842075                }
    19852076
     
    20202111
    20212112    #subnav {
     2113
    20222114        li {
     2115
    20232116            @include small-only {
    20242117                background: $content-background;
     
    20362129
    20372130                    label {
    2038                         input[type="text"] {width: 100%;}
     2131
     2132                        input[type="text"] {
     2133                            width: 100%;
     2134                        }
    20392135                    }
    20402136                }
     
    20732169
    20742170            th {
    2075                 @include font-size(14)
     2171
     2172                @include font-size(14);
    20762173            }
    20772174
    20782175            td {
    2079                 @include font-size(12)
     2176
     2177                @include font-size(12);
    20802178            }
    20812179
     
    20872185
    20882186                th {
    2089                     @include font-size(16)
     2187
     2188                    @include font-size(16);
    20902189                }
    20912190
    20922191                td {
    2093                     @include font-size(14)
     2192
     2193                    @include font-size(14);
    20942194                }
    20952195            }
     
    20982198
    20992199                th {
    2100                     @include font-size(18)
     2200
     2201                    @include font-size(18);
    21012202                }
    21022203
    21032204                td {
    2104                     @include font-size(16)
    2105                 }
    2106             }
    2107         }
    2108 
    2109         .pag-count {font-style: italic;}
     2205
     2206                    @include font-size(16);
     2207                }
     2208            }
     2209        }
     2210
     2211        .pag-count {
     2212            font-style: italic;
     2213        }
    21102214
    21112215        .notifications-options-nav,
     
    21722276            }
    21732277
    2174             table {margin-top: 0;}
     2278            table {
     2279                margin-top: 0;
     2280            }
    21752281
    21762282            .profile-fields {
     
    22202326                        background: none;
    22212327                        border: 0;
    2222                         @include font-size(18)
     2328
     2329                        @include font-size(18);
    22232330                    }
    22242331                } //.button-nav
     
    22272334                .field-visibility-settings-notoggle,
    22282335                .field-visibility-settings {
     2336
    22292337                    @include font-size(14);
    22302338                    margin-top: $spacing-val-sm;
     
    22342342                .visibility-toggle-link {
    22352343                    background: $dark-background;
     2344
    22362345                    @include border-radius(3px);
    22372346                    color: #fff;
     
    22412350
    22422351            .bp-avatar {
     2352
    22432353                #bp-delete-avatar {
    2244                     a {font-size: inherit; }
     2354
     2355                    a {
     2356                        font-size: inherit;
     2357                    }
    22452358                }
    22462359            }
     
    22612374
    22622375        #groups-list {
     2376
    22632377            li {
     2378
    22642379                .item {
     2380
    22652381                    @media screen and (min-width: 77.5em) {
    22662382                        left: 5%;
     
    23082424            .message-metadata {
    23092425
    2310                 &::after {
     2426                &:after {
    23112427                    clear: both;
    23122428                    content: "";
     
    23192435
    23202436                @include med-small-up {
     2437
    23212438                    img.avatar {
    23222439                        float: left;
     
    23502467            }
    23512468
    2352             .bp-tooltip:hover::after,
    2353             .bp-tooltip:active::after,
    2354             .bp-tooltip:focus::after {
     2469            .bp-tooltip:hover:after,
     2470            .bp-tooltip:active:after,
     2471            .bp-tooltip:focus:after {
    23552472                right: 40px;
    23562473                text-align: right;
     
    24222539                td.thread-options {
    24232540                    border-left: 0 !important;
     2541
    24242542                    @include calc(width, "100% - 30px");
    24252543                    margin-left: 0;
     
    24352553
    24362554                    a {
     2555
    24372556                        @include font-size(12);
    24382557                        line-height: 2.2;
     
    24512570                    @include small-only {
    24522571                        clear: both;
     2572
    24532573                        @include font-size(11);
    24542574                        width: 100%;
     
    24862606            list-style: none;
    24872607
    2488             li {margin-left: 0;}
     2608            li {
     2609                margin-left: 0;
     2610            }
    24892611
    24902612            li.friend-tab {
     
    25432665
    25442666            td:nth-child(2) {
     2667
    25452668                strong {
    25462669                    margin: -8px -8px 8px;
     
    25702693                }
    25712694
    2572                 a:last-child::after {
     2695                a:last-child:after {
    25732696                    content: attr(title);
    25742697                    display: block;
     
    25862709        padding-left: $spacing-val-sm;
    25872710
    2588         ul {    margin: 0; }
     2711        ul {
     2712            margin: 0;
     2713        }
    25892714
    25902715        li {
     
    26132738            // 'p' = email notification screen sub heading
    26142739            > p {
     2740
    26152741                @include font-size(20);
    26162742                margin: $spacing-val-md 0 $spacing-val-sm;
     
    26772803            }
    26782804
    2679             input[type='text'],
    2680             input[type='email'],
    2681             input[type='password'],
     2805            input[type="text"],
     2806            input[type="email"],
     2807            input[type="password"],
    26822808            textarea {
    26832809                width: 100%;
     
    26942820
    26952821        form {
     2822
    26962823            .ac-textarea {
    26972824                background: $light-background;
     
    27312858
    27322859    #signup_form.standard-form {
     2860
    27332861        div.submit {
    27342862            float: none;
    27352863
    2736             input {margin-right: 0;}
     2864            input {
     2865                margin-right: 0;
     2866            }
    27372867        }
    27382868    }
     
    27532883        form { // *sigh* only to bludgeon over specified rules
    27542884            border: 1px solid rgba($border-color, 0.6);
     2885
    27552886            @include border-radius(2px);
    27562887            overflow: hidden;
     
    27712902            input[type="submit"] {
    27722903                border: 0;
     2904
    27732905                @include font-size(14);
    27742906                line-height: inherit;
     
    27822914
    27832915            input[type="submit"] {
     2916
    27842917                @include border-radius-none();
    27852918                float: right;
    2786                 font-weight: normal;
     2919                font-weight: 400;
    27872920                padding: 0.2em 1em;
    27882921                text-align: center;
     
    27942927    } // close .dir-search, .message-search
    27952928
    2796     // Dirs & certain components hide search hides labels so can't width the label element
    2797     // adjust so that the input takes reduced width.
     2929    // Dirs & certain components hide search hides labels so can't width the
     2930    // label element adjust so that the input takes reduced width.
    27982931
    27992932    div.dir-search {
     
    28052938    #search-message-form {
    28062939
    2807         input[type='text'] {
     2940        input[type="text"] {
    28082941            float: left;
    28092942            margin: 0;
     
    28152948
    28162949    @include small-up {
     2950
    28172951        div.dir-search,
    28182952        div.message-search,
     
    28332967            form {
    28342968
    2835                 input[type='text'] {
     2969                input[type="text"] {
     2970
    28362971                    @include font-size(16) ;
    28372972                }
    28382973
    2839                 input[type='submit'] {
     2974                input[type="submit"] {
     2975
    28402976                    @include font-size(16) ;
    28412977                }
     
    28462982} // close #buddypress
    28472983
    2848 // Adjustments for form elements colors, backgrounds, borders under the dark scheme.
     2984// Adjustments for form elements colors, backgrounds, borders under
     2985// the dark scheme.
    28492986body.colors-dark {
    28502987
     
    28602997                    background: #333;
    28612998                    border-color: #555;
     2999
    28623000                    @include border-radius(2px);
    28633001                    padding: 1px;
     
    28693007
    28703008                input[type="submit"] {
     3009
    28713010                    @include border-radius(2px);
    28723011                }
     
    28793018    }
    28803019}
     3020
    28813021/**
    28823022*-------------------------------------------------------------------------------
     
    28933033
    28943034    table {
     3035
    28953036        @include font-size(14);
    28963037        margin: $spacing-val-md 0;
     
    29093050
    29103051    @include medium-up {
     3052
    29113053        table {
     3054
    29123055            @include font-size(16);
    29133056        }
     
    29713114    .messages-notices {
    29723115
    2973         .bp-tooltip:hover::after,
    2974         .bp-tooltip:active::after,
    2975         .bp-tooltip:focus::after {
     3116        .bp-tooltip:hover:after,
     3117        .bp-tooltip:active:after,
     3118        .bp-tooltip:focus:after {
    29763119            left: 0;
    29773120            margin-top: 20px;
     
    29993142
    30003143        p {
     3144
    30013145            @include font-size(18);
    3002             font-weight: bold;
     3146            font-weight: 700;
    30033147        }
    30043148
     
    30063150
    30073151            p {
     3152
    30083153                @include message-box($notice-info);
    30093154            }
     
    30133158
    30143159            p {
     3160
    30153161                @include message-box($notice-update);
    30163162            }
     
    30263172            border: 1px solid #000;
    30273173            color: $body-text;
     3174
    30283175            @include font-size(16);
    30293176        }
     
    30343181// Without direct classes on our mesages ( 'warning')
    30353182// we need to use the body classes
    3036 // todo: If this is class .warning is included in main BP styles remove from here
     3183// @todo If this class .warning is included in main BP styles remove from here
    30373184
    30383185.delete-group {
     
    30433190
    30443191            p {
     3192
    30453193                @include message-box($notice-warning);
    30463194            }
Note: See TracChangeset for help on using the changeset viewer.