// フォントのサイズ設定 @for $i from 1 through 40 { .fs-#{$i}{ font-size: $i*0.1rem; } } @include media-breakpoint-up(sm){ @for $i from 1 through 40 { .fs-sm-#{$i}{ font-size: $i*0.1rem; } } } @include media-breakpoint-up(md){ @for $i from 1 through 40 { .fs-md-#{$i}{ font-size: $i*0.1rem; } } } @include media-breakpoint-up(lg){ @for $i from 1 through 40 { .fs-lg-#{$i}{ font-size: $i*0.1rem; } } } // 行間設定 @for $i from 0 through 40 { .lht-#{$i}{ line-height: $i*10%; } } // 幅設定 @for $i from 1 through 200 { .w-#{$i}{ width: $i*1%; } } @include media-breakpoint-down(sm){ @for $i from 1 through 100 { .w-sm-#{$i}{ width: $i*1%; } } } @include media-breakpoint-up(md){ @for $i from 10 through 100 { .w-md-#{$i}{ width: $i*1%; } } } @include media-breakpoint-up(lg){ @for $i from 1 through 100 { .w-lg-#{$i}{ width: $i*1%; } } } // ボーダー設定 @include media-breakpoint-up(lg){ .border-lg{ border: 1px solid lighten(#000000,90); } .border-lg-top{ border-top: 1px solid lighten(#000000,90); } .border-lg-bottom{ border-bottom: 1px solid lighten(#000000,90); } .border-lg-left{ border-left: 1px solid lighten(#000000,90); } .border-lg-right{ border-right: 1px solid lighten(#000000,90); } .border-lg-none{ border: none !important; } .border-lg-top-none{ border-top: none !important; } .border-lg-bottom-none{ border-bottom: none !important; } .border-lg-left-none{ border-left: none !important; } .border-lg-right-none{ border-right: none !important; } } @include media-breakpoint-up(md){ .border-md{ border: 1px solid lighten(#000000,90); } .border-md-top{ border-top: 1px solid lighten(#000000,90); } .border-md-bottom{ border-bottom: 1px solid lighten(#000000,90); } .border-md-left{ border-left: 1px solid lighten(#000000,90); } .border-md-right{ border-right: 1px solid lighten(#000000,90); } .border-md-none{ border: none !important; } .border-md-top-none{ border-top: none !important; } .border-md-bottom-none{ border-bottom: none !important; } .border-md-left-none{ border-left: none !important; } .border-md-right-none{ border-right: none !important; } } @include media-breakpoint-up(sm){ .border-sm{ border: 1px solid lighten(#000000,90); } .border-sm-top{ border-top: 1px solid lighten(#000000,90); } .border-sm-bottom{ border-bottom: 1px solid lighten(#000000,90); } .border-sm-left{ border-left: 1px solid lighten(#000000,90); } .border-sm-right{ border-right: 1px solid lighten(#000000,90); } .border-sm-none{ border: none !important; } .border-sm-top-none{ border-top: none !important; } .border-sm-bottom-none{ border-bottom: none !important; } .border-sm-left-none{ border-left: none !important; } .border-sm-right-none{ border-right: none !important; } } // border 拡張 @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); .border#{$infix}-top { border-top: $border-width solid $border-color !important; } .border#{$infix}-right { border-right: $border-width solid $border-color !important; } .border#{$infix}-bottom { border-bottom: $border-width solid $border-color !important; } .border#{$infix}-left { border-left: $border-width solid $border-color !important; } .border#{$infix}-top-0 { border-top: 0 !important; } .border#{$infix}-right-0 { border-right: 0 !important; } .border#{$infix}-bottom-0 { border-bottom: 0 !important; } .border#{$infix}-left-0 { border-left: 0 !important; } .border#{$infix}-x { border-left: $border-width solid $border-color !important; border-right: $border-width solid $border-color !important; } .border#{$infix}-y { border-top: $border-width solid $border-color !important; border-bottom: $border-width solid $border-color !important; } } } @for $i from 0 through 10 { .border-#{$i}{ border-width: $i*1px !important; } } @each $key, $color in $globalColor { .border-#{"" + $key} { border-color: $color !important; } } button{ outline:none !important; } .form-control{ &::placeholder{ color: #cccccc; } }