guide v11x

버튼

Foundation을 기초로 Css Custom Function을 추가하여 재구성한 요소입니다.

Class

Class	비고
.button	버튼 (옵션 보기)
	옵션 Class	`.active` `.disabled` `.hollow` `.clear` `.expanded` `.dropdown` `.standard`
	색상 Class	`.primary` `.secondary` `.success` `.warning` `.alert` `.pink` `.dark` `.nd-only` `.nd-gray` `.nd-white`
.button-group	부모 영역 (옵션 보기)
.button-group	옵션 Class	`.expanded` `.small-expanded` `.medium-expanded` `.no-gaps` `.hollow` `.stacked` `.stacked-for-small` `.stacked-for-medium`

Custom Functions

`.button` 지정위치사용

--nd-btn-padding-x:             0.75rem;
--nd-btn-padding-y:             0.375rem;
--nd-btn-font-family:           inherit;
--nd-btn-font-size:             1em;
--nd-btn-font-weight:           400;
--nd-btn-line-height:           1.5;
--nd-btn-color:                 #fff;
--nd-btn-bg:                    var(--nd-primary, #007aff);
--nd-btn-border-width:          1px
--nd-btn-border-color:          var(--nd-primary, #007aff);
--nd-btn-border-radius:         0.25rem;

/* hover */
--nd-btn-hover-color:           #fff;
--nd-btn-hover-bg:              var(--nd-primary-hover, #006ee6);
--nd-btn-hover-border-color:    var(--nd-primary-hover, #006ee6);

/* active */
--nd-btn-active-color:          #fff;
--nd-btn-active-bg:             var(--nd-primary-active, #0062cc);
--nd-btn-active-border-color:   var(--nd-primary-active, #0062cc);

`.button.expanded` 지정위치사용

--nd-btn-width:                 100%;

`.button.standard` 지정위치사용

--nd-btn-border-radius:         0;

`.button-group` 지정위치사용

--nd-btn-group-gap:             0.25rem;

Class 선택자 변수

Class

Custom Functions

.button 지정위치사용

.button.expanded 지정위치사용

.button.standard 지정위치사용

.button-group 지정위치사용

`.button` 지정위치사용

`.button.expanded` 지정위치사용

`.button.standard` 지정위치사용

`.button-group` 지정위치사용