Styling Widgets

In [ ]:

    

%%html
<style type="text/css">
    .red { color: red }
    .italic { font-style: italic }
    .serif { font-family: serif }
    .bigFont { font-size: 2em }
</style>


    

In [ ]:

    

import com.twosigma.beakerx.widget.Label

l = new Label()
l.setValue("This is a big red serif font text in italics")
l.setDomClasses(["red", "italic", "serif", "bigFont"])
l


    

In [ ]:

    

%%html
<style type="text/css">
    @keyframes bounce {
        0%, 20%, 60%, 90%, 100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

        40% {
            -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
        }

        80% {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        95% {
            -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
        }
    }

    .bxPrimaryButton {
        background: #3498db;
        color: #FFF;
        text-transform: uppercase;
        width: 180px;
        height: 40px;
        padding: 4px 0;
        border-radius: 3px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .bxPrimaryButton:hover {
        cursor: pointer;
        animation: 0.5s bounce
    }
</style>


    

In [ ]:

    

import com.twosigma.beakerx.widget.Button

b = new Button()
b.setDescription("Bouncing button")
b.setDomClasses(["bxPrimaryButton"])
b