[FR] Implement border-styles?

[MaxBazarov]

https://spectrum.chat/puzzle-tokens/general/implement-border-styles~e2d7feb9-dc5b-4f8b-a8c5-aab6c5609e6a

I'm creating border variations, and have noticed that the CSS attribute "border-style" is not implemented. Is this planned? Specifically looking to implement the following border styles, in addition to the "solid" default:
dashed
dotted
double
Thanks!

Mike Bronner
@mikebronner

[mikebronner]

I have come up with the following solutions for styled borders:

• dashed: dash is 4 x border-width, gap is 4x border-width
• dotted: dash is 1 x border-width, gap is 1 x border-width
  Since we have no control over dashes and dots in CSS, I took the values that Safari uses. However, I could see other system having control of this, so using two non-existing CSS values (but not LESS variables!) would make a lot of sense. perhaps something like:

.Borders Dashed {
    border-width: 1px;
    border-style: dashed;
    border-dash: 4px;
    border-gap: 4px;
}

.Borders Dotted {
    border-width: 1px;
    border-style: dashed;
    border-dash: 1px;
    border-gap: 1px;
}

As for double-borders, I didn't see a native way of doing it, so I faked it using 3 borders, using a white border as the gap. That isn't accurate, of course, as it should be transparent, but I wasn't sure how to accomplish that. If you have a better implementation, please go for it! :)

            @outerWidth: ((@width - (@width / (@width / 2))) / (@width / 4));
            @gapWidth: (@outerWidth + (@width / 4));
            @innerWidth: (@outerWidth + @gapWidth);

            .Borders .Double .@{width} .@{colorKey} .@{variant} {
                border-width: unit(@innerWidth, px);
                border-color: ~"@{colors-@{colorValue}-@{variant}}";
                border-position: inside;
            }
            .Borders .Double .@{width} .@{colorKey} .@{variant} {
                border-width: unit(@gapWidth, px);
                border-color: white;
                border-position: inside;
            }
            .Borders .Double .@{width} .@{colorKey} .@{variant} {
                border-width: unit(@outerWidth, px);
                border-color: ~"@{colors-@{colorValue}-@{variant}}";
                border-position: inside;
            }

Let me know if this helps. Would be glad to continue the discussion if you have concerns. :)

[mikebronner]

Here's a rendered style output using the double-border code above:

[MaxBazarov]

Thanks for information! I will follow this way.

[MaxBazarov]

Added support for
border-style: dotted;
border-style: dashed;
in 6.3.0 update

[mikebronner]

@MaxBazarov Thanks for implementing this. I am having some issues with the dotted style not applying the correct dash-length. In dotted the dash-length and the gap-length should be the same. It looks like the dash-length is hard-coded to 1px at the moment?

Also, the dashed borders appear to implement the dotted style. Instead they should be rendered with the gap and dash being 3 x width each, as shown in the gray example:

[MaxBazarov]

Yes. Currently it’s hardcoded. I’m planning to support dash-length, gap-length, etc soon. So, I don’t close the task. On 26 Nov 2019, at 21:10, Mike Bronner <[email protected]<mailto:[email protected]>> wrote: @MaxBazarov<https://github.com/MaxBazarov> Thanks for implementing this. I am having some issues with the dotted style not applying the correct dash-length. In dotted the dash-length and the gap-length should be the same. It looks like the dash-length is hard-coded to 1px at the moment? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#4?email_source=notifications&email_token=AEMQVARBEA2DZ2SL7P64ZITQVVRCBA5CNFSM4JOPRW62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFG6H2Q#issuecomment-558752746>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AEMQVASGRY66E4OVI2YHS4TQVVRCBANCNFSM4JOPRW6Q>. If you do not wish to receive promotional materials from Ingram Micro via e-mail, please go to http://www.ingrammicro.com/emailmgmt or reply to this message and type unsubscribe in the subject. Ingram Micro Inc. Corporate Headquarters, 3351 Michelson Drive, Suite 100, Irvine, CA 92612 This email may contain material that is confidential, and proprietary to Ingram Micro, for the sole use of the intended recipient. Any review, reliance or distribution by others or forwarding without express permission is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies. [Ingram_2818e5de]

[mikebronner]

Until then, instead of hard-coding it, could you base it on the border-width attribute? Then when you implement dash- and gap-length attributes, if they aren't provided, fall back on border-width, and if that isn't provided, default to 1? I will see if I can't get a PR put together for this. :)

[MaxBazarov]

@mikebronner Please check the latest updates. Now I base on border-width.