Design
Guide

OXD Introduction Design Thinking UX Standards
UX Guidelines Form Design Patterns UX Rules & Lows
Visual Design
Colors Typograpy Images Icons Motion Animations
Grid & Layout
Main Layouts Grid System
Navigations
Sidebar Topbar
Componets
Buttons Text-box Check-box Radio Radio Pils Switch Search-box Multi Select Dropdown Nested Dropdown Upload Inputs Date picker Time picker Color picker Labels Help Lable Status lable Grupe Input Grupe Overlay Scroll-bar Comment-box Paginations Divider Progress Circle Progress Slider Upload-box Segments Ribbon Radio Selector
Tables & List View Cards & Shaps Modals & Popups Advance Componets Charts
QA Standards
Developer
Ribbon Radio Selector
this is a default selector,which can be used to select one of the many choices/options. 

                .ribbon-radio-selector-pills default {
                  width: 160px;
                  height:155px;
                  background-color: #ffffff;
                  font-color:#76bc21;
                  transform: scale(1.1,1.1);
                  
                  height: 36px;
                  color: #ffffff;
                  border: 1px solid #929baa;
                  }

                  .ribbon-radio-selector-pills active {
                  background color: #76bc21;
                  date-icon-color: #ffffff;

                  }

                  .ribbon-radio-selector-pills active-date range section {
                  font-size:10px;
                  margin-top:8px;
                  padding:8px;
                  border-radius:0.6rem;
                  background-color:rgb(255 255 255 15%);
                  
                  }
                  .text-balance days {
                   color:#929baa;
                   font-size: 10px;

                  }
behavior
The pill's shape should remain the same as the active pill. Un-selected pill look different (width is different). All the pills should be same size: only different is active one is scaled up version of unselected pill.